Web性能优化——雅虎军规

来源：互联网发布：小甲鱼c语言第一章编辑：程序博客网时间：2024/05/18 02:01

在浏览器刚刚出现时，Web页面是非常简单的。没有复杂的设计、华丽的布局以及炫酷的特效。当时的网页就如同报纸一般，很简单、很朴素。但是随着Ajax技术的出现、CSS3以及V8引擎的问世，突然之间，web世界发生了翻天覆地的变化。从此，网页不再是报纸一样，他变得越来越丰富多彩，复杂多变，呈现的效果也让人惊叹不已。但随之而来的一些问题也开始暴露出来，其中最重要的一点便是Web性能问题。

业界的先锋之一雅虎的工程师们早为我们总结了有关Web性能优化的一系列优秀的实践，大家称之为雅虎军规。综合来看，雅虎军规共七大类，35条。

内容

尽量减少HTTP请求次数

终端用户响应的时间中，有80%用于下载各项内容，这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数，这是提高网页速度的关键步骤。

减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。

合并文件：合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，例如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对比较麻烦，但即便如此也要把这个方法作为改善页面性能的重要一步。
CSS Sprites：CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分。
DataURI：DataURI 允许在HTML文档中嵌入小文件，可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码，减少 HTTP 请求，加快小图像的加载时间。经过Base64 编码后的文件体积一般比源文件大 30% 左右。

减少页面的HTTP请求次数是你优化网站性能首先要做的一步，这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的博文《Browser Cahe Usage – Exposed》中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。

减少DNS查找
让Ajax可缓存
延迟加载组件
预加载组件
减少DOM元素的数量
跨域分离组件
尽量少用iframe
杜绝404

服务器

使用CDN（Content Delivery Network）
添上Expires或者Cache-Control HTTP头
Gzip组件
避免重定向
尽早清空缓冲区
对Ajax用GET请求
避免图片src属性为空

CSS与JavaScript

将CSS样式放在页面上方
避免使用CSS表达式
将脚本放到页面底部
将JavaScript和CSS独立成外部文件
压缩JavaScript和CSS
移除重复的脚本
配置实体标签（ETags）
尽量减少DOM访问
用智能的事件处理器
选择舍弃@import
避免使用滤镜

减小Cookie体积
把组件放在不含cookie的域下

图片

优化图片
不要用HTML缩放图片
用小的可缓存的favicon.ico

移动

保证所有组件都小于25K
把组件打包到一个复合文档里

阅读全文

0 0