代码改变世界

《高性能网站建设指南》笔记

2010-12-19 17:14 横刀天笑 阅读(...) 评论(...) 编辑 收藏

前几天因为要对项目进行一些前端优化,所以找出这本书,发现前端优化也是非常有意思的,而且稍微做一下就能收到良好的效果,比起后端优化的效果更为明显。下面是对这本小书的一个总结。

减少HTTP请求

HTTP 1.0规定浏览器同一时刻只能向同一主机发送四个请求,HTTP 1.1是两个,所以要尽可能的减少页面上HTTP请求的数量,让请求尽快完成。所以需要尽可能的将JavaScript和CSS合并;使用CSS精灵合并图片,使用Image Map合并图片;使用data URL的方式内联图片。

使用CDN

添加Expires头

当浏览器请求一些本来在浏览器缓存中的内容时,如果没有Expires头明确指出该内容是否过期,浏览器就会发送一个条件请求到服务器,该请求包含有浏览器缓存中内容的最后修改时间,服务器将该时间与服务器上的版本对比,如果没有修改责回应304响应,如果修改了责返回200,并跟上内容。这样就会发生这样的情况:浏览器中的内容实际并没有过期,但还是发送了条件请求。为了避免这种无谓的条件请求,一定要添加Expires头。

压缩组件

在服务器端启用gzip压缩

启用gzip压缩会带来70-80%的压缩比率。但是,因为并不是所有的浏览器都支持gzip压缩,在碰到有代理缓存时会碰到问题:比如之前一个在代理后的客户端请求了页面,该客户端支持gzip压缩,然后服务器将压缩后的内容发给该客户端,这时代理也会缓存一份。然后另外一个也在该代理后的客户端访问了该页面,但是该客户端却不支持压缩,代理却将压缩过的页面发送给它,这样就会出现问题。解决方法是在HTTP头里增加Vary: Accept-Encoding,这样代理缓存就会根据浏览器是否支持压缩来决定是否发送缓存。

将样式表放在顶部

因为样式表会影响页面的布局,如果样式表放到页面顶部以下位置,如果浏览器一边接受内容一边渲染,这样就有可能碰到先前的渲染要被样式表所改变,这样就会带来无谓的渲染,所以一般浏览器都会等待样式表加载完毕后再进行渲染,这样就会影响用户体验。Web规范里也规定了样式表只应该出现在HEAD标签内。

将脚本放到底部

因为脚本有前后依赖的问题,有的脚本中还可能含有document.write这种与位置相关的语句,所以浏览器一般无法并行下载脚本,而且当前脚本的下载会阻塞后面内容的下载,而且一般脚本都是等到页面加载完毕后才开始起作用,所以最好将脚本放到页面的底部。

使用外部JavaScript和CSS

使用外部脚本和样式表可以对其进行缓存。

减少DNS查找

虽然使用更多的不同的DNS可能提高HTTP并行下载的数量,但是这会增加DNS查找的时间,这里存在一个平衡点,建议一般一个网页上使用两个不同的DNS就可以了。

补充

将静态内容和动态内容分开。静态内容一般不需要Cookies,分开后可以完全禁用Cookies,减少HTTP响应头的大小。除此之外,Cookies还有一个path属性,大部分网站都将其设置为默认的root:/,这样会导致所有的路径,不管需不需要Cookies都会发送Cookies,所以最好将需要Cookies和不需要Cookies的分为不同路径,然后设置具体的path。