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:
- Have two iframes. Only one should be visible and active in time.
将图像带入第一机。 • 跟踪装载图像的规模。 如果准确的尺寸追踪很难进行
可能是相当好的近似。
- As that number approaches some thresshold start preloading the currently visible content into second iframe.
- Flip the visibility of iframes so the second one becomes active.
- Clear the inner content of the first frame.
- Repeat the whole procedure as necessary.
我不知道这是否会为你工作,但我希望,iPad的WebKit发动机能够独立地展示框架的记忆。
EDIT: It turned out you re writing a game.
如果游戏,我就认为,你希望同时在屏幕上打上许多游戏物体,而你却只能够卸下其中一些部分。 此处对该案提出了一些建议:
- Don t use DOM for games: it s too memory-heavy. Fortunately, you re using
canvas
already.
- 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.
- 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.
- Try vector graphics. SVG is awesome and canvg can draw it on top of canvas.
- 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.
- 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.
- 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.
- 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.
- 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.
除了你最初提出的用你的图像推翻海滩的建议外,实际上也有效。 这样做并不简单。 探索减少下载规模的可能性。