How to create ultra-fast HTML5 software for iPad

One HTML5 software designed for iPad to query time zones, everytimezone.com, has recently caught some attention. It is simple, in place, can be used offline, and extremely fast. Because HTML5 software is essentially a Web page, it does not need to be released through the Apple App Store. Users only need to access everytimezone.com on the iPad and then save the bookmarks to the desktop, the next time I open it, it becomes something almost identical to the native software. Thomas Fuhe, creator of everytimezone.com, is a senior JavaScript expert and one of the core developers of the Javascript framework prototype. He recently wrote an article on his blog to teach him seven tips on how to ensure the rapid running of HTML5 software on the iPad. -- Editor
I. Use fewer Images
At the beginning, we used a very complex set of WebKit-gradient to show the gradient effect of each day in each city. It was found that this made translation very slow. -The WebKit-gradient method is to build bitmap. For the conversion engine of a browser, this is exactly the same as loading an image from the outside (for example, a PNG. Mobilesafari shows that the speed of image display is quite slow (we hope 4.0 can be improved). To solve this problem, we can only use images and-WebKit-gradient.
We finally replaced those color bars with a large canvas element on the background. When you drag the cursor line, the color of the fast lines will change, and only the parts being changed will be re-drawn. You can reuse-WebKit-gradient to some extent when using canvas, for example:
// WebKit CSS gradient
-WebKit-gradient (linear, Left top, right top,
From (# 4b4c4d ),
Color-stop (0.249, # 4b4c4d ),
Color-stop (0.25, # 575b5c ),
Color-stop (0.329, # 575b5c ),
Color-stop (0.33, #6b7071 ),
Color-stop (0.749, #6b7071 ),
Color-stop (0.75, # 575b5c ),
Color-stop (0.909, # 575b5c ),
Color-stop (0.91, # 4b4c4d ),
To (# 4b4c4d)
);
// Canvas gradient
VaR gradient = $ ('canvas '). getcontext ("2D"). createlineargradient );
Gradient. addcolorstop (0, '# 4b4c4d ');
Gradient. addcolorstop (0.249, '# 4b4c4d ');
Gradient. addcolorstop (0.25, '# 575b5c ');
Gradient. addcolorstop (0.329, '# 575b5c ');
Gradient. addcolorstop (0.33, '#6b7071 ');
Gradient. addcolorstop (0.749, '#6b7071 ');
Gradient. addcolorstop (0.75, '# 575b5c ');
Gradient. addcolorstop (0.909, '# 575b5c ');
Gradient. addcolorstop (0.91, '# 4b4c4d ');
Gradient. addcolorstop (1, '# 4b4c4d ');
2. Do not use text-shadow or box-Shadow.
This is another important factor in slowing down the speed. It is best not to use these CSS attributes.
Iii. Hardware acceleration is a new feature ...... There are also many insects
On safari, you only need to use the CSS Attribute-WebKit-transform to enable hardware acceleration. (Opacity also works, but the disadvantages are described above .)
Hardware acceleration has its own limitations. For example, there is a limit on the number of animations running at the same time. If this limit is exceeded, the animation will flash and sometimes error occurs. However, if you use it lightly, it will be very effective.
4. Use touch events whenever possible
Touch events are a good choice, because the traditional onclick events on the iPad may be a little delayed. In everytimezone.comSource code TIPS:
VaR supportstouch = 'createtouch' in document;
Element [supportstouch? 'Ontouchmove ': 'onmousemove'] = function (event ){
VaR pagex = event. pagex;
If (event. Touches) pagex = event. Touches [0]. pagex;
//...
}
5. Do not use opacity
For some reason, using the opacity CSS attribute sometimes interferes with hardware acceleration. If you feel that the speed is slow but you cannot see any problem, check whether Opacity is used.
6. There is no shortcut to everything. Please hand-write JavaScript and CSS
Do not rely on frameworks or things recommended to you by webpage standards enthusiasts. In this example, there is only one highly simplified HTML page, and CSS is written in the page. No JavaScript framework is used, and the features of the Target Platform (IPAD) are used as much as possible, the final result is a slim web page that can be loaded almost instantly, and the cache is well done, so it is not rude to use it offline. Yes, we can also choose to use JavaScript and CSS frameworks, but sometimes there are only a few. (Remember, you don't need all the cross-browser support provided by various frameworks .)
// Mini-Pico-tiny convenience micro-framework, YMMV
Function $ (ID) {return document. getelementbyid (ID );}
Function HTML (ID, HTML) {$ (ID). innerhtml = HTML ;}
Function CSS (ID, style) {detail (id).style.css text + = ';' + style ;}
Function anim (ID, transform, opacity, dur ){
CSS (ID, '-WebKit-transition:-WebKit-transform' +
', Opacity' + (dur | 0.5) +'s, '+ (dur | 0.5) +'s;-WebKit-transform:' +
Transform + '; opacity:' + (1 | opacity ));
}
7. Use translate instead of translate3d.
When using-WebKit-transform, remember to use the translate3d (x, y, z) syntax instead of the translate (x, y) syntax ). For some reason, the latter cannot support hardware acceleration, at least on iOS 3.x (but it does not seem to work in Safari on the desktop ). Thank you for pointing out this. (We also recommend that you check his iscroll, which contains many greatCode Is also a good example of how to optimize the speed of the page on the mobile WebKit .)