前端性能优化

一、一次完整页面请求所发生的的事情

过程：

1.url解析

• 地址解析和编码
• HSTS
• 缓存解析
  

2.DNS域名解析

• 先进行本地DNS服务器解析，递归解析：

• 如果本地解析不到，再去域名服务器解析，迭代解析：

3.TCP三次握手建立连接：

4. 发送HTTP请求，服务器处理请求，返回响应结果

5.TCP四次挥手断开连接

5.浏览器渲染

二、前端性能优化

前端性能优化主要从上述过程中的关键节点进行优化，这也叫CRP。

1.缓存优化

客户端在向服务端发起请求之前要先检查是否有缓存，如果有缓存的话，直接将缓存渲染到页面，如果没有的话再发起请求。
(1）缓存位置

• Service Worker：浏览器独立线程进行缓存
• Memory Cache : 内存缓存
• Disk Cache：硬盘缓存
• Push Cache：推送缓存（HTTP/2中的）

一般情况下文存储在浏览器缓存中，数据存储在本地。

• 打开网页，地址栏输入地址： 查找 disk cache 中是否有匹配，如有则使用，如没有则发送网络请求。
• 普通刷新 (F5)：因为 TAB 并没有关闭，因此 memory cache 是可用的，会被优先使用(如果匹配的话)，其次才是 disk
  cache。
• 强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control:
  no-cache(为了兼容，还带了 Pragma: no-cache)，服务器直接返回 200 和最新内容。

（2）硬盘与内存

• 硬盘读取速度慢，存储内容多；
• 内存读取速度快，存储内容少。

（3）浏览器缓存
浏览器缓存分为强缓存和协商缓存
强