开发学院手机开发iPhone 开发 用 HTML5 给 iPad,iPhone 打造速度超快的应用 阅读

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

 2010-12-18 08:06:22 来源:WEB开发网   
核心提示: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); }

Tags:HTML iPad iPhone

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接