Web性能优化
什么是Web性能优化？
一句话，网站加载快。一切优化都是为了提升用户体验，所以从用户输入url回车并看到网页的这个过程中与前端相关的部分都是可以优化的对象。
可以从哪些方面进行Web性能优化？
1.缓存
当访问某个页面时，浏览器会先检查本地有没有缓存。
方法：如果有缓存，就使用本地缓存的页面；如果没有缓存，就访问服务器。
2.DNS 查询
浏览器访问某网站的服务器，要先进行DNS查询。也就是，拿到地址栏中的地址，去 DNS服务器查询相应的IP地址，然后使用IP地址去访问该网站的服务器。
方法：减少DNS查询的次数，即，尽量减少域名。
举例来说，如果需要请求a.com/index.css和b.com/index.js两份文件，那么就要进行两次DNS查询；这样我们可以把css文件和js文件放在同一个网站，这样就只要进行一次DNS查询。
3.建立TCP连接（与前端无关）
方法：连接复用。即，在HTTP协议中加上一个请求头keep-alive，服务器就会保持连接，当第二次请求时，就复用之前的那个连接。或者直接使用HTTP/2.0协议支持多路复用。
4. 发送 HTTP 请求
HTTP 请求有 4 部分：
第一部分：请求行，不能优化。
第二部分：请求头。方法：不要滥用Cookie；减少Cookie体积。
第三部分：回车。
第四部分：请求的内容。方法：在请求头中使用Cache-Control，可以不发送请求，使用本地的缓存文件。
方法：还可以同时发送多个HTTP请求。浏览器会自己做这件事，比如同时请求多个CSS和JS。但是不同的浏览器存在着差别：IE浏览器最多只能同时请求4个文件，Chrome浏览器最多可以同时请求 8 个文件。
-
问题：以IE为例，IE最多只能同时请求4个文件，但如果能同时请求8个文件，那么请求速度不就加快了吗？
-
答：由于IE只能从同一域名同时请求4个文件，所以我们可以将文件放在不同域名，那么IE就可以从不同域名，同时请求超过4个文件。
但是这与上面第2步冲突了。第2步提到，要减少域名，这里又说把文件放到不同的域名，那就要增加域名。
那么这里，我们就要做个“权衡”，具体情况具体分析：
如果文件多，可以放到不同域名，以此减少浏览器请求的时间（多域名）；
如果文件少，就可以放到一个域名，以此减少DNS查询时间（少域名）。
5. 接收响应
方法1：使用ETag。ETag可以做到，当服务器发现你请求的文件是最新的，就不给你再发送文件，而是发送 304，让你使用上次发送过的文件。
方法2：使用Gzip。服务器将html、css、js等文件压缩，浏览器接收压缩后的文件。
但是浏览器在进行解压时，又会耗费CPU，这似乎又冲突了，所有又要做“权衡”：
如果文件大，就用Gzip；
如果文件小，就不用Gzip。
6. 接收完成，得到HTML文件
这一步可以不用优化。
7. 解析HTML
解析HTML的时候，有以下步骤：
查看DOCTYPE，根据DOCTYPE选择使用html或者xml等
方法1：DOCTYPE标签不能写错，也不能不写，否则可能导致浏览器进入“怪异模式”。
开始逐行解析
方法2：不要写太多无用的标签。
看到标签，浏览器会干嘛呢？Chrome浏览器不会立即渲染该标签，它会等所有CSS 加载完了，再渲染该标签。而IE（也可能是FireFox）不等CSS加载完，会立即渲染该标签。
8.CSS和JS
当浏览器碰到CSS和JS时，会同时做两件事：
下载CSS或JS；
继续往下看，还有没有CSS，如果有，就同时下载第二个CSS或JS。上面提到，Chrome最多可以同时下载8个文件，IE最多可以同时下载4个文件。需要注意的是，下载是并行的，而解析是串行的。
方法1：把CSS文件和JS文件放到CDN（内容分发网络），增大同时下载的数量。
方法2：把CSS文件放到head标签，JS文件放到body标签最后，这样可以尽早显示页面，还可以让JS正确获取到节点。
方法3：还可以把多个文件合并到一个文件，以减少请求的次数（但是下载量会变大）。
其他优化方法
延迟加载（懒加载）；
避免空src的图片，可以写成<img src="about:blank"/>；
避免使用@import引入CSS文件。
其他问题：
1.CSS渲染时，会阻塞HTML渲染吗？
答：Chrome会，IE不会。Chrome会等所有CSS加载完毕，然后再渲染HTML；而IE 碰到HTML标签时，会立即渲染该标签，等CSS加载完毕时，如果发现CSS改变了该标签的样式，就会回头重新渲染该标签。
2.JS 渲染时，会阻塞HTML渲染吗？
答：Chrome和IE都一定会阻塞HTML渲染。
怎么看某个网站有没有优化好呢？
控制台 -> Audits -> Run audits 。
