这本书是很久之前买的，今天回顾了一下，顺便记录一下笔记。
本书的副标题是“前端工程师技能精髓”可见这本书的牛逼之处。这本书也很薄，只有147页，但是每一章都是精髓。由于这本书每章提出了一个性能优化的方法，我们也就按照每张的具体内容给出吧。
减少HTTP请求
性能黄金法则：只有10%
20%的最终用户响应时间花在了下载HTML文档上，其余的80%90%时间花在了下载页面中的所有资源（图片、JS、CSS、音频等）上。
优化方法：使用图片地图（map标签）、CSS Sprites（雪碧图）、内联图片（base64图片）、脚本和样式的合并等。
使用CDN
CDN（Content Delivery Network 内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。
优点：
- 可以选择网络阶跃数量最小的服务器，或者具有最短响应时间的服务器。
- 可以进行缓存。
缺点：
- 响应时间可能会受到其他网站的影响。
- 无法直接控制服务器所带来的特殊服务，如修改某个HTTP的响应头信息。
- 如果CDN服务的性能下降，你的工作质量也会随之下降。
添加Expires头信息
Expires响应头：
1 | Expires: Sun, 25 Mar 2029 09:16:01 GMT |
如果某个资源使用这个响应头那么该资源会在这个时间内使用缓存。
HTTP1.1引入了Cache-Control头来克服Expires的限制，Cache-Control使用max-age指令指定资源被缓存多久。它以秒为单位定义了一个时间，如果资源从上次请求的秒数到本次请求小于max-age，浏览器就使用缓存中的资源，就可以避免额外的HTTP请求。Cache-Control的优先级高于Expires，如果两者都有的时候对于支持HTTP1.1的浏览器使用的是Cache-Control，不支持的使用Expires。
Cache-Control响应头：
1 | Cache-Control: max-age=31526000 |
对于HTML等经常变动的资源，不应该使用长久的Expires头信息。为了确保用户能获取资源的最新版本，需要在所有HTML页面中修改资源的文件名（如加版本号或者hash值）。
压缩资源
从HTTP1.1开始，web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持：
1 | Accept-Encoding: gzip,deflate |
web服务器通过响应中的Content-Encoding来通知web客户端，使用了压缩:
1 | Content-Encoding: gzip |
通常情况下图片和PDF不应该压缩，因为他们已经压缩过了。一般大于1KB或2KB的文件进行压缩。mod_gzip_minimum_file_size指令（Apache服务器）控制希望压缩文件的最小大小，默认是500B。
将CSS放在顶部
也就是在head标签中使用link标签引入CSS。如果放在html文档的底部的时候，加载CSS会导致DOM回流（重排），浪费不必要的计算。
将JS放在底部
也就是把JS放在body标签内部的最下面来引入。
HTTP1.1建议浏览器从每个主机名并行地下载2个资源（不同浏览器的实现不同，可能不是2个），但是JS却不一样，JS下载时只有一个，而往往JS也是比较大的所以会阻塞其他资源的下载。将JS放在底部将不会阻塞后面内容的呈现，也不会阻塞后面其他资源的下载，还可以防止DOM操作报错。
避免CSS表达式
现在CSS表达式真的很少使用了，估计大多数人还不知道这玩意，谷歌浏览器都不支持：
1 | background-color: expression((new Date()).getHours() % 2 ? "red" : "blue") |
使用外部JS和CSS
单纯来讲，使用内联引入资源比外部引入快30%~50%，主要是因为外部资源需要承担更多的HTTP请求。但是有缓存的时候就差不多了，但是放在外部还可以实现资源的复用。
减少DNS查找
DNS将会把域名映射到ip上。减少DNS查找的意思就是浏览器和web服务器愉快的通讯着，并保持TCP连接打开的状态，就没有理由进行DNS查找。服务器可以设置TTL（Time-to-live）值告诉客户端DNS记录可以缓存多久。当然也可以设置Keep-alive头信息:
1 | Connection: Keep-alive |
精简JS和CSS
其实就是把JS和CSS代码压缩。所谓压缩就是去掉空格、换行符和制表符并进行一些优化（比如CSS使用0代替0px等）。
避免重定向
要避免响应码为301或者302这样的请求，会导致页面变慢。
删除重复脚本
这个就不用说了，提高代码的利用率。
配置或删除ETag
ETag（Entity Tag，实体标签）是web服务器和浏览器用于确定缓存资源的一种有效机制。它是唯一表示了一个资源的一个特定的版本的字符串。唯一的格式约束是该字符串必须用引号引用起来。
1 | ETag: "10c24bc-4ab-457e1c1f" |
通常应用处于一个机子的时候那么建议配置ETag，但是如果应用处于一个集群的时候，建议不使用ETag。因为浏览器如果从集群的一台机子中获取了资源，然后再次请求资源的时候如果是另一台的时候，那么两个机子生成的ETag往往是不一样的，这样就会使得缓存失效。
使Ajax可缓存
将Ajax缓存了可以提高性能这是肯定的，这也正是一些库默认使用了缓存，如果为了提高请求的准确性，个人觉的这条规则可以忽略。