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

首先，将图片的路径存储在img标签的一个非src属性中，LOL首页是存储在rel属性中的，此举是避免页面直接加载图片。然后使用JS的监听方法（IE是attachEvent，其他浏览器是addEventListener），监听页面的scroll事件。一旦页面滚动，就会执行一个编写的函数，来判断图片是否处于浏览器的当前一屏内，如果是，将rel属性内的地址赋值给src属性，如果不是，继续监听。当板块内的所有图片都被加载后，取消监听。LOL官网首页的活动板块和媒体合作板块均使用了这种技术，大大减少了页面的加载量。

以往轮播广告的加载模式是一次性全部加载，虽然采用延迟加载，但用户可能不会浏览到所有的轮播广告。当用户在首页只停留5秒时（LOL官网首页轮播广告设置的是5秒切换一次），第二张广告图片以后的图片加载就没有必要了。

LOL官网首页采用的方式是，第一次加载第一张广告图片，当5秒后，判断第二张图片是否加载过，如果没有，加载第二张图片，以此类推。这样，如果用户在首页停留时长只有14秒，那么就节省了第4、5张广告图片的下载量，大约有100K左右。

对于新闻页卡，以往的方式是使用include载入，并将看不到的页卡隐藏掉。但如果用户并没有切换到其他页卡，那么直接加载这些页卡的内容就是不必要的。

触发加载页卡内容

LOL官网首页页卡采用的方式是，只加载第一个可见页卡的内容。当用户点击切换页卡时，再加载对应页卡的内容。包括导航和荣誉墙这两个部分，虽然是从本地加载数据，但也是用户触发后才插入到相应结构的。这样不仅减少了一定的下载量，也减少了一部分浏览器的渲染工作。

平台兼容问题其实说到底，还是浏览器的兼容问题。在PC平台，我们要兼容N多浏览器，在移动平台同样如此。更恐怖的是，移动平台的浏览器种类和复杂度远远大于PC平台。
所以LOL官网的多平台兼容也只针对移动平台中的现代浏览器。

iPad下的引导页

对于iPad和iPhone，主要问题是其不支持Flash。LOL官网有两处，一是引导页的视频，二是首页的下载按钮。实现起来很简单，使用JS判断浏览器信息（navigator.userAgent），如果是iPad和iPhone，使用HTML5视频技术替换引导页的Flash播放器，屏蔽首页的Flash下载按钮的插入，保持其为一个a标签的链接。具体方法请参见我在御龙在天官网改版时的文档《御龙在天的iPad之路》。

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

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

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

首页的整合图片

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

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

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

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

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!