[讲解]优化网站性能提高网站速度访问速度的14条实践

《[讲解]优化网站性能提高网站速度访问速度的14条实践》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、优化网站性能提高网站速度访问速度的14条实践相信互联网已经越来越成为人们生活中不可或缺的一部分。ajaxzflex等等富客户端的应用使得人们越加〃幸福〃地体验着许多原先只能在C/S实现的功能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发的,在性能方面,根据yahoo的调查,后台只占5%z而前端高达95%之多z其中有88%的东西是可以优化的。TheLifeofPage2.0eventhandlers.componcrts.XHR1

2、userrtcractKXiXHRsortoodsettlesHTML•Mut・cNMI■■Ubtrtwt以上是一张web2.0页面的生命周期图。工程师很形象地讲它分成了〃怀孕，岀生，毕业，结婚〃四个阶段。如果在我们点击网页链接的时候能够意识到这个过程而不是简单的请求-响应的话,我们便可以挖掘出很多细节上可以提升性能的东西。今天听了淘宝小马哥的一个对yahoo开发团队对web性能研究的一个讲座，感觉收获很大，想在blog上做个分享。相信很多人都听过优化网站性能的14条规则。更多的信息可见developer.yaho

3、o.com1.尽可能的减少HTTP的请求数[content]2.使用CDN(ContentDeliveryNetwork)[server]3.添加Expires头(或者Cache-control)[server]4.Gzip组件[server]5.将CSS样式放在iUtS］的上方[css]6.将脚本移动到底部（包括内联的）[javascript]7.避免使用CSS中的Expressions[css]8.将JavaScript和CSS独立成外部文件[javascript][css]9.减少DNS查询[content]

4、10.压缩JavaScript和CSS（包括内联的）[javascript][css]11.避免重定向[server]12.移除重复的脚本[javascript]13.配置实体标签（ETags）[css]14.使AJAX缓存在firefox下有一个插件yslow,集成在firebug中，你可以用它很方便地来看看自己的网站在这几个方面的表现。InspectP«rforB>wc«StatsCgponontsTools■Help*ConsoleITMeCSSScriotDOWBe*TSIo・PerformanceGrad

5、e:F(51)B1.MakefewerHTTPreqjests/F2.UseaCON>F3.AddanExpiresheaderVF4.Gzpcomponents》C5.PutCSSatthetopI>B6.PutJSatlheboctomI>B7.AvoidCSSexpresscnsDn/^A.M4ta1AwrlCAAoxtnrrv^l这是对用yslow对我的网站西风坊测评的结果,很遗憾，只有51分。呵呵。中国各大网站的分值都不高，刚测了一下，新浪和网易都是31分。然后yahoo（美国）的分值确实97分！可见ya

6、hoo在这方面作岀的努力。从他们总结的这14条规则,已经现在又新增加的20个点来看,有很多细节我们真得是怎么都不会去想，有些做法甚至是有些〃变态〃了。第一条、尽可能的减少HTTP的请求数（MakeFewerHTTPRequests）http请求是要开销的，想办法减少请求数自然可以提高网页速度。常用的方法,合并csszjs（将一个页面中的css和js文件分别合并）以及Imagemaps和csssprites等。当然或许将css,js文件拆分多个是因为css结构，共用等方面的考虑。阿里巴巴中文站当时的做法是开发时依然分

7、开开发，然后在后台对js,css进行合并,这样对于浏览器来说依然是一个请求”但是开发时仍然能还原成多个，方便管理和重复引用。yahoo甚至建议将首页的css和js直接写在页面文件里面，而不是外部引用。因为首页的访问量太大了，这么做也可以减少两个请求数。而事实上国内的很多门户都是这么做的。而csssprites是指只用将页面上的背景图合并成一张，然后通过css的background-position属性定义不过的值来取他的背景。淘宝和阿里巴巴中文站目前都是这样做的。有兴趣的可以看下淘宝和阿里巴巴的背景图。http:/

8、/www.csssprites.com/这是个工具网站，它可以自动将你上传的图片合并并给出对应的background-position坐标。并将结果以png和g讦的格式输出。第二条.使用CDN（内容分发网络）:UseaContentDeliveryNetwork说实话，对于CDN这一块自己并不是很了解，简单地讲，通过在现有的Internet中增加一层新的网络