有一个为 iPad 设计的用来查时区的 HTML5 软件 everytimezone.com 最近引起了一些注意。它简单、到位,可以离线使用,并且速度极快。由于 HTML5 软件本质上只是一个网页,故不需要通过苹果的 App Store 商店发行,用户只要用 iPad 访问 everytimezone.com,然后将书签存到桌面,下一次打开就变成了一个与原生软件几乎无异的东西。everytimezone.com 的作者托马斯·富赫是资深 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 gradient
var 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 上用来会有点延迟。在 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); }
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 上的速度进行优化的好例子。)
分享到:
相关推荐
iphone或ipad录屏软件超级好用,目前用过最好用的软件。
IPAD 计算器 IPAD HD 软件 越狱后使用
ipad软件许可协议
ipad软件编程程序
安卓系统 超高仿iPad桌面
html模拟ipad界面效果,界面炫丽
利用插件一键快速降级iPhone5iPad234mini降级8.4.1教程
最好用的IPHONE,IPAD投屏软件,屏幕共享软件,投屏速度快,不卡顿
新版IPAD软件设置说明新版IPAD软件设置说明
苹果 ip ipad 越狱软件 傻瓜模式谁用谁知道!!
IPAD、IPAD2等用usb连接电脑,进行充电。解决了IPAD充电问题,出差在外又可以少带一个充电器了。
iPad Air(iPad5)可以打电话吗?iPad Air(iPad5)支持移动卡吗?.docx
ipad越狱之后,用ifunbox安装软件灰常灰常简单。
方便快捷同步歌曲、视频、软件,比91助手和同步推更快更好的软件(歌曲、视频、软件一拖到iTools里面就直接同步到iphone/ipad上非常方便)
ipad图标制作软件 欢迎下载
iPad 一代 电话软件,需要的朋友可以下载 .......谢谢
仿 iPad ,里面有两个例子
iPad软件安装及上网设置,用一台安装windows操作系统的电脑上网,并在苹果的官方网站下载iTunes软件,并安装。
我们致力于提供领先优质的软件项目开发服务,公司在海内外有丰富的案例,我们有开发经验丰富的强大技术团队,擅长iOS,MAC,DotNET,Android,Unity...iOS软件开发 iOS软件外包 iPhone开发 iPad开发 html5开发 android开发
ipad1平板刷机越狱软件.本人刷机常用的软件,多次实验,每次都成功,希望觉得 好的朋友定下