Yahoo团队提出的网站性能最佳体验的34条黄金守则

Yahoo团队提出的网站性能最佳体验的34条黄金守则。原文网址: http://developer.yahoo.com/performance/

Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容服务器cookieCSSJavaScript图片移动应用等七部分。

(四)Coockie、图片、移动应用 对Coockie的优化,对图片的优化,此外随着移动设备的流行,对于移动应用的优化也十分重要。这主要包括:Coockie:减小Cookie体积对于页面内容使用无coockie域名图片:优化图像优化CSSSpirite不要在HTML中缩放图像favicon.ico要小而且可缓存移动应用:保持单个内容小于25K打包组件成复合文本27、减小Cookie体积HTTPcoockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以减少用户的响应时间十分重要。有关更多信息可以查看TenniTheurer和PattyChi的文章“WhentheCookieCrumbles”。这们研究中主要包括:去除不必要的coockie使coockie体积尽量小以减少对用户响应的影响注意在适应级别的域名上设置coockie以便使子域名不受影响设置合理的过期时间。较早地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。28、对于页面内容使用无coockie域名

(三)JavaScript和CSS JavaScript和CSS的优化也提高网站性能的重要方面:CSS:把样式表置于顶部避免使用CSS表达式(Expression)使用外部JavaScript和CSS削减JavaScript和CSS用<link>代替@import避免使用滤镜JavaScript把脚本置于页面底部使用外部JavaScript和CSS削减JavaScript和CSS剔除重复脚本减少DOM访问开发智能事件处理程序17、把样式表置于顶部在研究Yahoo!的性能表现时,我们发现把样式表放到文档的<head/>内部似乎会加快页面的下载速度。这是因为把样式表放到<head/>内会使页面有步骤的加载显示。注重性能的前端服务器往往希望页面有秩序地加载。同时,我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户返回可视化的反馈,比如进程指针,已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。把样式表放在文档底部的问题是在包括InternetExplorer在内的

(二)服务器 Server 在网站服务器端上也有需要注意和改进的地方,它们包括:使用内容分发网络为文件头指定Expires或Cache-ControlGzip压缩文件内容配置ETag尽早刷新输出缓冲使用GET来完成AJAX请求11、使用内容分发网络用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。但是首先我们应该做些什么呢?按地域布置网站内容的第一步并不是要尝试重新架构你的网站让他们在分发服务器上正常运行。根据应用的需求来改变网站结构,这可能会包括一些比较复杂的任务,如在服务器间同步Session状态和合并数据库更新等。要想缩短用户和内容服务器的距离,这些架构步骤可能是不可避免的。要记住,在终端用户的响应时间中,有80%到90%的响应时间,用于下载图像、样式表、脚本、Flash等页面内容。这就是网站性能黄金守则。和重新设计你的应用程序架构这样比较困难的任务相比,首先来分布静态内容会更好一点。这不仅会缩短响应时间,而且对于内容分发网络来说它更容易实现。内容分发网络(ContentDeliveryNetwork,CDN)是由一系列分散到各个不同地理位置上的Web服务器组成的,它提高了网站内容的传输速度。用于向用户传输内容的服务

(一)内容部分 Content 其中内容部分一共十条建议:尽量减少HTTP请求减少DNS查找避免跳转缓存Ajxa推迟加载提前加载减少DOM元素数量用域名划分页面内容使frame数量最少避免404错误1、尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法,如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改,这可能会相对麻烦点,但即便如此也要把这个方法作为改善页面性能的重要一步。CSSSprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和background-position属性来显示图片的不同部分;图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变,但是可以减少HTTP请