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

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

2. URL

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

3. DNS域解析

1. 看路由器上配置的DNS服务器上面有没有当前URL的地址，
2. 若有，直接返回对应IP给客户端

3. 若没有，进行迭代查询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