用 HTML5 给 iPad,iPhone 打造速度超快的应用

核心提示：gradient.addColorStop(0.33,’#6b7071′);gradient.addColorStop(0.749,’#6b7071′);gradient.addColorStop(0.75,’#575b5c’);gradient.addColorStop(0.909,’#575b5c’);gradie

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’);

二、不要用 text-shadow 和 box-shadow

这是速度变慢的另外一个重要因素。最好不要用这些 CSS 属性。

三、硬件加速是很新的功能……而且也很多虫

在 Safari 上，只要使用 -webkit-transform 这个 CSS 属性就可以启用硬件加速了。(opacity 也行，不过缺点上面说过了。)

硬件加速有其局限，例如同时在跑的动画数量就有限制，如果超过了这个限制，动画就会闪烁，有时还会出错。不过如果轻度使用的话，效果会非常棒。

四、尽可能地使用触控事件

触控事件是个好选择，因为传统的 onClick 事件在 iPad 上用来会有点延迟。在 everytimezone.com 的源代码里有些小窍门，教你如何在使用触控事件的同时，也能够支持非触控设备上的浏览器：

var supportsTouch = ‘createTouch’ in document;

element[supportsTouch ? 'ontouchmove' : 'onmousemove'] = function(event){

var pageX = event.pageX;

if (event.touches) pageX = event.touches[0].pageX;

// …

}

五、不要用 opacity

因为某些原因，使用 opacity 这个 CSS 属性有时会干扰硬件加速。如果你感到速度变慢，但又看不出哪里出了问题的话，就检查一下有没有用到 opacity 吧。

六、万事无捷径，请手写 JavaScript 和 CSS

不要依赖框架或是网页标准狂热分子推荐给你的东西。我们这个例子里只有一个高度精简的 HTML 页面，CSS 都写在页面里，没用任何 JavaScript 框架，并尽量利用了目标平台(iPad)的特性，最终的结果就是一个几乎能够瞬间加载的苗条网页，而且缓存做得很好，离线使用也毫不失礼。没错，我们也可 以选择用 JavaScript 和 CSS 框架，但有的时候少即多。(记住，各类框架所提供的那些对跨浏览器的支持你并非全都需要。)

// mini-pico-tiny convenience micro-framework, ymmv

function $(id){ return document.getElementById(id); }