用 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’);
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); }
- ››iPhone应用帮助残障儿童看图说话
- ››iPhone实用工具AppBox Pro使用教程大揭秘
- ››IPad/IPhone 开发中的布局问题
- ››iPad2和iPhone将为苹果明年带来丰收
- ››iphone4省电方法
- ››iphone 获取地址的详细信息
- ››iPhone 库的基本内存管理策略
- ››iPhone加密文字亲手做 私密信息有保障
- ››iphone 根据经纬度坐标取详细地址(包括国,省,市...
- ››iphone/ipad ios cocoa object-c 近期苹果UI部分小...
- ››iphone中如何进行多线程编程
- ››iPhone OS SDK的这些事[安装、下载、版本、实例、...
更多精彩
赞助商链接