1. DNS 解析：将域名地址解析为 ip 地址

  • 浏览器 DNS 缓存
  • 系统 DNS 缓存
  • 路由器 DNS 缓存
  • 网络运营商 DNS 缓存
  • 递归搜索

2. TCP 连接，TCP 三次握手

3. 发送请求 —— http 报文

4. 接收响应

5. 渲染页面

  • 遇见 HTML 标记，浏览器调用 HTML解析器解析成 Token 并构建成 dom 树；
  • 遇见 style/link标记， 浏览器调用 css 解析器，处理 css 标记并构建 cssom 树；
  • 遇见 script 标记，调用 javascript 解析器，处理 script 代码（绑定事件，修改 dom 树/cssom 树）；
  • 将 dom 树和 cssom 树合并成一个渲染树；
  • 根据渲染树计算布局，计算每个节点的几何信息（布局）；
  • 将各个节点颜色绘制到屏幕上；
    注意： 如果 dom 树或者 cssom 树被修改了，可能会执行多次布局和渲染。实际页面中，这些上面的步骤都会执行多次。

6. 断开连接， TCP 四次挥手