2010年03月11日
原文地址：http://www.tgideas.com/?p=887
第1章 弁言
1.1 改版目的
为了配合DNF第五章新版本上线，并改善DNF官网的用户体验认识和功能，DNF起头了新的官网改版行动。
本次改版首要优化了页面布局布局，增长一些新功能和新板块，提高页面加载速率，改善用户的细节操作体验认识，为用户带来新的视物感觉感受。
越发华丽的先容，请参见http://games.enet.com.cn/article/B1120100126050.ht ml 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文件各为1个，以减少HTTP哀求。页面私有的DSS或者JS代码，直接写入页面，无须采用外联的形式。 3.2 再等一会儿，你就上场了
3.2.1 为什么要延迟加载
对不久短要在加载前执行的DSS效果、JS文件，如页面修饰图片、广告JS函数、计数JS函数等等。在不影响用户浏览和SEO的环境下，我们可以对其进行延迟加载，以提高用户加载页面的速率和健康度。
对DSS图片，因为是游戏官网，预设师凡是会采用各种图片修饰页面，渲染效果，引起页面元素会有大量背景图片，进而DSS图片体积复杂，影响加载 速率。我们可以先对不是首屏的元素配置背景颜色，对背景图片进行延迟加载，在不影响熬头时间浏览网页的环境下，提高页面加载速率。
对JS，因为其本身无益于SEO，且大多JS实现的功能不是用户熬头时间需要的，如计数函数、健康度函数等等，以是可以进行延迟加载。别的广告JS延迟加载是因为广告图片数量复杂，孕育发生大量HTTP请乞降下载量，引起页面加载速率遭到很大影响，需要无条件延迟加载。
3.2.2 延迟加载的方法
需要两个函数，1个用于动态天生JS和DSS，1个用于延迟执行函数。对要在JS加载后执行函数的环境，需增长1个函数，用于判断JS是不是加载完结。
对判断JS是不是加载完结的函数，起首判断浏览器是不是为IE，如果是IE，判断文件的readyState值是不是为loading，如果是，等待文 件加载状况改变，如果不是，则表白话文件加载完结，执行函数；对非IE浏览器，直接施用onload属性，当文件加载完结时，执行函数。调用方法 为：loadjs(JS文件URL,加载后执行的函数名,函数的变量)。
图3-1判断加载是不是完成
对动态天生JS和DSS的函数，首要是施用createElement_x建立标签元素，之后施用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 健康度
健康度是实验页面加载时间的1个指标，我截取了从页面正式公布后5天的环境，3秒健康度不变在88%摆布。
图4-1 健康度计数
4.2.2 Yslow插件
Yslow是网页机能实验的1个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背景图，险些没有以纯色做背景的板块。这是游戏官网都具有的独特的地方，所有的板块均需要大量的修饰，以营建预设风格和加强视物感觉体验认识。
所有板块标题施用微软雅黑，共进行了逐渐变化色彩措置惩罚；板块内容列表地区范围均含有1个发光效果的背景，如果板块有页卡，背景将随页卡的切换而拥有不同的发光点；首页顶部含有大背景图；其它另有一些零碎的背景图，包括脚标商标图、导航icon图、右上角手动广告图等。
5.2.2 措置惩罚背景图
施用DSS Sprites对背景图进行组合。但因为零碎背景图数目浩繁，全部整合到1个图片里，会引起图片体积过于复杂，以是要对背景图进行分类。
图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代码写入1个单独的DSS文件里，通过JS延迟加载这个DSS文件。
注意，如果1个元素的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 新闻板块需要页卡切换功能
因为板块内容列表地区范围均含有1个发光效果的背景，如果板块有页卡，背景将随页卡的切换而拥有不同的发光点，以是，当页卡进行切换时，内容列表区外框标签的DSS同时需要切换。函数如下：
function swap(elem){var area=document.getElementById(elem),lnks=area.getEl ementsByTagName_r(“a”),divs=area.getElementsByTagName_r(“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），如许造成了三个HTTP哀求。
此中qqgg_comm.js里的函数是天生广告的，可以写入公用JS文件中，可以节流1个HTTP哀求；Info_new_13.js里是DNF相关的广告信息（包括广告ID、图片地址、链接地址等），这个文件因为体积相对于复杂，需要延迟加载。
重新编著了天生广告的函数（DNF公用JS文件中的gg(ids)函数），将所有涉及到广告天生的函数进行整合和修改，现在只消调用新的广告天生 函数，向内里通报广告id数组和插进去广告的布局元素id即可。需要申明的是，新函数仅属用于页面内只含有1个轮播广告的环境，且撑持非连续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里的函数直接放在页面内里，以减少1个HTTP哀求。这个函数只能放在页面顶部。
问问跳转去失yk.js，以减少1个HTTP哀求，将内里redirect(q_ttl);函数写入页面，其它函数未发明页面调用，可以去失。
合作伙伴下拉菜谱函数如下：
function corp(){var corp=document.getElementById(“corp”);var corp_h2=corp.getElementsByTagName_r(“h2″)[0],corp_list=corp.getElementsByTagName_ r(“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_r(“li”)[0].className=”top_news”;document.getElementById(“bulletin”).getElementsByTagName_r(“li”)[0].className=”top_news”;}; 竣事语
与首页同样，其它页面的重构方式相同。最首要的就是只管即便减少HTTP哀求，由大变小各种文件的体积。很多Include和JS文件可以直接施用，需要注意的就是DSS背景图如何整合，直接加载重要的，延迟加载不重要的。
此次DNF官网改版，在减少HTTP哀求数和寻求更高的健康度上，有可能部分方法相对于极度，更好的方法有待深切研究。希望此文档能在今后各个产品的官网改版上帮忙到列位同窗。
数据统计中！！
