After-Yahoo-34-Rules---网站性能优化新进展

网站性能优化

WPO(WebPerformanceOptimization)

--在YAHOO34Rules之外广告技术部:李牧2010-7-1211

前端基础知识VS速度视点21.1网页上一切来自HTTP一般情况下,页面上所有的内容都是通过HTTP请求获得第一个请求通常是一份(X)HTML文档,也就是浏览器中地址栏的指向.31.1网页上一切来自HTTP一般情况下,页面上所有的内容都是通过HTTP请求获得第一个请求通常是一份(X)HTML文档,也就是浏览器中地址栏的指向.4主要的时间花费在http的请求过程中1.2HTML被解析成Dom树(X)HTML文档是一份不那么严谨的XML(文本)文档,没有Schema,有DTD(通常在HTML文本第一行Doctype中定义)浏览器按照文档内容自上而下解释运行展现.最终被完整的解析成一颗树(DOM树):其余的HTTP请求,除了CSS可以引入背景图和XHR(以后会介绍)之外几乎都是在解析HTML时,由树上的几种特定节点发起的:<img>:用来嵌入图片(jpg,png,gif.)<iframe>:用来嵌入其他HTML<link>:可以用来引入CSS文件,同时CSS内容引入背景图请求<script>:可以用来引入JavaScript文件<object>和<embed>:通常用来引入Flash文件51.2HTML被解析成Dom树(X)HTML文档是一份不那么严谨的XML(文本)文档,没有Schema,有DTD(通常在HTML文本第一行Doctype中定义)浏览器按照文档内容自上而下解释运行展现.最终被完整的解析成一颗树(DOM树):其余的HTTP请求,除了CSS可以引入背景图和XHR(以后会介绍)之外几乎都是在解析HTML时,由树上的几种特定节点发起的:<img>:用来嵌入图片(jpg,png,gif.)<iframe>:用来嵌入其他HTML<link>:可以用来引入CSS文件,同时CSS内容引入背景图请求<script>:可以用来引入JavaScript文件<object>和<embed>:通常用来引入Flash文件6Dom节点的多少也决定了,HTML解析的速度需要发送请求的Dom节点数,决定了HTTP请求个数Dom节点的顺序也有讲究.a.css文件的内容:

.myTxt{color:red;font-size:50px}各种CSS定义驻留在Dom树的属性中或元素节点内.仍然是Dom树的一部分1.3使用CSS定义显示样式如何定义字体颜色大小,区块的边框内外变距?<span><fontsize="50"color="red">CSS出现之前</font></span><spanstyle="color:red,font-size:50px">CSS使用Style属性直接定义</span><spanclass="myTxt">使用Class等多种方式外部定义</span>在HTML内定义<style>

.myTxt{color:red;font-size:50px}</style>通过<link>引入CSS文件,在文件中定义<linkrel="stylesheet"type="text/css"href="http:///a.css"/>7a.css文件的内容:

.myTxt{color:red;font-size:50px}各种CSS定义驻留在Dom树的属性中或元素节点内.仍然是Dom树的一部分1.3使用CSS定义显示样式如何定义字体颜色大小,区块的边框内外变距?<span><fontsize="50"color="red">CSS出现之前</font></span><spanstyle="color:red,font-size:50px">CSS使用Style属性直接定义</span><spanclass="myTxt">使用Class等多种方式外部定义</span>在HTML内定义<style>

.myTxt{color:red;font-size:50px}</style>通过<link>引入CSS文件,在文件中定义<linkrel="stylesheet"type="text/css"href="http:///a.css"/>8CSS的类意味着:每个类定义的影响范围覆盖所有Dom节点.最佳的方式是有展现的在Dom节点出现前定义好CSS.另外CSS的背景图等属性也会引入图片HTTP请求.1.4使用JavaScript语言处理交互网页应用是典型的事件驱动系统.JavaScript为交互事件,时间线上的事件定义响应体.来看一个最简单的交互:点击一个按钮,弹出一个警告框.<buttononclick="alert(1)"></button><buttononclick="clk()"></button><script> functionclk(){ alert(1); }</script><scriptsrc="/a.js"></script>a.js文件的内容: functionclk(){

alert(1);

}更多原生的鼠标键盘事件类型及事件注册方法详见:关于跨浏览器事件JS同样驻留在Dom树的属性中或元素节点内.仍然是Dom树的一部分91.4使用JavaScript语言处理交互网页应用是典型的事件驱动系统.JavaScript为交互事件,时间线上的事件定义响应体.来看一个最简单的交互:点击一个按钮,弹出一个警告框.<buttononclick="alert(1)"></button><buttononclick="clk()"></button><script> functionclk(){ alert(1); }</script><scriptsrc="/a.js"></script>a.js文件的内容: functionclk(){

alert(1);

}更多原生的鼠标键盘事件类型及事件注册方法详见:关于跨浏览器事件JS同样驻留在Dom树的属性中或元素节点内.仍然是Dom树的一部分10选择合适的时机,合理的方式注册事件DomReady而非window.onload,使用事件代理保证最快的首次有效交互的时间1.5DHTML--JavaScript改变DOM树JavaScript不满足于简单的计算,校验和事件响应.浏览器将其内的Dom树为转化JS可以访问和操作的对象.由事件或时间线驱动JS响应的方法对Dom树进行修改.称D(Dynamic)HTMLW3C(万维网联盟)的DomLevel1,2&3中定义了3个层次一系列Dom上的操作接口.http:///DOM/DOMTR

在各种浏览器下Level1基本都能被正确实现.IE有独特的事件模型.其余浏览器的事件模型符合W3C定义111.5DHTML--JavaScript改变DOM树JavaScript不满足于简单的计算,校验和事件响应.浏览器将其内的Dom树为转化JS可以访问和操作的对象.由事件或时间线驱动JS响应的方法对Dom树进行修改.称D(Dynamic)HTMLW3C(万维网联盟)的DomLevel1,2&3中定义了3个层次一系列Dom上的操作接口.http:///DOM/DOMTR

在各种浏览器下Level1基本都能被正确实现.IE有独特的事件模型.其余浏览器的事件模型符合W3C定义12因为JavaScript可以改变DomTree所以HTML在解析Dom时遇到<script>节点时会等待其加载和执行被阻滞1.6AJAX--JavaScript与服务器端交互JavaScript已经具有能力完全的改变所在网页的每个细节.JavaScript的野心不止于此,如果JS能由事件驱动,从服务器端源源不断的获取新鲜数据,那理论上不再需要第二个页面了.网页上一切来自HTTP,获取数据自然需要JavaScript发起HTTP,接收并理解响应.于是有了XHR(XmlHttpRequest),首先作为一个ActiveX控件被IE引入.为避免潜在的混乱JavaScript仅以单线程运行,但XHR的异步特性使得它独立于JS引擎的线程外工作.数据返回前,其他JS,页面上的交互如常运行,而当数据返回时触发事件.如今AJAX不单指XHR.所有在不离开当前页面的前提下,由JS主动发起的从服务器端获取JS可解析数据的方案,皆可称AJAX131.6AJAX--JavaScript与服务器端交互JavaScript已经具有能力完全的改变所在网页的每个细节.JavaScript的野心不止于此,如果JS能由事件驱动,从服务器端源源不断的获取新鲜数据,那理论上不再需要第二个页面了.网页上一切来自HTTP,获取数据自然需要JavaScript发起HTTP,接收并理解响应.于是有了XHR(XmlHttpRequest),首先作为一个ActiveX控件被IE引入.为避免潜在的混乱JavaScript仅以单线程运行,但XHR的异步特性使得它独立于JS引擎的线程外工作.数据返回前,其他JS,页面上的交互如常运行,而当数据返回时触发事件.如今AJAX不单指XHR.所有在不离开当前页面的前提下,由JS主动发起的从服务器端获取JS可解析数据的方案,皆可称AJAX14不要使用同步XHR请求,处理好等待状态使用JSON数据交换适用一切应用于HTTP请求的优化措施1.7Cookie--身份识别与会话保持再次回到HTTP本身HTTP是一种没有状态协议靠存储在客户端的Cookie来标识身份,保持会话HTTP分Header和Body两部分HTTP的Header分Request和Response两部分Request中会带着请求域下的Cookie服务端可以通过Response种植CookieCookie可以种在根域名和所在的子域名下,也可以种植在指定路径下,指定有效时间JavaScript可以读写所属HTML页面所在域下的Cookie页面/item.html中的JS可以读写子域名下和根域名下cookie151.7Cookie--身份识别与会话保持再次回到HTTP本身HTTP是一种没有状态协议靠存储在客户端的Cookie来标识身份,保持会话HTTP分Header和Body两部分HTTP的Header分Request和Response两部分Request中会带着请求域下的Cookie服务端可以通过Response种植CookieCookie可以种在根域名和所在的子域名下,也可以种植在指定路径下,指定有效时间JavaScript可以读写所属HTML页面所在域下的Cookie页面/item.html中的JS可以读写子域名下和根域名下cookie16静态资源(图片,脚本等)放在不含有cookie的域最小化cookie大小.HTTP中一个数据包1k,cookie存在于header中,如果过大效率下降很多.1.8小结--七种武器HTTP:一切内容通过HTTP请求获得HTML:浏览器把HTML解析成Dom树CSS:定义HTML的显示样式JavaScript:提供计算能力,处理交互事件Cookie:网页间,请求间身份识别与会话保持DHTML:JavaScript操作Dom树(包括CSS)AJAX:JavaScript操纵HTTP(包括Cookie)所有前端应用托生于这些基础特性的整合Web2.0主要托生于DHTML和AJAX这类JavaScript的能力扩展171.8小结--七种武器HTTP:一切内容通过HTTP请求获得HTML:浏览器把HTML解析成Dom树CSS:定义HTML的显示样式JavaScript:提供计算能力,处理交互事件Cookie:网页间,请求间身份识别与会话保持DHTML:JavaScript操作Dom树(包括CSS)AJAX:JavaScript操纵HTTP(包括Cookie)所有前端应用托生于这些基础特性的整合Web2.0主要托生于DHTML和AJAX这类JavaScript的能力扩展18来提升武器性能吧!FastByDefault!Planforperformancefromday1!1.9网站性能优化思路网页通过HTTP获得,在浏览器解析,那么网页性能优化思路:191.9网站性能优化思路网页通过HTTP获得,在浏览器解析,那么网页性能优化思路:20说法:80%oftheend-userresponsetimeisspentonthefront-end.八成时间耗在了前端先看看淘宝技术大学的通用教程,稍后回来看应用端开发需要重点关注什么!2.

淘宝技术大学:<<构建高性能的网站>>

--小马,玉伯,小凡21主要介绍14优化军规和20条最佳实践:/performance/rules.html3如何发现性能相关问题?223.1HTTP数据包嗅探记录HTTP请求的形成瀑布图-分析HTTP请求间的顺序-分析单个请求的内容和各阶段时间(域名解析,建立连接,发送请求,等待响应,接收数据)单机版HTTPWatchFiddlerFirebug网络版基调网络AliBench233.2运行时分析(profiling)记录网页运行时,JSfunction的运行耗时或CPU内存使用情况:YUIprofilerFirebugProfilerPageSpeedActivityMSFastPageTestDynatraceAjax24相关工具详细介绍http:///performance-tools/

3.3浏览器内存结构分析(起步阶段)检测IE内存泄露工具 IELeakDetectora.k.aDrip [/ieleak/]分析浏览器中内存结构和GC情况,这方面的研究刚刚起步,当前技术停留在观察浏览器中内存使用痕迹的水平

IE不开源没有公布相关工具

Mozilla的相关研究项目http:///blog/2009/07/browser-memory-tools-directory/

253.4浏览器各种任务性能开销分析(起步阶段)分析浏览器运行过程中执行布局,渲染,HTML,调度,DOM,格式化,JS等任务的分别的开销,找到优化关键点IE给出的相关统计分享:http:///techdude/ie8-whats-coming

263.5再次强调优化思路27更好的借助工具发现问题:4发展中的WPO284.1减少http请求数294.1.1YSlow35：避免空的ImagesrcImage带有空字符串作为

src

的属性值将带来额外的请求,有两种形式:HTML:

<imgsrc="">JavaScript:

varimg=newImage();

img.src="";这两种形式都有一个同样的效果:浏览器发起另外一个请求到节点所属页面的地址http:///performance/rules.html#emptysrc

304.1.2combo-自动合并脚本和css文件combo代表一种服务器端技术,根据客户端HTTP请求的URL,将多个文件合并成一个文件输出.多用于JavaScript文件和CSS文件的合并.大量减少HTTP请求数量http:///min/?b=libs/yui&f=3.1.0/build/event-custom/event-custom-min.js,3.1.0/build/attribute/attribute-min.js,3.1.0/build/base/base-min.js

相当于获取了event-custom-min.js,attribute-min.js和base-min.js在YUI3由YUILoader构建的URL确保了多个脚本的正确顺序314.1.3BigPipe—combo动态数据Combo的应用面向多个静态资源的请求合并.而当一个页面上的动态数据来自多个数据中心时,使用BigPipe技术将动态数据整合在一个HTTP请求中分段输出,达到服务端多数据中心并发,服务端与浏览器端并发的目的.现有PHP端的并发技术成熟,比如YAHOO的yfed,只要配合提早flush(),发送chunk的HTTPResponse给前端即可.BigPipe技术由Facebook引入,适合SNS类应用./note.php?note_id=389414033919324.1.4comet-基于HTTP的服务端push技术33基于AJAX的长轮询（long-polling）方式基于Iframe及htmlfile的流（streaming）方式服务器端推数据给客户端,保证消息最快速度传递:

使用有一个Ajax异步请求连接在服务端等待

使用一个不关闭连接,不断的flush数据(类似bigpipe).应用场景:各种WEBIM和SNS站点消息通道当前问题:

浏览器到同一域名连接数有限,影响其他同域请求性能

Web服务器维持长连接消耗过大,存在较严重性能问题/developerworks/cn/web/wa-lo-comet/

4.1.5DataURI减少图片请求网页常用的小图片可以将图片数据使用Base64编码,直接写在文件中.这样可以减少HTTP请求数.详见口碑网秦歌的说明:/2009/08/15/data-uri-mhtml/

应用:淘宝旺旺点灯图片344.2有效利用缓存354.2.1使用良好的JS,CSS版本管理方案JS属于静态文件,在我们不需要更新它的时候我们希望它在用户的浏览器端缓存的时间越长时间越好.而我们需要它更新时,往往需要配合JSP,PHP的修改立即生效.一般做法,在服务端动态脚本配置资源版本号,通过URL参数区分版本,引入资源,如:/a.js?v=1.js

/a.css?v=1.css红色部分在版本号后面又加了文件后缀是因为IE6早期版本的一个bug.通过URL参数区分版本可能受到代理服务器影响,建议:/v1/a.js/v1/a.css364.2.2尝试仅做必要的JS更新Google的Diffable项目,采用增量更新机制使得JavaScript只下载更新的部分.在GoogleMap的项目中,20%-25%的用户可以获得1.2S(25%)的性能提升37/blog/2010/07/09/diffable-only-download-the-deltas/4.2.3利用本地存储,只做必要的更新Flash默认为每个域名提供100K的本地存储空间,Flash的ActionScript3可以将二进制内容存入ShareObject.在新一轮的BannerMaker性能优化中,我们正尝试更好的模块化设计,将编译后的模块存在本地备用.另外浏览器也提供其他本地存储技术,也有网站应用这些技术做JS的缓存.384.3减少实际收发数据量394.3.1最小化html前面的规则要求我们最小化JS和CSS而html也应该最小化,去掉回车和首尾空格.但是HTML的压缩存在风险,YAHOO也没有压缩HTML,详见玉伯的说明:/blog/2010/05/why-dont-compress-html/

特定系统中,风险可以规避或者通过测试排除404.3.2进一步讨论Gzip

虽然包括IE6在内所有主流浏览器都支持Gzip但仍有15%-25%的用户获取到没有压缩的数据.

原因是在网路上存在代理服务器和一些病毒防火墙.过滤掉了RequestHeader中的接受Gzip信息.Gzip检测:发送一段Gzip后的JS代码,如果正确执行种cookie,表明之后可以发回Gzip数据建议安全厂商去掉Gzip标识过滤

另一方面,面向Gzip加密算法,提高压缩比例.比如我们的广告点击加密串,一次取多条广告在加密时,pv级别信息放在一起可以让Gzip后的数据减少3成左右.414.4缩短HTTP请求时间

424.4.1进一步讨论域划分根源:IE6+HTTP1.1，对于同一个域名只能同时进行2个连接.新浏览器扩展了连接限制.但IE6始终大量存在而过多的域会导致DNS寻址时间加长.使用HTTP1.0可以将连接数扩大到4,但带来了缓存方面的困扰,需要处理好.如何确定域划分和具体业务关系很大,比如淘宝将图片分别存放在8个域名中,随着新式浏览器的增多,以及微软在windowsupdate中对IE6的更新,域名会逐步缩减.434.4.2打开keep-alive重用HTTP连接服务打开keep-alive后,连接会保持指定的一段时间才关闭,后续的请求可以重用此连接,节省了HTTP请求中域名解析和建立连接的耗时.打开keep-alive会给服务端造成额外的压力,而且连接时串行的,同一连接同一时间只服务一个HTTP请求.所以要根据实际情况(页面停留时间)调节keep-alive时间.444.5JavaScript优化454.5.1使用JSON进行数据交换JSON在浏览器端解析的效率至少高于XML解析效率1个数量级,如果说AJAX的X代表XML,那么当前我们使用的技术应该称AJAJJSON在新浏览器中内置了生成和解析的方法,在IE6等老式浏览器中,要使用额外的JS方法来解析(),不要使用eval,可能会带来安全问题和性能问题.464.5.2保障网页的可交互性JavaScript为单线程语言,在运行时页面会处于锁定状态,任何操作没有响应.所以JS进行大量运算时,要使用相关技术保障页面持续可交互在所有浏览器中可以实现的方法是,使用setTimeout将大量的循环调用分组执行,每隔一段时间执行一组操作,称Timer.针对Ajax的XHR请求,绝对不要使用同步模式,否则浏览器会锁住,知道XHR获得到了服务器端返回数据.因为数据返回依赖网络,时间较长,错误可能较大.HTML5规范的WebWorker为JS提供了多线程机制,线程间使用消息事件联系.异步的XHR也相当于多线程.474.5.3缩短最快可交互时间(TTI)最快可交互时间指从浏览器开始访问网页,到网页可以正确处理UI事件交互的时间受到挑战的是规则把JS放在底部,因为JS放在底部,JS下载和运行依然需要时间.Facebook做法:head加载一个小JS文件,在底部JS加载运行之前,页面事件会请求专门处理这个事件的小段脚本,快速响应Yahoo首页实践:缩减初始化载入内容,减少底部脚本,加快DomReady,让重点部分可交互.其余部分延迟加载MS正在研发中的工具Doloto:JS中有大部分在初始化时没有调用,通过自动切分出需要的部分.484.5.4异步无阻脚本下载技术/blog/2009/04/27/loading-scripts-without-blocking/steve的blog介绍了大多数方案

ScriptDomElement:主要使用Dom方法创建Script节点,添加到DomTree中.只要指定了脚本的async属性,除了Opera浏览器,脚本的下载和执行不会阻滞页面的下载.IFramedJS:使用dom方法,动态构建一个没有src的<iframe>节点,通过iframe.contentWindow.document.write().在iframe内加载脚本随之而来的问题:通过这种模式下载多个具有依赖关系的脚本,顺序问题需要解决.YUI3:维护脚本之间的依赖关系,通过loader组件顺序的异步加载脚本,结合Combo获取更好的性能494.5.5优化内存使用,防止内存泄露delete不再需要的对象移除DomTree中不再需要的节点移除节点之前先注销节点上绑定的事件尽量避免JSObject和DomObject的双向引用(特别需要注意IE下隐式的双向引用,如事件注册)注意XHR也可能引入的内存泄露/2006/10/msie-memory-leaks/

504.5.6高效JavaScript的一些Tips访问局部变量的速度最快优化循环(猜测最易退出处开始)和条件(类似二分法)大量字符串链接操作优化(老式浏览器用arr.join(""))使用事件代理http:///blog/2009/06/30/event-delegation-in-javascript/

优化Dom访问/dom-access-optimization/

使用4.5.2节的Timer技术,保持交互流畅514.5.7第三方代码相关性能问题第三方代码普遍存在性能问题和隐患.主要是脚本阻滞,HTTP过多等.Steve最近开展了Performanceof3rdPartyContent系列调查,评估美国主要的Mashup公司的埋点代码,并给出改进意见./p3pc/

Google对Analytics做了相关优化,Adsence优化进行中参见Velocity2010:Don'tLetThirdPartiesSlowYouDown(/velocity2010/public/schedule/detail/15412)最近在懒懒的广告代码优化相关分享:http:///taobaoued/ss-4888423

524.6CSS优化534.6.1内联脚本不要与样式表穿插使用<linkhref="1.css"/><script></script><linkhref="2.css"/><linkhref="3.css"/>建议将内联脚本放在CSS之上./blog/2010/02/15/browser-performance-wishlist/#stylesheet_js544.6.2使用高效的CSS选择器从3.4节微软给出的分析可以看出,CSS的消耗在浏览器全部消耗的很大比重.所以有必要优化CSS,使用高效的CSS选择器,达到快速渲染,格式化的目的.详情参见Google的文档:http:///intl/zh-CN/speed/speed/docs/rendering.html#UseEfficientCSSSelectors

554.7HTML优化564.7.1进一步讨论提早Flush57通常提早Flush</head>之前的内容其实可以Flush更多次,但是要注意<body>中内容的Flush,只有<body>的直接子节点之后Flush,才能达到提前渲染的目的:<body><div></div> <Flush达到预期<div></div></body><body><div>

<div></div>

<Flush失败

<div></div>

</div></body>目标应用:首页搜索框,Search页广告FacebookBigPipe技术网站速度提升一倍:http:///notes/facebook-engineering/making-facebook-2x-faster/307069903919

4.21有关视觉和心理学584.21有关视觉和心理学59有没有感觉快了些?5总结605.1--14条优化军规1. 尽可能的减少HTTP请求数2. 使用CDN3. 添加Expires头(或者Cache-control)4. Gzip组件5. 把CSS样式放在页面的上方。6. 将脚本放在底部(包括内联的)7. 避免在CSS中使用Expressions8. 将javascript和css独立成外部文件9. 减少DNS查询10. 压缩JavaScript和CSS文件(包括内联的)11. 避免跳转12. 移除重复的脚本13. 配置ETags14. 缓存Ajax请求615.2--21条最佳实践15. 尽早刷新缓冲区16. 用GET方法发送Ajax请求17. 组件延迟加载18. 组件预加载19. 减少DOM元素个数20. 多域并行下载21. 尽量少用iframes22. 避免404错误23. 减小cookie的大小24. 对某些静态资源减少无谓的cookie传输25. 减少访问DOM的次数26. 编写聪明的事件处理器代码27. 使用<link>而不是@import28. 避免使用CSS滤镜29. 优化图片30. 优化CSSsprites31. 不要在