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

这本书是很久之前买的,今天回顾了一下,顺便记录一下笔记。
本书的副标题是“前端工程师技能精髓”可见这本书的牛逼之处。这本书也很薄,只有147页,但是每一章都是精髓。由于这本书每章提出了一个性能优化的方法,我们也就按照每张的具体内容给出吧。

《高性能网站建设指南》


减少HTTP请求

性能黄金法则:只有10%~20%的最终用户响应时间花在了下载HTML文档上,其余的80%~90%时间花在了下载页面中的所有资源(图片、JS、CSS、音频等)上。

优化方法:使用图片地图(map标签)、CSS Sprites(雪碧图)、内联图片(base64图片)、脚本和样式的合并等。

使用CDN

CDN(Content Delivery Network 内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。

优点:

  1. 可以选择网络阶跃数量最小的服务器,或者具有最短响应时间的服务器。
  2. 可以进行缓存。

缺点:

  1. 响应时间可能会受到其他网站的影响。
  2. 无法直接控制服务器所带来的特殊服务,如修改某个HTTP的响应头信息。
  3. 如果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缓存了可以提高性能这是肯定的,这也正是一些库默认使用了缓存,如果为了提高请求的准确性,个人觉的这条规则可以忽略。

-------------本文结束 感谢您的阅读-------------
0%