《高性能网站建设指南》读书笔记
这本书是很久之前买的,今天回顾了一下,顺便记录一下笔记。 本书的副标题是“前端工程师技能精髓”可见这本书的牛逼之处。这本书也很薄,只有147页,但是每一章都是精髓。由于这本书每章提出了一个性能优化的方法,我们也就按照每张的具体内容给出吧。
减少HTTP请求
性能黄金法则:只有10%~20%的最终用户响应时间花在了下载HTML文档上,其余的80%~90%时间花在了下载页面中的所有资源(图片、JS、CSS、音频等)上。
优化方法:使用图片地图(map标签)、CSS Sprites(雪碧图)、内联图片(base64图片)、脚本和样式的合并等。
使用CDN
CDN(Content Delivery Network 内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。
优点:
- 可以选择网络阶跃数量最小的服务器,或者具有最短响应时间的服务器。
- 可以进行缓存。
缺点:
- 响应时间可能会受到其他网站的影响。
- 无法直接控制服务器所带来的特殊服务,如修改某个HTTP的响应头信息。
- 如果CDN服务的性能下降,你的工作质量也会随之下降。
添加Expires头信息
Expires响应头:
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响应头:
Cache-Control: max-age=31526000
对于HTML等经常变动的资源,不应该使用长久的Expires头信息。为了确保用户能获取资源的最新版本,需要在所有HTML页面中修改资源的文件名(如加版本号或者hash值)。
压缩资源
从HTTP1.1开始,web客户端可以通过HTTP请求中的Accept-Encoding
头来表示对压缩的支持:
Accept-Encoding: gzip,deflate
web服务器通过响应中的Content-Encoding
来通知web客户端,使用了压缩:
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表达式真的很少使用了,估计大多数人还不知道这玩意,谷歌浏览器都不支持:
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
头信息:
Connection: Keep-alive
精简JS和CSS
其实就是把JS和CSS代码压缩。所谓压缩就是去掉空格、换行符和制表符并进行一些优化(比如CSS使用0代替0px等)。
避免重定向
要避免响应码为301或者302这样的请求,会导致页面变慢。
删除重复脚本
这个就不用说了,提高代码的利用率。
配置或删除ETag
ETag(Entity Tag,实体标签)是web服务器和浏览器用于确定缓存资源的一种有效机制。它是唯一表示了一个资源的一个特定的版本的字符串。唯一的格式约束是该字符串必须用引号引用起来。
ETag: "10c24bc-4ab-457e1c1f"
通常应用处于一个机子的时候那么建议配置ETag,但是如果应用处于一个集群的时候,建议不使用ETag。因为浏览器如果从集群的一台机子中获取了资源,然后再次请求资源的时候如果是另一台的时候,那么两个机子生成的ETag往往是不一样的,这样就会使得缓存失效。
使Ajax可缓存
将Ajax缓存了可以提高性能这是肯定的,这也正是一些库默认使用了缓存,如果为了提高请求的准确性,个人觉的这条规则可以忽略。
- 由dual导致的一个潜在的监控问题(r7笔记第3天)
- 剑指Offer——编程题的Java实现
- Python中if __name__ == "__main__": 的作用
- 每周算法练习——大数的乘法问题
- Java基础-25(01)图形用户界面编程GUI
- 每周算法练习——n皇后问题
- dg broker配置的问题及分析 (r7笔记第22天)
- 备库搭建中的一波三折(r7笔记第21天)
- Java基础-25(02)图形用户界面编程GUI
- 每周算法练习——最近对问题
- Java基础-25(03)图形用户界面编程GUI
- 数据结构和算法——用动态规划求解最短路径问题
- 备库报警邮件的分析案例(一) (r7笔记第14天)
- 数据结构和算法——动态规划
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法