前端优化14个性能规则.ppt

前端优化14个性能规那么2011年4月07日

概述浏览速度是网站最关键指标之一用户从输入网站到看到页面显示出来，受很多因素的影响：1：用户网速2：效劳器所在线路3：DNS解析4：效劳器负载5：效劳器端运行速度〔JAVA〕6：前端页面加载、渲染速度7：用户的电脑配置而80%的速度上的提升集中在前端

概述Yahoo团队总结出来的14条规那么属于经验式的，并非一成不变的原那么，大局部的原那么适用于所有的浏览器，也有很少局部区分于IE6\7\8,FF同时这些规那么还在不断的增加中，新的YSLOW已经增加到23条

概述对于一个HTTP请求，在流程上主要分为

工具FireBug://getfirebug/或者使用FireFox添加组件YSlowinFireBug

第一条：减少HTTP请求〔MakefewerHTTPrequests〕分析 网页中包含众多的HTTP请求，每一个请求都会占用网络资源，网页一般来讲要在下载完所需的所有资源之后才会完整显示

第一条：减少HTTP请求〔MakefewerHTTPrequests〕解决方法 合并JS脚本，合并CSS样式，采用CSSSprites和图片映射，懒加载，减少文件数。

第一条：减少HTTP请求〔MakefewerHTTPrequests〕其他网站的情况大局部的网站都采用了JS\CSS合并，局部采用了CSSSprites。

第一条：减少HTTP请求〔MakefewerHTTPrequests〕我们采用的方法合并CSS：css/v2/perties合并JS：js/v2/peritesCSSSprites：将大局部CSS图片拼成一整张图，可以大幅度减少HTTP请求数。

第一条：减少HTTP请求〔MakefewerHTTPrequests〕YSLOW评测、还可以改进的地方GradeConMakefewerHTTPrequestsThispagehas7externalJavascriptscripts.Trycombiningthemintoone.

Thispagehas10externalbackgroundimages.TrycombiningthemwithCSSsprites.大局部是tracker和googleJS代码及外联的局部图片，很难精简。

第二条：使用CDN〔UseaContentDeliveryNetwork〕分析 CDN俗称内容发布网络，可以将我们的静态内容发布到互联网的多台效劳器上，用户访问的时候会智能的选择距离较近、速度较快的效劳器，可以提高用户的访问速度，提高效劳器的负载，但是同时有一定的局限性，只适合发布静态的内容，内容的改变无法立刻同步到所有的效劳器上。

第二条：使用CDN〔UseaContentDeliveryNetwork〕解决方法 使用CDN。

第二条：使用CDN〔UseaContentDeliveryNetwork〕其他网站的情况几乎所有的大型网站都使用了商业或自己的CDN效劳

第二条：使用CDN〔UseaContentDeliveryNetwork〕我们采用的方法将静态图片内容发布到CDN上

第二条：使用CDN〔UseaContentDeliveryNetwork〕YSLOW评测、还可以改进的地方GradeFonUseaContentDeliveryNetwork(CDN)Thereare66staticcomponentsthatarenotonCDN.YoucanspecifyCDNhostnamesinyourpreferences.SeeYSlowFAQfordetails.由于我们的CDN效劳器不在YAHOO标示的列表中，所以此项得分较低。我们的CSS和JS没有放到CDN效劳器上。

第三条：防止无效的SRC或者HREF〔Avoidemptysrcorhref〕分析 即使浏览器遇到一个无效链接地址，他还是会发送请求到效劳器，并浪费效劳器的资源，同时可能由于某个图片无法显示，导致整个页面显示错乱。 这是V2中的一条

第三条：防止无效的SRC或者HREF〔Avoidemptysrcorhref〕解决方法 检查每一个链接地址是否有效。

第三条：防止无效的SRC或者HREF〔Avoidemptysrcorhref〕其他网站的情况防止无效的链接。

第三条：防止无效的SRC或者HREF〔Avoidemptysrcorhref〕我们采用的方法防止无效的链接

第三条：防止无效的SRC或者HREF〔Avoidemptysr