第1章   引言

 

1.1 改版目的

为了配合DNF第五章新版本上线，并改善DNF官网的用户体验和功能，DNF开始了新的官网改版行动。

本次改版主要优化了页面结构布局，增加一些新功能和新板块，提高页面加载速度，改善用户的细节操作体验，为用户带来新的视觉感受。

更加华丽的介绍，请参见http://games.enet.com.cn/article/A1120100126050.html

1.2 官网主要调整

本次官网改版，主要有以下四个方面的调整。

首页增加赛事信息板块：随着DNF赛事的日益增多，为了方便玩家了解查询当年的各项比赛事宜，在官网显著位置添加了赛事信息板块。

首页增强游戏资料板块：为了新手用户更快的了解游戏，增加了游戏资料板块内的分类，增加了各种快速通道链接。

壁纸页面增加按日期排序的列表：旧版壁纸的浏览方式无法适应日益增多的壁纸，所以修改为将壁纸的预览图按月进行排序显示，每页显示5个月，列表顶部为最新三张壁纸的大图预览。

下载页面增加补丁搜索功能：方便那些知道自己客户端版本的用户更快的找到需要下载的游戏补丁，支持搜索框输入提示。

新闻列表页增加页卡：为了方便用户在新闻列表页对不同类别的新闻进行切换，增加了页卡功能，用户能更加容易的查看某个类别的新闻。

第2章   为何加载速度不够理想

 

2.1 疯狂的HTTP请求

2.1.1 什么是HTTP请求

HTTP请求是从客户端到服务器端的请求消息包括，消息首行中，对资源的请求方法、资源的标识符及使用的协议。我们打开网页，网页加载图片、FLASH、JS脚本、CSS文件都会产生HTTP请求。

2.1.2 过多的HTTP请求会影响啥

HTTP1.1规范建议浏览器从每个主机名并行下载两个文件，每个文件都会经历连接、排队、等待响应以及接受数据的过程。

图2-1 HTTP请求情况

通过上图会发现，请求文件的时间很大一部分消耗在了排队和等待响应上，真正下载的时间是很小一部分，减少请求的数量就能减少响应时间。

所以，HTTP请求数量过多，会严重影响页面的加载速度。尤其是JS文件请求，会阻塞其后面内容的呈现，同时会阻塞对其后面文件的下载，直到脚本加载完毕。

2.2 夸张的下载量

2.2.1 华丽的群图

对于游戏网站，华丽而风骚的设计产生最直接的结果是大量的CSS背景图和庞大的下载量，在下载这些图片的同时影响了页面的加载速度。

另外对于官网大量的广告图片，不仅产生大量HTTP请求，而且下载量也是不可小视的。直接加载广告图片会导致页面加载缓慢。

减小图片的体积可以减少接收图片的时间。

2.2.2 冗余的代码

重复的JS和CSS代码，复杂的HTML结构，多余的空格、制表符、换行符、注释等等，都增加了文件的体积，影响了下载的速度。 

第3章   我们该怎么办

 

3.1 给他们找个家

零碎的各种小文件（包括CSS图片、CSS或JS文件等）会大大的增加HTTP请求的数量，我们需要用各种方法整合这些小文件，以减少HTTP请求数，也方便我们以后的维护工作。

3.1.1 CSS Sprites

尽量将各种CSS背景小图片整合到一张大图里以减少这部分所产生的HTTP请求。整合图片里的零碎图片尽量无缝排列，以减少问价大小，同时，图片采用不同的排列方式，得到的大小是不一样的。

3.1.2 整合CSS和JS文件

将公用的函数或者CSS进行整合，尽量保证公用的CSS文件和JS文件各为一个，以减少HTTP请求。页面私有的CSS或者JS代码，直接写入页面，无需采用外联的形式。

3.2 再等一会儿，你就上场了

3.2.1 为何要延迟加载

对于不是非要在加载前执行的CSS效果、JS文件，如页面修饰图片、广告JS函数、统计JS函数等等。在不影响用户浏览和SEO的情况下，我们可以对其进行延迟加载，以提高用户加载页面的速度以及健康度。

对于CSS图片，由于是游戏官网，设计师通常会采用各种图片修饰页面，渲染效果，导致页面元素会有大量背景图片，进而CSS图片体积庞大，影响加载速度。我们可以先对不是首屏的元素设置背景颜色，对背景图片进行延迟加载，在不影响第一时间浏览网页的情况下，提高页面加载速度。

对于JS，由于其本身不利于SEO，且大多JS实现的功能不是用户第一时间需要的，如统计函数、健康度函数等等，所以可以进行延迟加载。另外广告JS延迟加载是因为广告图片数量庞大，产生大量HTTP请求和下载量，导致页面加载速度受到很大影响，需要无条件延迟加载。

3.2.2 延迟加载的方法

需要两个函数，一个用于动态生成JS和CSS，一个用于延迟执行函数。对于要在JS加载后执行函数的情况，需增加一个函数，用于判断JS是否加载完毕。

对于判断JS是否加载完毕的函数，首先判断浏览器是否为IE，如果是IE，判断文件的readyState值是否为loading，如果是，等待文件加载状态改变，如果不是，则表明文件加载完毕，执行函数；对于非IE浏览器，直接使用onload属性，当文件加载完毕时，执行函数。调用方法为：loadjs(JS文件URL,加载后执行的函数名,函数的变量)。

图3-1判断加载是否完成

对于动态生成JS和CSS的函数，主要是使用createElement建立标签元素，然后使用setAttribute建立元素的属性，然后把需要动态加载的文件地址赋给src或者href属性。调用方法为：delay_js(“文件URL”)。

图3-2动态生成JS或者CSS

对于延迟执行函数，首先判断body标签的onload属性是否为空，如果为空直接把要延迟执行的函数名赋给此属性，如果非空，用变量记录属性值，然后将要延迟执行的函数名加进去，再将此变量赋给此属性。调用方法为：addload(函数名)。

图3-3函数延迟执行

3.3 还有几点得留意

3.3.1 减少body标签前的HTTP请求

在body标签前的HTTP请求会影响页面正文的加载，尤其是JS文件的请求会阻塞其后面内容的呈现，同时会阻塞对其后面文件的下载，直到脚本加载完毕。所以，应当尽量避免body标签前产生请求。

首先是公用CSS使用include文件代替（下节会提及）；另外就是所有的JS脚本都放在页面底部。

3.3.2 使用include文件

所有页面采用.shtml扩展名，方便使用include，以代替iframe、公用模块JS（如导航）以及不需要延迟加载的外联文件（如公用CSS），减少HTTP请求的同时，优化了SEO。当然这只是把客户端的请求转移到了服务器，在一定程度上增加了服务器的负载。

3.3.3 控制图片和代码的体积

控制图片质量，以减少图片的大小，尤其注意提醒产品，对于广告一定要压缩图片，以免出现100多K的广告图片。

各类代码可以进行精简，删除不必要的空格、制表符、换行符和注释；控制CSS类名和JS函数名、变量名的长度，在不影响以后维护的情况下，尽量短；删除重复的CSS类和JS函数；include文件只保留最基本的结构代码，多余的代码全部删除；优化HTML，去除无用标签，减少标签嵌套。

第4章   看看整容后的效果

 

4.1 网站浏览概况

4.1.1 不太完美的邂逅

在浏览器没有缓存的情况下，用户在第一眼看到页面时，只能看到页面的文字内容和第一屏的图片，看不到顶部大背景，以及第二屏以后的背景图。

页面加载速度有很大提升，在网络正常的状态下，第一次加载整个页面，可以在3秒左右达到最终呈现效果。

4.1.2 再次访问

对于有缓存的状态，页面加载速度会更快些。顶部大图很快就能出线，不会影响用户浏览页面。根据统计，页面大概加载时间在2秒左右。

4.2 评测结果

4.2.1 健康度

健康度是测试页面加载时间的一个指标，我截取了从页面正式发布后5天的情况，3秒健康度稳定在88%左右。

图4-1 健康度统计

4.2.2 Yslow插件

Yslow是网页性能测试的一个Firefox插件，用其对首页进行测试，得分在80-90之间。

图4-2 Yslow评分结果

第5章   由首页看手术过程

 

5.1 先想想，分析一下旧版

5.1.1 旧版首页产生的HTTP请求

旧版DNF官网首页会产生的HTTP请求包括页面本身、各类图片、JS外联文件、CSS外联文件、Flash、iFrame、iFrame页面片中的各类请求等等。其中：

各类图片包含：CSS图片、页面展示图片以及广告图片；

JS外联文件包含：健康度JS、广告JS（此JS又会生成另外两个JS）、ping统计JS、顶部通用条JS、各类公用JS（包含导航、脚标、公用函数集合等）、iFrame中的各类JS。

iFrame包含广告页面片、各类新闻页面片、第三方页面片。

5.1.2 HTTP请求分析

HTTP请求可进行如下优化：尽量减少HTTP请求，去掉不必要的请求；先处理重要的HTTP请求，延迟处理其他请求。对于旧版首页产生的HTTP请求：

健康度JS、广告JS中生成的qqgg_comm.js文件、顶部通用条JS、CSS外联文件、部分公用JS（包含导航、脚标等）、iFrame、部分CSS图片、部分JS文件属于不必要的HTTP请求，可以通过各种方法消除这类请求；

Flash、页面展示图片、部分CSS图片（非首屏图片、顶部大背景图和修饰性的图片）、广告JS中生成的Info_new_XX.js文件、ping统计JS、共用函数集合JS文件、广告图片属于可以延迟处理的HTTP请求，可以进行延迟加载。

5.1.3 旧版首页多余的字节

对首页内的各种图片、代码、Flash都有可以压缩的余地，尽量减少这些文件的大小，避免不必要的下载量。分析各个文件，可以进行以下处理：

官网首页含有大量广告图片，时刻提醒产品在发布广告前，对广告图片进行品质压缩，在不影响广告体验感的情况下尽量保持图片体积最小，一般小型广告图片可以在10KB以下，大广告可以在20KB以下。

各类代码可以进行精简，方法前面有详情，这儿不再复述。需要说明的是，首页精简后，节省了15KB以上。所以，这一步同样很重要。

5.2 先拿CSS背景图开刀

5.2.1 新版首页包含的CSS背景图

首页除了广告图片所在的区域，其他板块均含有CSS背景图，几乎没有以纯色做背景的板块。这是游戏官网都具有的特点，所有的板块均需要大量的修饰，以营造设计风格和增强视觉体验。

所有板块标题使用微软雅黑，并进行了渐变色彩处理；板块内容列表区域均含有一个发光效果的背景，如果板块有页卡，背景将随页卡的切换而拥有不同的发光点；首页顶部含有大背景图；其他还有一些零碎的背景图，包括脚标商标图、导航icon图、右上角手动广告图等。

5.2.2 处理背景图

使用CSS Sprites对背景图进行组合。但由于零碎背景图数目众多，全部整合到一个图片里，会导致图片体积过于庞大，所以要对背景图进行分类。

图5-1左：质感图片，右：首屏以及公用图片，中：其它图片

我将所有首页零碎图片分为3类：质感图片、首屏以及公用图片、其他图片。按照此分类，生成3张CSS Sprites背景图。

为保证细节图片相对细腻，三张CSS Sprites图片以品质90输出，大小分别是：质感图片25KB，首屏以及公用图片30KB，其他图片68KB；顶部大背景采用品质80输出，大小为105KB；右上角手动广告图采用256色PNG8输出，因为含有透明背景，大小是28KB；顶部通用条背景是所有腾讯游戏站公用的，采用256色PNG8输出，大小为29KB。

5.2.3 优化背景图呈现

整个首页含有6个背景图，加起来总共为285KB，体积庞大，如果直接加载所有这些图片，会严重影响页面的加载速度，增加用户等待的时间。因此，可以考虑优先加载相对重要的图片，延迟加载其他图片。

所以，页面对首屏首屏以及公用图片直接加载，其他图片延迟加载。这样，用户可以在第一眼看到首屏板块的背景图，首屏以下的背景图延迟加载，不会影响大部分用户的浏览。另外，顶部大背景延迟加载，是由于此背景图过于庞大，严重影响页面加载速度，因此考虑将其延迟加载。

背景图延迟加载的方法是，将所有需要延迟的背景图的CSS代码写入一个单独的CSS文件里，通过JS延迟加载这个CSS文件。

注意，如果一个元素的CSS背景图片要延迟加载，需确保其本身或者父级元素有设置背景颜色，也就是比如在首页的内置CSS写：.box{background:#000000;}，在单独的CSS文件里写：.box{background:#000000 url(…) no-repeat;}。否则页面加载初期可能造成其文字与背景对比度不够，影响阅读。

5.3 我有Include偏执

5.3.1 为何使用Include

有利于SEO。生成静态内容的共用JS（如导航、脚标等），或者iFrame页面片虽然可以使代码的重复利用，但会严重影响SEO。Include的文件是在服务器端执行的，搜索引擎不知道文件是Include的，所以对搜索引擎并没有影响。

更少的代码。生成静态内容的共用JS会含有document.write等语句，而iFrame页面片含有<html>等完整的页面结构代码。使用Include可以将这些多余的代码去掉，而剩下最精简的结构，减少文件的体积。

更少的HTTP请求。生成静态内容的共用JS（如导航、脚标等），或者iFrame页面片均会产生HTTP请求，而Include的文件是在服务器端执行的，不会产生HTTP请求。

5.3.2 开始Include

Include代码需要主静态页面采用.shtml文件格式，所以首先是主页面文件使用这种扩展名。对于Include文件，按照微软的倡议，采用.inc文件格式。

图5-2 首页使用到的Include文件

对于DNF首页，公用CSS、脚标、头部内容、左侧导航、顶部通用条均是Include文件。另外，首页上的所有新闻列表都采用Include页面片。

页面片要进行精简，多余结构要全部删除。例如新闻页面片的结构如下<ul><li><a target=”_blank” href=”http://dnf.qq.com/act/a20100224zbsc/zbsc.shtml”>周边商城开春好礼大派送</a></li>…</ul>（这里省略了新闻时间）。

5.4 修补JS函数

5.4.1 首页需要的JS以及使用原则

首页涉及到JS使用的地方包括：URL判断生成顶部大背景、新闻板块需要页卡切换功能、轮播广告和单帧广告、Flash延迟加载、健康度统计、ping统计、问问跳转、合作伙伴下拉菜单、第一条新闻判断。

尽量避免页面内容前出现任何形式的JS，也就是将JS放在页面最后。因为JS会阻塞其后面内容的呈现，同时会阻塞对其后面文件的下载，直到脚本加载完毕。所以，DNF首页除了健康度的代码需要放在顶部以外，其他的代码均可以放在页面的最后。

删除函数内多余的空格、换行符和制表符；不影响以后维护的情况下，变量名尽量的简短；只保留函数之间的换行符。

延迟执行或加载所有JS。因为生成静态内容的JS全部使用Include代替了，所以剩下JS均可延迟加载或执行。方法前面有详述。

5.4.2 URL判断执行函数

页面大部分函数是根据URL判断来执行的，函数根据不同的URL来执行相应的函数。函数如下：

function run(){var url=window.location.href.split(“/”),file=url[url.length-1],u=”http://game.qq.com/time/qqgg/Info_new_13.js?ran=”+Math.random(),ping_url=”http://pingjs.qq.com/ping.js”;if(file.indexOf(“index.shtml”)==0||file.indexOf(“?”)==0||file==”"){wp(“wp_i”);loadjs(u,gg,[[1177,"gg"]]);loadjs(ping_url,pings,”dnf_index”);}else{wp(“wp_w”);dl();if(file.indexOf(“main.shtml”)==0){loadjs(u,gg,[[1160,1161,1162,"swaps"],[1165,"ggs1"],[1166,"ggs2"],[1167,"ggs3"],[1168,"ggs4"],[1173,"ggs5"],[1174,"ggs6"],[1169,"mt1"],[1170,"mt2"],[1171,"mt3"],[1172,"mt4"]]);loadjs(ping_url,pings,”dnf_main”);}else{loadjs(u,gg,[[1175,"sgs1"],[1176,"sgs2"]]);if(file.indexOf(“down.shtml”)==0) loadjs(ping_url,pings,”dnf_down”);else loadjs(ping_url,pings,”normal”);};}title();}run();

5.4.3 URL判断生成顶部大背景

由于官网引导页和其他页面的顶部大背景不相同，为了方便以后的维护，将这两种大背景的CSS样式都写到公用CSS文件中，并通过JS判断URL，给与不用的CSS类名，达到生成目的。函数如下：

function wp(c){var wp=document.getElementById(“wrapper”);wp.className=c;};

其中，变量“c”由URL判断函数给出，作为顶部大背景的类名给与页面结构的外框。

5.4.4 新闻板块需要页卡切换功能

由于板块内容列表区域均含有一个发光效果的背景，如果板块有页卡，背景将随页卡的切换而拥有不同的发光点，所以，当页卡进行切换时，内容列表区外框标签的CSS同时需要切换。函数如下：

function swap(elem){var area=document.getElementById(elem),lnks=area.getElementsByTagName(“a”),divs=area.getElementsByTagName(“div”),cnt=[],swaps=[],old=0,nm=elem.slice(0,1);for(var i=0,x=0;i<divs.length;i++){if(divs[i].id){cnt[x]=divs[i];x++;}}for(i=0;i<cnt.length;i++){swaps[i]=lnks[i];swaps[i].cnt=i;swaps[i].onmouseover=function(){area.id=nm+(this.cnt+1);var cls=cnt[old].className;cnt[old].className=”hidden”;cnt[this.cnt].className=cls;old=this.cnt;};swaps[i].onclick=function(){return false;}}};

其中，变量“elem”是该新闻区域的id名。

5.4.5 轮播广告和单帧广告

之前广告JS文件是外联形式，而此文件里的函数只是另外动态加载两个JS文件（Info_new_13.js和qqgg_comm.js），这样造成了3个HTTP请求。

其中qqgg_comm.js里的函数是生成广告的，可以写入公用JS文件中，可以节省一个HTTP请求；Info_new_13.js里是DNF相关的广告信息（包括广告ID、图片地址、链接地址等），这个文件由于体积相对庞大，需要延迟加载。

重新编写了生成广告的函数（DNF公用JS文件中的gg(ids)函数），将所有涉及到广告生成的函数进行整合和修改，现在只需要调用新的广告生成函数，向里面传递广告id数组和插入广告的结构元素id即可。需要说明的是，新函数仅属用于页面内只含有一个轮播广告的情况，且支持非连续id的广告进行轮播显示。

广告函数的生成依赖于Info_new_13.js的加载完成，因为广告生成函数需要调用DNF相关的广告信息，所以需要Info_new_13.js加载完成后，在执行广告生成的函数。执行方式如下：

loadjs(u,gg,[[1160,1161,1162,"swaps"],[1165,"ggs1"],[1166,"ggs2"],[1167,"ggs3"],[1168,"ggs4"],[1173,"ggs5"],[1174,"ggs6"],[1169,"mt1"],[1170,"mt2"],[1171,"mt3"],[1172,"mt4"]]);

其中，变量“u”就是Info_new_13.js的URL；数组的写法是：[[轮播id1,轮播id2,…,"插入广告的元素id1"],[单帧id1,"插入广告的元素id2"],…]

5.4.6 ping统计

对于ping统计函数，执行方式和广告函数类似，需要ping.js文件加载完毕后，再执行统计函数。

由于官网页面统计函数中的spreadPathTag变量有不同的值，所以需要根据URL判断页面，然后给与不同的变量值。函数如下：

function pings(tag){if(typeof(pgvMain)==”function”){if(tag==”normal”) pgvMain();else pgvMain(“pathtrace”,{pathStart:true,spreadPathTag:tag,tagParamName:”ADTAG”,useRefUrl:true,override:true,careSameDomainRef:false,spQueueLen:1});}};

调用方式为：loadjs(ping_url,pings,”dnf_index”);

5.4.7 其他函数

另外，Flash延迟加载、健康度统计、问问跳转、合作伙伴下拉菜单、第一条新闻判断等函数，实现较为简单。

Flash延迟加载函数如下：

function dl(){var dl=document.getElementById(“dl”),size=’width=”200″ height=”100″‘,doc=’http://dnf.qq.com/web201001/swf/dnf.swf’;var swf=’<object codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ ‘+size+’><param value=”‘+doc+’” /><param value=”high” /><embed pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” src=”‘+doc+’” ‘+size+’ /></object>’;dl.innerHTML=swf;}

健康度函数是将cdn_speed.js里的函数直接放在页面里面，以减少一个HTTP请求。这个函数只能放在页面顶部。

问问跳转去掉yk.js，以减少一个HTTP请求，将里面redirect(q_ttl);函数写入页面，其他函数未发现页面调用，可以去掉。

合作伙伴下拉菜单函数如下：

function corp(){var corp=document.getElementById(“corp”);var corp_h2=corp.getElementsByTagName(“h2″)[0],corp_list=corp.getElementsByTagName(“ul”)[0];corp_h2.onmouseover=corp_list.onmouseover=function(){corp_list.style.display=”block”;};corp_h2.onmouseout=corp_list.onmouseout=function(){corp_list.style.display=”none”;};};

第一条新闻判断函数用于将页面顶部新闻的第一条赋予单独的样式，如下：

function top_news(){document.getElementById(“news”).getElementsByTagName(“li”)[0].className=”top_news”;document.getElementById(“bulletin”).getElementsByTagName(“li”)[0].className=”top_news”;};

结束语

 

与首页一样，其他页面的重构方式相同。最主要的就是尽量减少HTTP请求，缩小各种文件的体积。很多Include和JS文件可以直接使用，需要注意的就是CSS背景图如何整合，直接加载重要的，延迟加载不重要的。

这次DNF官网改版，在减少HTTP请求数和追求更高的健康度上，可能部分方法相对极端，更好的方法有待深入研究。希望此文档能在今后各个产品的官网改版上帮助到各位同学。