我们这里要谈及的「Web性能优化」，是指在用户输入URL后，到页面显示出来所花的时间较少，而不是什么CPU占用资源少（这是指服务器端的性能优化）。既然知道了我们的目的，自然就要了解，我们从输入URL到页面显示是一个怎样的过程呢？然后在过程中逐一优化。
- 缓存
我们在浏览器输入URL后，浏览器会先看是不是有缓存，如果已经访问过该网页，则会有缓存，可以很快显示该网页。缓存也分很多种，后文会提及。
- DNS查询
我们在浏览器输入URL访问服务器，但是其实服务器要的不是这个URL，要的是「IP地址」，所以我们要把这个URL转换为IP地址，这个时候就需要查询DNS了，DNS查询就像一个电话簿。比如我们输入的URL相当于电话簿中的姓名（暂不考虑重名情况），这样就会对应一个电话号码（这个相当于IP地址）。
（1）浏览器缓存：首先会向浏览器的缓存中查找是否有访问记录
（2）操作系统缓存：在系统运行中的内存里查找是否有缓存。
（3）host文件：如果在缓存中查找不到，系统就会读取系统中预设的host文件。
（4）路由器缓存：有些路由器也有缓存功能。
（5）ISP DNS缓存：互联网服务提供商（比如中国电信）也会提供DNS服务，比较有名的是114.114.114.114
（6）顶级/根DNS服务器：根域名收到请求后，会判别这个域名是授予了哪个服务器，并且返回这个顶级DNS服务器的IP地址，客户端收到这个地址后便会访问这个顶级服务器，如果该服务器无法解析，该服务器就会返回它下一级的DNS服务器的IP，客户端再次访问，直到找到输入的URL对应的主机。
优化方案：
（1）减少DNS查询
每次DNS查询就是查找域名的过程，那么如果查找的域名越少，DNS查询就越少，所以我们应该尽量把资源放在同一域名下。（其实这么做也有其他问题，见下文）
- TCP连接
主要内容是：三次握手和四次挥手，此处不展开赘述。
优化方案：TCP连接复用，在HTTP请求头中的Connection加上keep-alive；HTTP2.0是多路复用。
HTTP请求
优化方案：
（1）减少Cookie体积。每个请求都会带上Cookie，所以Cookie小的话会加快速度。
（2）把静态资源放到CDN上，静态资源一般无需使用 Cookie，可以把它们放在使用二级域名或者专门域名的无 Cookie 服务器上，降低 Cookie 传送的造成的流量浪费，提高响应速度。
（3）使用Cache-Control。
（4）同时发送多个请求。这一步是浏览器自身会做的，一般浏览器访问一个域名会同时发送4~8个请求（根据浏览器不同而有所差异），为了同时发送多个请求，我们自然而然想到了增加域名数量（一般通过CDN）。
注意：这里出现了一个「矛盾」，在「DNS查询」步骤中的优化方案，我们明明是要减少域名数，但是这里怎么要增加呢？这个时候就要做到「权衡」。如果我的文件很少（比如我html，css，js都只有一个），那么就不如放在一个域名下面。接受响应
优化方案：
（1）ETag
MD5，请求一个文件带上ETag，服务器发现是最新的文件不需要更新，则会响应一个304 Not Modified的状态码，这样接受响应的体积就很小。
（2）使用Gzip压缩（注：已经是压缩格式的文件就不需要Gzip压缩了，如图片），接受的响应都是Gzip压缩的，只不过接收后浏览器都帮我们解压了。
接受完成（HTML）
DOCTYPE
优化方案：「不要写错了，也不要不写」，不然浏览器会“猜”给的文档是什么，可能一开始用HTML解析，然后再用XML解析，这样会浪费时间，还可能选择错误的模式。
- 逐行解析（普通标签，看到CSS，看到JS）
（1）在我们看到普通标签的时候（比如<h1>），CSS或者JS会阻塞它的渲染吗？（可以看看我的另一篇文章：https://www.jianshu.com/p/a50fac65d698）
（2）看到CSS的时候。下载CSS，在看下面还有没有CSS，有的话也同时下载，一个域名一共可以同时下载4~8个（根据浏览器而不同），但是解析的时候按顺序逐一解析的。简单来说就是「下载并行，解析串行」。
（3）看到JS的时候。
优化方案：
（1）使用CDN（针对CSS和JS），增加域名数，就增加请求数。
（2）CSS放到head中，JS放到body最后。CSS放后面一样会阻塞渲染，还不如放前面今早下载，有了样式的页面结构让用户先看到，JS放后面可以获取之前的节点。
除开以上的优化方案，还有一些。
- 懒加载
- 避免空的src的图片，如果写成「src=""」会造成不必要的请求，可以写成「src="about:blank"」
- 开发聪明的事件处理，比如「事件委托」。有时候页面看起来没那么快，可能是因为绑定到不同元素的大量事件处理函数执行了太多次，使用事件委托就可以提高效率。另外不必等到「onload」事件来开始处理DOM树，可以使用「DOMContentLoaded」，因为大多数时候我们只是想要处理的元素已经在DOM树中，无需等待所有图片被下载。
参考：
