English 中文(简体)
Javascript 装载了价值200mb的新图像后,慢慢地在Safari / iPad2。 为什么这样做?
原标题:Javascript runs slowly in Safari / iPad2 after loading 200mb worth of new Images(). Why might this be?

Does anyone know why Javascript performance would be affected by the loading of lots of external JPG/PNG images into HTML5 Image() objects, totalling approx 200Mb-250Mb. Performance also seems to be affected by cache. Ie. if the cache is full(-ish) from previous browsing the performance on the current site is greatly reduced.

有两条话说,可以粗略地解决。

  1. clear cache manually.
  2. minimise browser, wait about 20 secs and re-open the browser after which time the iOS/browser has reclaimed the memory and runs the JS as it should.

我本希望Si-赖斯恢复工作需要记忆,以完成目前的任务,但似乎没有。 另一项工作是将200Mb的切除图像输入图像(图像)物体,然后通过制定<代码>src = “予以删除。 这似乎有所助益,但并非一种棘手的解决办法。

please help?

问题回答

First and foremost read the excellent post on LinkedIn Engineering blog. Read it carefully and check if there are some optimizations that you can also try in your application. If you tried all of them and that still haven t solved your performance issues read on.


I 假设你在网页上拥有一些图像或杂志式内容。

How about having this image area in a separate iframe? What you could do then is this:

  1. Have two iframes. Only one should be visible and active in time.
  2. 将图像带入第一机。 • 跟踪装载图像的规模。 如果准确的尺寸追踪很难进行

    可能是相当好的近似。

  3. As that number approaches some thresshold start preloading the currently visible content into second iframe.
  4. Flip the visibility of iframes so the second one becomes active.
  5. Clear the inner content of the first frame.
  6. Repeat the whole procedure as necessary.

我不知道这是否会为你工作,但我希望,iPad的WebKit发动机能够独立地展示框架的记忆。


EDIT: It turned out you re writing a game.

如果游戏,我就认为,你希望同时在屏幕上打上许多游戏物体,而你却只能够卸下其中一些部分。 此处对该案提出了一些建议:

  1. Don t use DOM for games: it s too memory-heavy. Fortunately, you re using canvas already.
  2. Sprite your images. Image sprites not only help reducing the number of requests. They also let you reduce the number of Image objects and keep the per-file overhead lower. Read about using sprites for canvas animations on IE blog.
  3. Optimize your images. There are several file size optimizers for images. SmushIt is one of them. Try it for your images. Pay attention to other techniques discussed in this great series by Stoyan Stefanov at YUI blog.
  4. Try vector graphics. SVG is awesome and canvg can draw it on top of canvas.
  5. Try simplifying your game world. Maybe some background objects don t need to be that detailed. Or maybe you can get away with fewer sprites for them. Or you can use image filters and masks for different objects of the same group. Like Dave Newton said iPad is a very constrained device and chances are you can get away with a relatively low-quality sprites.

These were all suggestions related to reduction of data you have to load. Some other suggestions that might work for you.

  1. Preload images that you will need and unload images that you no longer need. If your game has "levels" or "missions" load sprites needed only for current one.
  2. Try loading "popular" images first and download the remaining once in background. You can use separate <iframe> for that so your main game loop won t be interrupted by downloads. You can also use cross-frame messaging in order to coordinate your downloader frame.
  3. You can store the very most popular images in localStorage, Application Cache and WebSQL. They can provide you with 5 mb of storage each. That s 15 megs of persistent cache for you. Note that you can use typed arrays for localStorage and WebSQL. Also keep in mind that Application Cache is quite hard to work with.
  4. Try to package your game as a PhoneGap application. This way you can save your users from downloading a huge amount of data before playing the game. 200 megs as a single download just to open a page is way too much. Most people won t even bother to wait for that.

除了你最初提出的用你的图像推翻海滩的建议外,实际上也有效。 这样做并不简单。 探索减少下载规模的可能性。

I managed to reduce the impact by setting all the images that aren t currently in the viewport to display:none. This was with background images though and I haven t tested over 100Mb of images, so can t say whether this truly helps. But definitely worth of trying.





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签