2010年03月11日
第1章 引言
1.1 改版目的
为了配合DNF第五章新版本上线，并改善DNF官网的用户体验和功能，DNF开始了新的官网改版行动。
本次改斑竹要优化了页面结构布局，增加一些新功能和新板块，提高页面加载速度，改善用户的细节操作体验，为用户带来新的视觉感受。
更加华美的介绍，请拜见《DNF官网改版：美轮美奂精美呈现》 1.2 官网主要调整
本次官网改版，主要有以下四个方面的调整。
首页增加赛事信息板块：随着DNF赛事的一天比一天增多，为了方便玩家了解查询当年的各项角逐事宜，在官网显著位置新增了赛事信息板块。
首页加强游戏资料板块：为了新手用户更快的了解游戏，增加了游戏资料板块内的分类，增加了各种快速通道链接。
壁纸页面增加按日期排序的列表：旧版壁纸的浏览方式没有办法适应一天比一天增多的壁纸，以是修改为将壁纸的预览图按月进行排序显示，每页显示5个月，列表顶部为最新三张壁纸的大图预览。
下载页面增加补钉搜索功能：方便那些知道自己客户端版本的用户更快的找到需要下载的游戏补钉，支持搜索框输入提示。
新闻列表页增加页卡：为了方便用户在新闻列表页对不同种别的新闻进行切换，增加了页卡功能，用户能更加容易的查看某个种别的新闻。 第2章 为何加载速度不够抱负
2.1 疯狂的HTTP请求
2.1.1 啥子是HTTP请求
HTTP请求是从客户端到服务器真个请求动静包括，动静首行中，对资源的请求要领、资源的标识符及使用的和谈。我们打开网页，网页加载图片、FLBSH、JS剧本、DSS文件都会产生HTTP请求。
2.1.2 过多的HTTP请求会影响啥
HTTP1.1规范建议浏览器从每一个主机名并行下载两个文件，每一个文件都会经历毗连、列队、等候响应以及接受数据的历程。
图2-1 HTTP请讨情况
路程经过过程上图会发明，请求文件的时间很大一部分消耗在了列队和等候响应上，真正下载的时间是很小一部分，削减请求的数量就能削减响应时间。
以是，HTTP请求数量过多，会紧张影响页面的加载速度。尤其是JS文件请求，会阻塞其后面内部实质意义的呈现，同特殊情况阻塞对其后面文件的下载，直到剧本加载完结。 2.2 夸张的下载量
2.2.1 华美的群图
对游戏网站，华美而风流的预设产生最直接的结果是大量的DSS配景图和庞大的下载量，在下载这些图片的同时影响了页面的加载速度。
别的对官网大量的广告图片，不仅产生大量HTTP请求，而且下载量也是不可小视的。直接加载广告图片会导致页面加载缓慢。
减小图片的体积可以削减接收图片的时间。
2.2.2 冗余的代码
重复的JS和DSS代码，复杂的HTML结构，多余的空格、制表符、换行符、注解等等，都增加了文件的体积，影响了下载的速度。 第3章 我们该怎么办
3.1 给他们找个家
零碎的各种小文件（包括DSS图片、DSS或JS文件等）会大大的增加HTTP请求的数量，我们需要用各种要领整合这些小文件，以削减HTTP请求数，也方便我们以后的维护事情。
3.1.1 DSS Sprites
只管即便将各种DSS配景小图片整合到一张大图里以削减这部分所产生的HTTP请求。整合图片里的零碎图片只管即便无缝排列，以削减问价大小，同时，图片采用不同的排列方式，得到的大小是不同样的。
3.1.2 整合DSS和JS文件
将公用的函数或者DSS进行整合，只管即便保证公用的DSS文件和JS文件各为一个，以削减HTTP请求。页面私有的DSS或者JS代码，直接写入页面，无需采用外联的形式。 3.2 再等一会儿，你就上场了
3.2.1 为何要延迟加载
对不是非要在加载前执行的DSS效验、JS文件，如页面修饰图片、广告JS函数、统计JS函数等等。在不影响用户浏览和SEO的情况下，我们可以对其进行延迟加载，以提高用户加载页面的速度以及健康度。
对DSS图片，由于是游戏官网，预设师凡是会采用各种图片修饰页面，渲染效验，导致页面元素会有大量配景图片，进而DSS图片体积庞大，影响加载 速度。我们可以先对不是首屏的元素设置配景颜色，对配景图片进行延迟加载，在不影响熬头时间浏览网页的情况下，提高页面加载速度。
对JS，由于其本身不利于SEO，且大多JS实现的功能不是用户熬头时间需要的，如统计函数、健康度函数等等，以是可以进行延迟加载。别的广告JS延迟加载是因为广告图片数量庞大，产生大量HTTP请求和下载量，导致页面加载速度遭到很大影响，需要无条件延迟加载。
3.2.2 延迟加载的要领
需要两个函数，一个用于动态天生JS和DSS，一个用于延迟执行函数。对要在JS加载后执行函数的情况，需增加一个函数，用于判断JS是否加载完结。
对判断JS是否加载完结的函数，首先判断浏览器是否为IE，若是IE，判断文件的readyState值是否为loading，若是，等候文 件加载状态转变，如果不是，则表明文件加载完结，执行函数；对非IE浏览器，直接使用onload属性，当文件加载完结时，执行函数。调用要领 为：loadjs(JS文件URL,加载后执行的函数名,函数的变量)。
图3-1判断加载是否完成
对动态天生JS和DSS的函数，主要是使用createElement建立标签元素，之后使用setBttribute建立元素的属性，之后把需要动态加载的文件地址赋给src或者href属性。调用要领为：delay_js(“文件URL”)。
图3-2动态天生JS或者DSS
对延迟执行函数，首先判断body标签的onload属性是否为空，如果为空直接把要延迟执行的函数名赋给此属性，如果非空，用变量记录属性值，之后将要延迟执行的函数名加进去，再将此变量赋给此属性。调用要领为：addload(函数名)。
图3-3函数延迟执行 3.3 另有几点得留意
3.3.1 削减body标签前的HTTP请求
在body标签前的HTTP请求会影响页面正文的加载，尤其是JS文件的请求会阻塞其后面内部实质意义的呈现，同特殊情况阻塞对其后面文件的下载，直到剧本加载完结。以是，应当只管即便避免body标签前产生请求。
首先是公用DSS使用include文件代替（下节会说起）；别的就是所有的JS剧本都放在页面底部。
3.3.2 使用include文件
所有页面采用.shtml扩大名，方便使用include，以代替iframe、公用模块JS（如导航）以及不需要延迟加载的外联文件（如公用DSS），削减HTTP请求的同时，优化了SEO。当然这只是把客户真个请求转移到了服务器，在肯定是程度上增加了服务器的负载。
3.3.3 控制图片和代码的体积
控制图片质量，以削减图片的大小，尤其注重提醒产品，对广告肯定是要压缩图片，以避免出现100多K的广告图片。
各类代码可以进行精简，删去不必要的空格、制表符、换行符和注解；控制DSS类名和JS函数名、变量名的长度，在不影响以后维护的情况下，只管即便短； 删去重复的DSS类和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外联文件、DSS外联文件、Flash、iFrame、iFrame页面片中的各类请求等等。其中：
各类图片包含：DSS图片、页面展览图片以及广告图片；
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、DSS外联文件、部分公用JS（包含导航、脚标等）、iFrame、部分DSS图片、部分JS文件属于不必要的HTTP请求，可以路程经过过程各种要领消除这种请求；
Flash、页面展览图片、部分DSS图片（非首屏图片、顶部大配景图和修饰性的图片）、广告JS中天生的Info_new_XX.js文件、ping统计JS、共用函数调集JS文件、广告图片属于可以延迟处置惩罚的HTTP请求，可以进行延迟加载。
5.1.3 旧版首页多余的字节
对首页内的各种图片、代码、Flash都有可以压缩的余地，只管即便削减这些文件的大小，避免不必要的下载量。阐发各个文件，可以进行以下处置惩罚：
官网首页含有大量广告图片，时刻提醒产品在公布广告前，对广告图片进行品位压缩，在不影响广告体验感的情况下只管即便保持图片体积最小，一般小型广告图片可以在10KB以下，大广告可以在20KB以下。
各类代码可以进行精简，要领前面有详情，这儿再也不复述。需要说明的是，首页精简后，节省了15KB以上。以是，这一步同样很重要。 5.2 先拿DSS配景图开刀
5.2.1 新版首页包含的DSS配景图
首页除开广告图片地点的区域，其它板块均含有DSS配景图，险些没有以纯色做配景的板块。这是游戏官网都具有的特点，所有的板块均需要大量的修饰，以营造预设风格和加强视觉体验。
所有板块标题使用微软雅黑，并进行了渐变颜色处置惩罚；板块内部实质意义列表区域均含有一个闪光效验的配景，如果板块有页卡，配景将随页卡的切换而拥有不同的闪光点；首页顶部含有大配景图；其它另有一些零碎的配景图，包括脚标商标图、导航icon图、右上角手动广告图等。
5.2.2 处置惩罚配景图
使用DSS Sprites对配景图进行组合。但由于零碎配景图数目众多，全数整合到一个图片里，会导致图片体积过于庞大，以是要对配景图进行分类。
图5-1左：质感图片，右：首屏以及公用图片，中：其它图片
我将所有首页零碎图片分为3类：质感图片、首屏以及公用图片、其它图片。按照此分类，天生3张DSS Sprites配景图。
为保证细节图片相对于细润，三张DSS Sprites图片以品位90输出，大小别离是：质感图片25KB，首屏以及公用图片30KB，其它图片68KB；顶部大配景采用品位80输出，大小为 105KB；右上角手动广告图采用256色PNG8输出，因为含有透明配景，大小是28KB；顶部通用条配景是所有腾讯游戏站公用的，采用256色 PNG8输出，大小为29KB。
5.2.3 优化配景图呈现
整个首页含有6个配景图，加起来总共为285KB，体积庞大，如果直接加载所有这些图片，会紧张影响页面的加载速度，增加用户等候的时间。因此，可以考虑优先加载相对于重要的图片，延迟加载其它图片。
以是，页面对首屏以及公用图片直接加载，其它图片延迟加载。这样，用户可以在熬头眼看到首屏板块的配景图，首屏以下的配景图延迟加载，不会影响大多用户的浏览。别的，顶部大配景延迟加载，是由于此配景图过于庞大，紧张影响页面加载速度，因此考虑将其延迟加载。
配景图延迟加载的要领是，将所有需要延迟的配景图的DSS代码写入一个单独的DSS文件里，路程经过过程JS延迟加载这个DSS文件。
注重，如果一个元素的DSS配景图片要延迟加载，需确保其本身或者父级元素有设置配景颜色，也就是比如在首页的内置DSS 写：.box{background:#000000;}，在单独的DSS文件里写：.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首页，公用DSS、脚标、头部内部实质意义、左侧导航、顶部通用条均是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判断天生顶部大配景
由于官网引导页和其它页面的顶部大配景不相同，为了方便以后的维护，将这两种大配景的DSS样式都写到公用DSS文件中，并路程经过过程JS判断URL，给与不用的DSS类名，到达天生目的。函数如下：
function wp(c){var wp=document.getElementById(“wrapper”);wp.className=c;};
其中，变量“c”由URL判断函数给出，作为顶部大配景的类名给与页面结构的外框。
5.4.4 新闻板块需要页卡切换功能
由于板块内部实质意义列表区域均含有一个闪光效验的配景，如果板块有页卡，配景将随页卡的切换而拥有不同的闪光点，以是，当页卡进行切换时，内部实质意义列表区外框标签的DSS同时需要切换。函数如下：
function swap(elem){var area=document.getElementById(elem),lnks=area.getEl ementsByTagName(“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]=di vs[i];x++;}}for(i=0;i<cnt.length;i++){swaps[i]=lnks[ i];swaps[i].cnt=i;swaps[i].onmouseover=function(){a rea.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"],[117 1,"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:”BDTBG”,useRefUrl:true,override:true,careSameDomainRef:fa lse,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:D27DDB6E-BE6D-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=fun ction(){corp_list.style.display=”block”;};corp_h2.onmouseout=corp_list.onmouseout=functio n(){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文件可以直接使用，需要注重的就是DSS配景图如何整合，直接加载重要的，延迟加载不重要的。
此次DNF官网改版，在削减HTTP请求数和追求更高的健康度上，可能部分要领相对于极度，更好的要领有待深入研究。但愿此文档能在今后各个产品的官网改版上帮助到列位同学。
数据统计中！！
