技术开发 频道

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

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

0
相关文章