之前整理过一篇 浅谈 前端性能优化，时隔三月，本篇博客主要对性能优化知识进一步梳理。
所谓 web 性能优化，就是让页面访问的更快。用户输入 URL 到看到整个页面的过程发生的过程，有哪些地方可以做优化？
- DNS解析域名
- 发起TCP连接（三次握手）
- 浏览器发送HTTP请求（请求体，请求头，请求体）
- 服务器接收请求并发送响应（状态码，响应头，响应体）
- 断开TCP连接（四次挥手）
- 浏览器解析、渲染页面
DNS解析域名
浏览器输入网址，直到由DNS服务器解析出IP地址后，再去访问Web服务器，去获取网站资源。cdn也是在这个DNS解析的过程中起作用。
HTTP 缓存
首先请求 html，再去请求 CSS、JS。 HTTP缓存提高第二次加载的速度，查看cache-control: max-age就是过期时间。
在 max-age 时间内有版本更新，如何清理缓存的css与js？将文件以 hash 做后缀处理。
注意：只能给CSS、JS、图片设置 HTTP 缓存，html永远是不缓存的。
cdn 原理
- 为域名开通CDN：在DNS服务器里添加CDN专用的解析记录，让域名被解析之后返回CDN网络专用服务器的IP地址。
- 浏览器去访问CDN网络专用服务器，会返回一个CDN负载均衡服务器的IP地址，专门用来请求设备分配合适的CDN服务器的。
- 负载均衡服务器会根据浏览器的IP地址，在cdn网络中寻找到一个最靠近、被分配的访问任务不多的CDN服务器，把它IP地址返回给浏览器。
- 浏览器访问CDN服务器，获取网络资源。
CDN 回源
在为某个域名开通CDN时，会在CDN后台进行设置（告诉cdn网络，该域名的原始Web服务器的IP地址（源站IP）），CDN节点服务器到源站拉取资源，重新设置缓存的过程叫回源。 如果这台cdn服务器上没有用户需要的网络资源，或者缓存失效，会去上一层CDN缓存服务器中去拉取，这层找不到就向上找，直到找到源站去拉取，然后在刚才经过的每一层查而不得的cdn服务器做缓存，最后由这个cdn服务器发送资源给浏览器。
增加域名
浏览器限制同域名同时最多发送一定数量的请求，就是最大并发请求数限制，当请求数过多时，会分批发送，这样就增加了等待时间。
对于这种并发限制，可以通过增加域名的方式优化。假设最大并发数为 8，那我们就把N个资源URL替换成 N/8 个不同域名，这样就有 N/8 个资源可以同时请求加载。
例如，访问淘宝时：
- 主域名：ai.taobao.com
- cdn域名：g.alicdn.com
访问有道写作时：
- 主域名：write.youdao.com
- cdn域名：shared.ydstatic.com 存放js、css、图片等小文件资源
除此之外，这样做可以实现 cookie-free。每个cookie大概是4k，cookie会随着请求上传，如果发送全部 20 个请求就是 80k，只在主域名的请求时携带Cookie，将静态资源 CSS、JS 在其他域名的请求没必要携带 Cookie.
页面渲染快
- 优化 CSS 代码：重复的属性选择器尽量合并
- 优化 CSS JS 加载：先加载 CSS，再加载JS（CSS放在head里，JS放在body底部）
- 懒加载：先不加载第二屏
- 预加载：在用户点下一页之前提前加载出来（会浪费带宽）
后端
- 开启 gzip 压缩算法
- keep-alive 连接复用
