Web 性能优化

前记

好久都没有写博客了，罪过罪过，不能懒不能懒，这次记录一下web的性能优化方法，说到性能优化，就不得不从当你输入网址按下回车的那一刻说起

性能分治法

把大问题分成小问题分别处理

按下回车发生了什么

1. 当然是先去缓存中看看啦
2. 缓存没有，那就先DNS查询找IP地址
3. 找到IP地址先建立TCP链接
4. 建立后就可以发送HTTP请求了
5. 后台处理，我们等待
6. 接收HTML文件
7. DOCTYPE 确定解析的语法
8. 逐行解析
9. 有些标签在不同浏览器上显示
10. CSS同时下载，解析一个接一个（IE同时4个，谷歌同时6个）
11. JS并行下载，解析按顺序，但是JS执行一定阻塞HTMl渲染
12. 之后就是构建DOM树，CSS和JS了

解决方法

1、缓存

DNS查询后会留下缓存，下次访问后就会无需查询，另外设置响应头Cache-Control，使文件缓存，这样只要网站文件不更改就可以使用缓存

2、DNS查询

DNS查询会耗费时间，所以，我们要优化就要减少DNS查询，尽量减少域名

3、建立TCP链接

每次发送HTTP请求都建立TCP连接的话就太耗费时间了，所以我们可以使用连接复用，只需要在HTTP请求头加上keep-alive，在HTTP/2.0 甚至可以使用多路复用

4、发送HTTP请求

我们都知道发送请求是会带上cookie的，所以减少cookie体积可以加快发送速度，另外，浏览器是可以同时发送多个请求，但是相同域名发送请求会有限制，所以我们可以增加域名，但是这样就和第一步的解决方法冲突了，于是我们需要自己来权衡利弊

5、接收响应

设置ETag，这样只要响应文件未更改，就可以返回一个304表示未更改，使用以前的文件，也可以使用Gzip压缩文件，降低文件大小，接收到后再解压文件，这样可以加快下载速度

6、DOCTYPE

不能写错，这是确定渲染语法的，必须要写

7、CDN加速

使用CDN可以增加同时请求数量，也可以减少cookie体积，因为没有cookie。使用CDN可以加速，内容缓存在就近的地方，动态DNS，IP就近返回，内容分布网络，请求快

8、CSS放在head，JS放在body最后

之所以把link标签放抬头而script放body尾部，是因为浏览器遇到script标签时，会去下载并执行js脚本，从而导致浏览器暂停构建DOM。然而JS脚本需要查询CSS信息，所以JS脚本还必须等待CSSOM树构建完才可以执行。这将相当于CSS阻塞了JS脚本，JS脚本阻塞了DOM树构建。是这样子的关联才对。