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

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

 2010-12-18 08:06:22 来源:WEB开发网   
核心提示:转自:http://hi.baidu.com/8843/blog/item/71f40823c4890c43935807ee.html有一个为 iPad 设计的用来查时区的 HTML5 软件 everytimezone.com 最近引起了一些注意,它简单、到位,用 HTML5 给 iPad,iPhone 打造速度超快的

转自:http://hi.baidu.com/8843/blog/item/71f40823c4890c43935807ee.html

有一个为 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’);

1 2 3  下一页

Tags:HTML iPad iPhone

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

    热点阅读
      焦点图片
        最新推荐
          精彩阅读