当前位置:主页 > 网页教程 > 网站推广 > 网站优化 > 内容欢迎大家投稿

LOL官网采用HTML5减少页面加载量的方法(2)

时间:2011-04-21 17:56来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

》 页卡内容按需加载

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

触发加载页卡内容

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

》 多平台兼容

平台兼容问题其实说到底,还是浏览器的兼容问题。在PC平台,我们要兼容N多浏览器,在移动平台同样如此。更恐怖的是,移动平台的浏览器种类和复杂度远远大于PC平台。

所以LOL官网的多平台兼容也只针对移动平台中的现代浏览器。

》 苹果平台

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占用率,兼容更多的移动平台等等。希望此文档能在今后各个产品的官网改版上帮助到各位同学。

(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接