1. 从输入url到页面加载完成

卸载旧有页面--unload
根据这个URL依次查看【浏览器缓存】-【系统缓存】-【路由器缓存】，若缓存中有，跳到第5步，否则进入第3步
向DNS请求当前URL对应的IP
根据IP建立TCP连接（三次握手）
发起HTTP请求--request
服务器处理请求，浏览器接收HTTP响应--response
解析响应，渲染页面，构建DOM树--processing
加载完成--onload
关闭TCP连接（四次挥手）

2. URL

协议名：HTTP、HTTPS、FTP、FILE
域名：xxx.xxx.xxx.xxx
端口号：xxx
例如url: http://www.baidu.com
协议名：http
域名和端口号需要解析www.baidu.com来获得

3. DNS域解析

看路由器上配置的DNS服务器上面有没有当前URL的地址，
若有，直接返回对应IP给客户端
若没有，进行迭代查询DNS集群服务器，按照顺序一步步获取
3.1 在根域服务器中查找 .cn，返回顶级域服务器地址
3.2 在顶级域服务器中查找URL，返回对应二级域服务器地址
3.3 在二级域服务器中查找URL，返回对应子域服务器地址
3.4 在子域服务器中查找URL，返回对应的IP地址

DNS域名查找.jpg

3.1 寻找资源--优化点

架设DNS镜像服务器（镜像root Server、TLD Server和Name Server里面的内容）
使用CDN（较少cookie携带最快找到JS文件）

4. TCP连接

TCP连接.png

5. HTTP报文

General概要（常见包括）
- request url
- request method -- (GET、POST、PUT、DELETE、HEAD、OPTIONS...)
- status code -- (200 304 403 404 500...)
- remote adress
请求头（常见包括）
- content-type(希望接收端（服务器）按什么类型去解析)
  - text/html
  - application/x-www-form-urlencoded
  - application/json
  - multipart/form-data
- accept(希望接收端（服务器）返回什么类型)
  - text/html
  - application/json
- cookie
- connection
  - keep-alive(长连接相关)
- cache-control
  - no-store(优先级最高)
  - no-cache
  - max-age
- origin(校验【跨域】相关)
请求体
- key/value松散结构
- json结构
响应头
- cache-control
  - no-store(优先级最高)
  - no-cache
  - max-age
- expires(失效时间，服务器时间)
- ETag(配合If-None-Match或If-Match使用)
  - 一般使用MD5算法，获得一个唯一值，作为标签
  - 注意状态码 304或412
- Last-Modify(配合If-Modified-Since或If-Unmodified-Since)
  - 注意状态码 304或412
- Access-Control-Allow-Credentials (【跨域】是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回)
- Access-Control-Allow-Origin (【跨域】指定允许其他域名访问，一般是nginx服务器地址)

5.1 加载资源--优化点

使用新的HTTP协议
资源压缩
- Gzip压缩
- 雪碧图
- 使用字体图标(推荐iconfont)，或css icon
工程化（webpack等工具）
- 资源整合
- 去除冗余
- 拆包（功能性、业务性）
懒加载
- 滚动加载
- 图片懒加载
- 组件懒加载
- 路由懒加载
预处理
- preload
- prefetch
- preconnect
防抖和节流

6. 缓存

缓存策略.png

强缓存
优先级：Cache-Control > Expires
- Cache-Control
  - 可以控制是否使用缓存策略
  - 使用max-age中的相对时间（秒）类控制缓存的效时间
- Expires
  - 保存的是一个以GMT时间为格式的服务器绝对时间，但是若服务器和客户端的时间有差，则会不准确
协商缓存
优先级：ETag > Last-Modify
- ETag
  - 发送If-None-Match属性，值为ETag的值给后端，后端比对后告知浏览器是否使用本地缓存
  - 时效性可以精确到秒之内
  - 可以辨别文件定时生成相同内容的情况
  - 每次服务器都需要进行读写，消耗大
- Last-Modify
  - 发送If-Modified-Since属性，值为Last-Modify的值为后端，后端进行时间比较后告知浏览器是否使用本地缓存
  - 时效性只能精确到秒
  - 无法辨别文件定时生成相同内容的情况
  - 每次服务器只需要进行读的操作，消耗小
离线缓存
代码级别缓存

7. 页面渲染

DOM树.png

CSSOM树.png

在浏览器还没接收到完整的 HTML 文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念：Reflow和Repaint。

Reflow，也称作Layout，中文叫回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树，这个过程称为Reflow。

Repaint，中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就OK了，这个过程称为Repaint。

所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。

7.1 渲染和用户体验--优化点

FP阶段
- 增加loading动画
- 骨架屏
- SSR
- 预渲染(无头浏览器)
FCP阶段
- 减少重排重绘
- 重要div提前(比如圣杯布局，将中间div节点提前)

8. 关闭TCP连接

关闭TCP连接.png

参考文献：
https://www.cnblogs.com/daijinxue/p/6640153.html
https://www.cnblogs.com/lmh001/p/9928517.html
https://blog.csdn.net/u012375924/article/details/82806617

【性能优化】基础