基于前端的Web性能优化

ISSN 1009 -3044E-mail: info@cccc.net.cnComputer Knowledge and Technology电脑知识与技术htp://www.w.net.cnnVol.7, No.16, June 21p.3.11-3813,38Tel:+86- -551- -5690963 5690964基于前端的Web性能优化康长安,陈玉红(中国矿业大学管理学院,江苏徐州21116)摘要:随着互联网的高速发展,用户与页面的交互越来越复杂,会话时间也越来越长,同时人们对互联网的依赖性日益增强,网站性能逐渐成为Web产品市场成败和评测网站用户体验的重要指标之一。文中着重从前端的角度对Web性能优化的方法和策略进行分析与研究。关键词:前端;Web;性能优化;Gzip ,中图分类号:TP393文献标识码:A文章编号:1009 -3044(2011)16 -3811-03Website Performance Optimization Based on Front: EndKANG Chang- -an, CHEN Yu-hong(School of Management, China University of Mining and Technology, Xuzhou 221116, China)Abstract: With the rapid development of Internet, the interaction between with users and the page is more and more complicated, the se-sion time is getting longer. While people are increasingly depending on the Intermet, website performance becomes more and more impor-tant to the product. This esasy focuses on the method of website performance optimization from the perspective of front- end.Key words: Front- -End; Web; performance optimization; Gzip在Google .500毫秒的延迟将失去20%的流最;在Bing, 慢2秒将导致收入降低4.3%;在Amazon,慢100毫秒将丢失1%的交易....反之网站速度越快，越有利于提升用户体验和流量。随着网络技术的快速发展, Web 2.0把越来越多的内容加到网页中,图片、Flash.JavaSeript脚本和CSS样式表等被广泛使用。如何能够将页面更快的呈现给用户,成为很多公司面临的挑战。根据Yahoo!公司的性能黄金法则,在页面是现的过程中,只有10%~20%的时间花费在了下载HTML文档上,其余的80%-90%时间花在了下载页面中的所有组件(图片.脚本.样式表、Flash等)上"。基于此.本文将者重从前端的角度分析如何对网站性能进行优化。1减少HTTP请求浏览器和服务器之间通过HTTP协议相互通信.HTP响应包含状态码头和响应体,即便请求返回的内容为空.请求也依旧包含大量的头部信息。根据黄金法则，改善页面呈现时间最简单的途径就是减少贞面中组件的数量,并由此减少HTTP请求的敷上。1.1合并静态文件网站中的静态文件主要包括脚本和样式表,如果遵循软件工程的思想和模块化原则将代码分制成多个小文件,则会降低浏览器的性能，因为每个文件都会导致-一个额外的HTTP请求。如果将多个文件合并到一个文件中,可以减少HTTP请求的数量并缩短最终响应时间,提高网站性能。常用的实现方式如下:<script srthtp://demo.com/a.js"><script srctp://demno.comb.js"><script srcthtp://emo.com/c.ja">将上述代码调整为:<script stp:/:/demo.comn/combo.php?htp://emo.com/bjs&htp:/d/mo.como/cjo">/scri>j在combo.php中获取所儒的文件名并进行合并, -次发送到客户端。这种方式大大的降低了HTTP请求数,同时也减少了URL代码量,这对于Web性能优化来讲至关重要。同时也不会对原有文件的部署产生影响,开发人员人可以采用原有模式进行模块化开发。1.2 CSS SpritesCSs Sprites是将页面中一-些背景图片合并到- -张单独的图片中，配合使用CSS的“background-position"和"background -repeat"属性将背景图片放置到HTML元素期望的位暨上,其中"backgound- position"可以用数字精确的定位出背景图片的位置。使用CSsSpies大大减少了页面对图片的请求数目,能够有效的减少HTTP请求的数量。但也同时增加了开发人员合并图片的时间成本,后期的维护成本也同样会增加。中国煤化工YHCNMHG收稿日期:2011-03-25作者简介:康长安(1988-),男,中国矿业大学管理学院在读研究生研究方向为能源经济。本栏目责任编辑:冯蕾.......网络遗讯及安全" 3811Computer Knowledge and Technloy电脯知识5$技术第7卷第16期(2011年6月)2减少网络传输量表1国内+大流行网站的压缩情况网站压缩类型原始文件大小 压缩后文件大小 压缩军除了减少HTTP请求的数量，也可以通过减少每次ttp:// bridu. comBip679字节53.96%HITTP请求产生的响应包的大小来加快响应时间。htt://w. .comgzip212285字节54318字节74.41%2.1使用Gzip压缩http://m. sima. com en gziphttp://w. tobao.com gzip189207字节36905 字节80.45%Grip是GNUzip的缩写,它是-一个GNU自由软件的文htp://mm. google.comhk gzip14846字节5789 字节61.00%0件压缩程序用。HTTP 协议上的Gzip编码是一种用来改进 h:// 16.czip306179字节89607 字节70. 73%htp:/r. sohu.cm298712字节70651 字节76.359Web应用程序性能的技术.日前被绝大部分Web服务器和http://m.2050. com26529字节8549 字节67.7%浏览器支持。在服务器端启用Gzip后,-般能够将HTMLht://mm. youku. comdeflote 456078字节 70168 字节84. 61%文档样式表和脚本等文件的大小压缩至70%左右。http:/ww. ifeng. cm312837字节74331字节76. 24%2.2压缩静态文件在JavaSript脚本和CSS样式表中.通常包含大量的空格、换行符和注释等。这些内容对于页面来讲是没有作用的,而且会增大文件的体积,影响网络传输。为此,可以利用一些方法和手段在产品上线前，对静态文件进行压缩,压缩的原理主要有以下几点:1)压縮多余的空格和换行符;2)删除注释;3)把JavaSeripl中较长的变量名和方法名统- =替换为较短的名称:成熟的压缩工具有很多,例如老牌的JSMin和YUI Compressor(简称YC),它们都可以用来压缩脚本文件,YC还可以处理CSS。Cogle Closure Compiler(简称GC)是Coogle推出-款脚本压缩工具。GC与YC的不同之处在于YC只是一个压缩器,而CC更像- -个编译器,也就是说GC的压缩并不仅仅是去除注释和空白,还可以在保证代码正确性的情况下进-步改写代码,压缩效果更高。2.3最小化HTML在网页的HTML文档中也通常会包含大量的空格.换行符,注释,一般来讲这些内容对页面的展示是没有作用的,因此在将HTML.发送给客户端之前可以采用相关技术移除这些没必要的字符以减少网络传输量。但是压缩HTML也是存在风险的.例如pre标签里的空白符是不能去除的,IE条件注释也是不可以删除的。不过在特定系统中,风险可以规避或者通过测试排除。2.4使用缦存浏览器级存是为了加速页面浏览速度,浏览器在用户磁盘上对最近请求过的资源进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘读取文档,这样可以战少HTTP请求数量和响应的大小,使Web页面加载得更快。因此合理配置缓存,将会对用户浏览連度有很大的提升。2.5减少Cookie,采用服务端Session在每次浏览器与服务器发生通信时,HTTP的头部都包含了Cookie信息四，在有些请求中这些Cookie是有用的(例如验证是否登录),有些则是没有必要的(例如请求图片)。Web页面中通常包含大量的图片.每次清求图片都会包含该域所有的Cookie,如果Cookie过大的话,这将增加很多没有必要的通讯内容。为此.通常采用的策略是减少Cookie,采用服务端Session;另-种策略是通过合理的划分主域将静态文件(图片、脚本、样式表等)放到无Cookie的域下。3浏览器渲染3.1将样式表放到顶部浏览器谊染页面的过程是流型的，即对HTML文档边加载边匹配样式表进行谊染。如果将样式表敏在文档底部会先在加载HTMI.最后进行渲染,这会导致在浏览器中阻止内容逐步呈现的过程。因此将样式表放在顶部head标签内更有利于页面渲染。实际上这-原则对页面实际的加m载时间并没有影响,其影响的是用户的感觉。3.2将脚本放到底部浏览器加载组件的方式有两种,一种是并行,另一种是阻塞方式。并行的方式是明显的,即可以同时加载多张图片或样式表。图1是测试页面加载资源的HTTP瀑布图,它显示了3种资源:一个HTML文档(indexphp) .4张图片和一个JavaSeript脚本的加载情况。从中可以清晰的看到浏览器在加m载"one jng"和'"iwo.jpg"是并行的.再加载"basejs"时是阻塞的。浏览器加载并执行完"bsejs"后才会加我另外两张图片。优秀的体验是让用户尽快的看到页面的视觉效果,并行的加载方式能够更快的将页面呈现给用户,因此将阻塞加载的JaSrpt脚本移至页面的底部,将会大大加快页面的呈现速度.这将很大的提升用户体验。3.3减少Refnow在CSS规范中有一个演染对象的概念,通常用一个“盒子“来表示,Morilla浏览器通过一个叫做frame的对象对盒子进行操作。frame主要的动作有三个:2141日1J10. sm1)构造frame,用来创建Dom树;中国煤化工2) Reflow,以确定对象的位置(坐标)、宽度.高度:3)绘制,以便对象能显示在屏幕上。YHCNMHG载总的来说“Relow"就是载人Dom树.创建或更新frame结构的-种过程。通过减少Reflow的开销可以提高页面性能，通常采用的方法如下:3812..网络遇讯及安全.......本栏目责任编辑:冯蕾第7卷第16期(2011 年6月)Computer Knowedge and Technology电随知识'技术1)如果事先能够确定图片宽高,最好在HTML或CSS中指定;若未指定宽高,图片的载人会使页面Relow,因为要根据图片宽高来更新frame。2)使用"isbliy: hidden"替代"display: none”。在编写-些常见的动态效果时, -般使用CSS的display来切换可见性,但这会产生reflow. 把元素设置为display: none ,相当于把这个元素的frame销毁了,再置回非none 时,需要重新构造frame,这就产生了reflow。 而另外一个切换可见性的属性vibility则不存在rllo问题。3)一次性更改对Dom的操作结果,如下面的一段代码:var ul = document.createElement("ul"),lil = document.createElement("Ii"),li2 = doeument.ceteElent'"Ii");document.bodyappendChild(u);ul.appendChild(il);ulappendChild(i2);这种方式效奉不高.因为每次调用appendChild方法都会更改Dom树的结构从而产生Reflow。如果调整为下面的代码,则只会产生一次Reflow。lil = documentcreateElemen(Iti"),li2 = document.createElement("Ii");document.body.appendChild(u);4延迟加载4.1圉片延迟加载现在许多大型网站,-些图片是在拉动滚动条的时候才加载的.这样不但提高了用户体验,减少页面加载时间,同时也减少了不少http请求。为了减少页面首屏的展示时间,对图片进行延迟加载成为了常用的策略之一-。所谓图片延迟加载,就是将屏幕之外的图片隐藏掉不让其加载,等到用户滚功屏幕时再加载响应的图片。代码如下:隐藏图片的部分代码://placeholder是一张非常小的图片,主要为了防止加载时出现红色叉。var placeholder = htp://demo.com/placholder.png",img = document.getElementById( map);ing.ceAttribute( original', ing.src);img.sre = placeholder,显示图片的部分代码:var img = document.getElementById( "map);img.src = imgetAtribute( oniginal);4.2圈片预加载用户在浏览页面的时候.浏览器不是每时每刻都在工作的。如果能够根据分析用户习惯,预知用户操作,利用浏览器“空闲时间”将预知操作中所需的用片提前加载下来,这将会改善用户体验，提高页面性能。通过下面的方法可以将图片预先放钊浏览器的级存当中,用户浏览贞面时会大大减少等待时间。var sre = hp/://m.co/map.png"，11 预知页面中的图片地址img = new lmg);img.src = src;4.3内容延迟加载Web页面中有许多内容是不需要在页面初次加载时就需要的.例如选项卡里的内容。当用户切换到响应的Tab时,再通过Ajax等异步方法加载内容,实现内容的延迟和按需加载。这种方法已日趋成熟,在很多大型网站中已大量使用,大大增加了用户体验性。4.4适时加载脚本和样式表-张普通页面通常都会包括很多的脚本和样式表,大小一般都会在几百K,甚至更大。-般来讲某一时刻贞面所需的脚本和样式表却很小，当用户的某些操作需要相关脚本或样式表时再去加载,这里就引出了另一个提高Web性能的策略,即使用JavaSeript动态加载脚本和样式表。5创新社会和行业的进步需要都需要以技术创新作为驱动,技术创新是具有创造性的行为,必然会遇到米曾遇到的问题,这就带来了不确定性和风险.因此创新是需要勇气和智慧的。对于互联网也同样如此,中国煤化工时代的来临。近些年在Web性能优化上的主要代表应用有Facebook的Quickling、PageCache、BigP_WebP等。通过技术创新也让他们获益匪浅.例如Facebok通过Quickling将所有的用户点击访C. N M H G大量的服务器端重复计算和客户端的重复渲染。数据显示,使用了这个技术以后,加载时间降低了10% ~30% ,生成时间降低了20%- 30%。(下转第3838页)本栏目责任编辑:冯蕾网络通讯及安全" 3813Computer Knowledge and Technlgy电皆知识与技术第7卷第16期(2011年6月)delete m, pListenSocket;m_ pListenSocket = NULI;void CMyFiveView:Onsurrend0i(m. bLink)m_ _bTum = FALSE;int bffr(3)={SURREND,15,15);MessageBox("你认输了");}},void CMyFiveView:InChesint x, int y)//对方发送的棋子位置信息m bTum = TRUE;m_ nChesstatuslx]Jy}= -1*m. nColor;Invalidate0;if(IsWin(xy)m_ bTum = FALSE;i(m_ MChsstastsxyI]=)MessageBox("黑方获胜";elseMessageBox(" 白方获胜");}}void CMyFiveView:OnNewGame0if(m. bLink)m _bTum = FAISE;int buffer[3)=(NEWGAME,15,15);m_pClieniSocket- >Sen6dbfreiecfouferlvoid CMyFiveView:InitChessBoard0for(int i=0;i