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

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

减少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。