网站性能优化

优化网站性能的14条规则，如图

第一条、尽可能的减少HTTP的请求数

http请求是要开销的，想办法减少请求数自然可以提高网页速度。常用的方法，合并css，js(将一个页面中的css和js分别合并)以及Image maps和css sprites等。当然或许将css,js文件拆分多个是因为css结构，共用等方面的考虑。阿里巴巴中文站当时的做法是开发时依然分开开发，然后在后台对js，css进行合并，这样对于浏览器来说依然是一个请求，但是开发时仍然能还原成多个，方便管理和重复引用。yahoo甚至建议将首页的css和js直接写在页面文件里面，而不是外部引用。因为首页的访问量太大了，这么做也可以减少两个请求数。

而css sprites是指只有将页面上的背景图合并成一张，然后通过css的background-position属性定义的值来取它的背景图。

http://www.csssprites.com/ 这个工具网站可以自动将你上传的图片合并并给出对应的background-position坐标，并将结果以png和gif的格式输出。

第二条、使用CDN（内容分发网络）

简单来说，通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的cache服务器内，通过DNS负载均衡的技术，判断用户来源就近访问cache服务器取得所需的内容。这样可以有效减少数据在网络上传输的时间，提高速度。

第三条、添加Expire/Cache-Control头

现在越来越多的图片，脚本，css，flash被嵌入到页面中，当我们访问他们的时候势必会做很多次的http请求。其实我们可以通过设置Expires header来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。大多数的图片，flash在发布后都是不需要经常修改的，做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而直接从缓存中读取，这样再次访问页面的速度会大大加快。一个典型的http 1.1协议返回的头信息：

第四条、启用Gzip压缩

Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这样可以显著减少文件传输的大小。传输完毕后浏览器会重新对压缩过的内容进行解压缩，并执行。目前的浏览器都“良好”地支持gzip。不仅浏览器可以识别，而且各大“爬虫”也同样可以识别。而且gzip的压缩比例非常大，一般压缩率为85%，就是说服务器端100k的页面可以压缩到25K左右再发送到客户端。雅虎特别强调，所有的文本内容都应该被gzip压缩：html(php)、js、css、xml、txt...

第五条、将css放在页面最上面

将css放在页面最上面，这是因为ie,firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。css全称Cascading Style Sheets(层叠样式表单)。层叠即意味这后面的css可以覆盖前面的css，级别高的css可以覆盖级别低的css。既然前面的可以被覆盖，浏览器在它完全加载完毕之后再去渲染无疑也是合情合理的。在很多浏览器下，如ie，把样式表放在页面的底部问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以免重画页面元素，那用户只能看到空白页了。firefox不会阻止显示，但意味着当样式表下载后，有些元素可能需要重画，这导致闪烁问题。所以我们应该尽快让css加载完毕。

第六条、将script放在页面最下面

将脚本放在页面最下面的目的有那么两点：

1、因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中，当浏览器读到js执行语句的时候一定会把它全部解释完毕后会接下来读下面的内容。不信你可以写一个js死循环看看页面下面的东西还会不会出来。（setTimeout和setInterval的执行有点类似于多线程，在相应的响应时间之前也会继续下面的内容渲染。）浏览器这么做的逻辑是因为js随时可能执行location.href或者其他有可能完全中断此页面过程的函数。因此当然得等它执行完毕之后再加载。所以放在页面最后，可以有效减少页面可视元素的加载时间。

2、脚本引起的第二个问题是它阻塞并行下载数量。http/1.1规范建议浏览器每个主机的并行下载数不超过2个（IE只能为2个，其他浏览器如ff等都是默认设置为2个，不过新出的ie8可以达到6个）。因此如果你把图片文件分布到多台机器的话，你可以达到2个并行的下载。但是当脚本文件下载时，浏览器不会启动其他的并行下载。

当然对各个网站来说，把脚本都放到页面底部加载的可行性还是值得商榷的。就比如阿里巴巴中文站的页面。很多地方有内联的js，页面的显示严重依赖于此。

第七条、避免在css中使用Expressions

第八条、把javascript和css都放到外部文件中

这点不仅从性能优化上会这么做，用代码易于维护的角度看也应该这么做。把css和js写在页面内容可以较少2次请求，但也增大了页面的大小。如果已经对css和js做了缓存，就也就没有2次多余的http请求了。

第九条、减少DNS查询

在Internet上域名与IP地址之间是一一对应的，域名很好记，但计算机不认识，计算机之间的“相认”还要转换成ip地址。在网络上每台计算机都对应有一个对立的ip地址。在域名和ip地址之间的转换工作称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的时间，在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。yahoo建议一个页面所包含的域名数尽量控制在2-4个。这就需要对页面整体有一个很好的规划。

第十条、压缩javascript和css

压缩js和css的作用，显然是减少页面的字节数。容量小页面加载速度自然也就块。而且压缩除了减少体积以外还可以起到一定的保护作用。

第十一条、避免重定向

比如当你输入http://www.kuqin.com/的时候服务器会自动产生一个301服务器转向http://www.kuqin.com/,你看浏览器的地址栏就能看出来。这种重定向自然需要消耗时间的。发生重定向的原因还有很多，但是不变的是每增加一次重定向就会增加一次web请求，所有应该尽量减少。

第十二条、移除重复的脚本

不仅是从性能上考虑，代码规范上看也是这样。

第十三条、配置实体标签（ETags）

比较详细的说明《使用ETags减少Web应用带宽和负载》

第十四条、使AJAX缓存

文章转载《Yahoo前端优化十四条军规》