从输入 URL 到页面加载全过程

• 查看浏览器缓存

  • 若是资源未缓存，发送请求
  • 若是资源被缓存，检验是否足够新鲜，是的话直接使用，不然发起请求验证
  • 验证是否新鲜（强缓存表示在缓存期间不须要请求）
    • expires
    • cache-control

• 解析 URL 得到 协议、主机、端口、路径

• 组装 HTTP request 报文

• DNS 查询

• TCP 握手。应用层下发数据到传输层，指明端口号到网络层，网络层肯定 IP 地址而后指示数据传输要如何跳转路由器，最后封装成数据帧到数据链路层。

  • A => B (syn=1, seq=N)
  • B => A (syn=1, ack=N+1, seq=Y)
  • A => B (ack=Y+1, seq=Z)

• TLS 握手。

• 发送 HTTP 请求

• 服务端检验 HTTP 的缓存头部(协议缓存)，若是验证足够新鲜就返回 304，不然返回其余

  • ETag 和 If-None-Match 文件指纹，优先级更高
  • Last-Modified 和 If-Modified-Since 本地文件最后修改日期

• 浏览器接受请求，根据状况选择关闭 TCP 链接或者保留复用，断开链接四次握手：

  • A => B
  • B => A
  • B => A
  • A => B

• 检查 status code

• 若是资源可缓存，进行缓存

• 解码（Gzip）

• 解析 HTML 文档

  • 构建 DOM 树
  • 根据 css 构建 css rule tree
  • 关联以上构建渲染树（只包含可见节点）
  • Layout
  • Painting

• 初始的 HTML 被彻底加载和解析后会触发 DOMContentLoaded 事件(DOM 树)