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了

解决方法

一、缓存

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

二、DNS查询

DNS查询会耗费时间，因此，咱们要优化就要减小DNS查询，尽可能减小域名

三、创建TCP连接

每次发送HTTP请求都创建TCP链接的话就太耗费时间了，因此咱们可使用链接复用，只须要在HTTP请求头加上keep-alive，在HTTP/2.0 甚至可使用多路复用

四、发送HTTP请求

咱们都知道发送请求是会带上cookie的，因此减小cookie体积能够加快发送速度，另外，浏览器是能够同时发送多个请求，可是相同域名发送请求会有限制，因此咱们能够增长域名，可是这样就和第一步的解决方法冲突了，因而咱们须要本身来权衡利弊

五、接收响应

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

六、DOCTYPE

不能写错，这是肯定渲染语法的，必需要写

七、CDN加速

使用CDN能够增长同时请求数量，也能够减小cookie体积，由于没有cookie。使用CDN能够加速，内容缓存在就近的地方，动态DNS，IP就近返回，内容分布网络，请求快

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

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