HTML5本地存储和内容按需加载的思路和方法(3)

》 苹果平台

iPad下的引导页

对于iPad和iPhone，主要问题是其不支持Flash。LOL官网有两处，一是引导页的视频，二是首页的下载按钮。实现起来很简单，使用JS判断浏览器信息（navigator.userAgent），如果是iPad和iPhone，使用HTML5视频技术替换引导页的Flash播放器，屏蔽首页的Flash下载按钮的插入，保持其为一个a标签的链接。

》 谷歌平台

对于Android系统的手机和平板电脑，并不需要做任何多余的事情，只要你的页面符合标准，因为Android手机本身就支持Flash，经过我的测试，LOL官网在HTC Desire下的浏览完全正常。

》 一些小技巧

》 更快的数据解析方式

我们通常使用json或者XML的方式来存储大量数据。《高性能Javascript》一书中介绍了一种自定义格式，并测试出自定义格式是解析最快的。其方法是使用符号来间隔数据，比如var test=”1,2,3,4”，然后使用spit(“,”)来方法来获取各个数据。LOL官网就是用这种方式在本地存储的数据。

》 CSS Sprites

为了减少请求，LOL官网将每个页面的小图片都整合到其各自的一张大图片中，首页更是BT，整合图片有90K。

首页的整合图片

》 MP4文件大小控制

针对苹果移动平台设备输出的MP4文件需要控制大小，文件太大会造成浏览时很卡的感觉。毕竟移动平台设备的CPU还是不能和PC相比的。LOL引导页的MP4文件就从最开始的10M压缩到了6M。

》 函数执行

LOL官网使用了大量的JS，尤其是首页。如果一次性执行大量函数，会造成CPU暂用率很高，页面很卡的情况。因此，LOL官网使用了一个函数来间隔执行这些函数。在页面加载完成时，先一次性执行必须马上使用的几个函数，然后以100毫秒为间隔，根据重要程度挨个执行剩下的函数，以减轻CPU的负载。经过对比，采用这种方式后，LOL官网首页虽然JS使用比DNF官网首页多很多，但加载时的CPU占用率比DNF还低5%左右。

》 CSS选择符

我们在编写CSS时，会有很多的选择符，但不同的写法，页面在渲染时的效率是不一样的。根据匹配规则，浏览器会从右至左匹配对应的元素。比如.header li a{}，在渲染时，浏览器会先遍历页面内所有的a标签，再遍历这些a标签谁在li标签内，然后再去找他们谁在.header下，这样效率其实很低，而且开销很大。其实我们可以对这些a标签直接写个类名.header_lnk{}，这样浏览器渲染时一下子就可以找到，避免再去翻箱倒柜。另外.header .header_lnk{}也是没有必要的，直接写.header_lnk{}效率更高，我们为什么还要浏览器多过滤一次呢？

》 结束语

当然，减少HTTP请求，使用延迟加载等等这些方法也是必不可少的，官网的优化永无止尽，其实这次改版后的页面还有很多地方可以优化。比如减少页面的初期渲染量，优化JS以进一步减小CPU占用率，兼容更多的移动平台等等。希望此文档能在今后各个产品的官网改版上帮助到各位同学。

文章来源：http://tgideas.qq.com/?p=2875