关于网站性能优化准则

打算如今开始在博客里写点东西，也能为本身看过的书学过的知识作一个概括总结。
这几日拜读了Steve Souders的《高性能网站建设指南这本书》，虽然这本书可能已经有些老了，但薄薄的一个小册子里提出的网站性能优化的准则仍是很是有价值的。这些规则都有个共同点，就是用很小的工做就能得到很明显的性能提高，性价比极高。废话很少说了，总结一下书里的几点性能优化规则。

首先有一点须要说明的是书中所写的性能黄金法则：只有10%~20%的响应时间花在了下载HTML文档上，其他的80%~90%时间花在了下载页面的全部组件上。
这也是后面这些性能规则由来的核心。

规则一：减小HTTP请求。这本书的规则顺序是按照其重要性来排名的，减小HTTP请求做为第一个规则，足见其重要性。根据黄金法则，减小组件数量从而减小HTTP请求是最有效的性能优化方式，其中有几项技术值得提一下：

1. CSS Sprites。应该前端人都比较熟悉了，把图片整合到一个大图里，利用background-position来定位。

2. data:URL。值得一说把图片变为内联的，减小了图片请求，webpack里图片小于8kb就会转为base64的data:URL。

3. 合并脚本和CSS。

规则二：使用CDN。这个规则不用多说，分发内容使之更靠近终端用户，减小了请求时间。

规则三：添加Expires头。善用缓存，给长久不变的内容组件设置有效期较久的Expires头。

规则四：压缩组件。利用gzip等内容编码对文档或组件进行压缩，一般能将相应数据量减小70%左右。

规则五：将样式表放在顶部。页面在打开工程中逐步呈现，用户会以为页面快一些，也让用户在等待过程当中有一个良好的反馈。把CSS放在底部的话有可能出现白屏现象。

规则六：将脚本放在底部。页面下载脚本时会阻止其余内容下载与呈现，以防止浏览器的重绘重排。因此把脚本放在页面的底部不会阻止页面内容的呈现，并且页面一些可视化组件能够尽早下载而不被阻塞。

规则七：避免使用CSS表达式。CSS表达式会进行频繁的求值，致使了性能低下。

规则八：使用外部JavaScript和CSS。纯粹而言，内联更快一些，由于知足了规则一的减小HTTP请求，可是这个问题上，必定要考虑缓存带来的性能优化，外部文件颇有可能被缓存下来，从而提高了性能。

规则九：减小DNS查找。善用DNS缓存，好比持久链接。

规则十：精简JavaScript。移除没必要要的字符空格，咱们常见的.min.js就是如此。

规则十一：避免重定向。3xx的响应状态码表明着一股重定向的响应。其中URL结尾缺乏斜线形成的重定向须要特别注意，不要由于这一点失误损伤性能。

规则十二：删除重复脚本。

规则十三：配置ETag。提及这个不得不说条件请求If-Modified-Since和If-None-Match，都是用来进行缓存再验证。ETag的问题是服务器构造ETag时，尽管两个文件彻底同样，但若是处于不一样的服务器的话仍是会有不一样的ETag，增长了HTTP进行请求下载的次数，这对于后台是服务器集群的网站性能损伤很大。

规则十四：使Ajax可缓存。虽然Ajax是异步的，但也不能让等待响应的时间过长。优化准则的话参见上面的性能准则，其中善用缓存依然是咱们重点关注的。

书最后用这些准则分析了美国十大网站，发现有效利用这些规则性能有很大的提高空间，我也看了一下本身实习时候项目，发现可优化的地方很是多。之后的开发过程当中要谨记这些准则，让本身产品的用户得到更好的体验。