ipad打造速度超快的html5软件.doc
4页
如何为 iPad 打造速度超快的 HTML5 软件Lawrence Li on 2010-6-23, 01:35 Comments (4) 有一个为 iPad 设计的用来查时区的 HTML5 软件 最近引起了一些注意它简单、到位，可以离线使用，并且速度极快由于 HTML5 软件本质上只是一个网页，故不需要通过苹果的 App Store 商店发行，用户只要用 iPad 访问 ，然后将书签存到桌面，下一次打开就变成了一个与原生软件几乎无异的东西 的作者托马斯·富赫是资深 JavaScript 专家，也是 JavaScript 框架 Prototype 的核心开发者之一他近日在博客上撰文传授了如何保证 HTML5 软件在 iPad 上飞速运行的七条秘诀，特翻译如下—— 编者一、少用图片一开始，为了做出用来表示各个城市的每一天的那种渐变效果，我们用了一套相当复杂的 -webkit-gradient，结果发现这会令转译速度变得非常非常慢webkit-gradient 的工作方法是构建位图，对于浏览器的转译引擎来说，这和从外部加载图片（例如一张 PNG）是完全一样的MobileSafari 显示图片速度之慢是出了名的（希望 4.0 对此有所改进），要解决这个问题，基本上只能不用图片和 -webkit-gradient。
我们最终把那些色彩条快用背景上的一个很大的 canvas 元素替代了当你拖动游标线时，那些条快的颜色会发生变化，只有正在变化的部分才会被重新绘制用 canvas 时可以在某种程度上复用 -webkit-gradient，比如这样：// 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 gradientvar gradient = $('canvas').getContext("2d").createLinearGradient(0,0,230,0);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');二、不要用 text-shadow 和 box-shadow这是速度变慢的另外一个重要因素。
最好不要用这些 CSS 属性三、硬件加速是很新的功能……而且也很多虫在 Safari 上，只要使用 -webkit-transform 这个 CSS 属性就可以启用硬件加速了opacity 也行，不过缺点上面说过了硬件加速有其局限，例如同时在跑的动画数量就有限制，如果超过了这个限制，动画就会闪烁，有时还会出错不过如果轻度使用的话，效果会非常棒四、尽可能地使用触控事件触控事件是个好选择，因为传统的 onClick 事件在 iPad 上用来会有点延迟在 的源代码里有些小窍门，教你如何在使用触控事件的同时，也能够支持非触控设备上的浏览器：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, ymmvfunction $(id){ return document.getElementById(id); }function html(id, html){ $(id).innerHTML = html; }function css(id, style){ $(id).style.cssText += ';'+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));}七、别用 translate，用 translate3d使用 -webkit-transform 时，记得用 translate3d(x,y,z) 语法，而不是 translate(x,y)。
因为某种原因，后者无法支持硬件加速，至少在 iOS 3.x 上不行（不过在桌面版 Safari 里似乎没问题）谢谢马提奥·斯宾内利指出这点也推荐大家看看他做的 iScroll，里面有很多很棒的代码，也是演示如何为页面在移动版 WebKit 上的速度进行优化的好例子。
