从输入 URL 到页面展示到底发生了什么？ ​

• 推荐参考 从输入 URL 开始建立前端知识体系

步骤 ​

1. 输入网址并解析
   1. URL 解析
   2. HSTS
   3. Service Worker
   4. 浏览器缓存
      1. 强缓存
      2. 协商缓存
2. 建立连接
   1. DNS 域名解析
      1. 递归查询
      2. 迭代查询
   2. TCP/IP 连接：三次握手
   3. HTTP 请求
      1. HTTP/0.9
      2. HTTP/1.0
      3. HTTP/1.1
      4. HTTP/2
      5. HTTP/3
   4. HTTPS（TSL 四次握手）
3. 服务器处理请求并返回 HTTP 报文
4. 浏览器渲染页面
   1. DOM 树
   2. CSS 对象模型 (CSSOM)
   3. 布局树 Layout Tree
   4. 渲染
      1. 创建图层
      2. 回流和重绘
   5. 首屏加载完成
   6. 可交互
5. 断开连接：TCP 四次挥手

详解 ​

• URL 解析，域名解析。涉及到 DNS 寻址的过程，获取对应的服务器 IP 地址
• 缓存检查。首先检查强缓存，其次是协商缓存。
  • 如果强缓存生效，则直接从浏览器缓存获取资源
  • 如果强缓存失效，则浏览器向服务器发起一个 http 请求，当然这中间还有一个 tcp 三次握手的一个过程。建立连接后，服务器检查资源是否更改，如果没有更改，则返回 304 告诉浏览器读取缓存，否则响应 200 并发送资源文件给浏览器
• 拿到资源文件后，浏览器开始解析并构建 dom 树和 cssom 树。这中间又涉及两种过程。
  • 如果有 js 脚本，那么 cssom 树的构建会阻塞 js 的执行，js 的执行会阻塞 dom 树的构建
  • 如果没有 js 脚本，那么 cssom 树的构建和 dom 树的构建是并行的，当然大部分网页都会包含 js 脚本。
• 有了 cssom 树和 dom 树后，就开始构建 render tree。render tree 并不是和 dom 树一一对应的，render tree 并不包含 display:none 等元素，以及 style，link，head 这些标签。
• 构建完 render tree，布局（Layout，也叫重排）阶段会为每个节点计算精确的位置和大小信息。
• 布局阶段完成后，就是绘制阶段（paint），将各个节点绘制到屏幕上，页面就呈现出来了。