-
查看浏览器缓存
- 如果资源未缓存，发送请求
- 如果资源被缓存，检验是否足够新鲜，是的话直接使用，否则发起请求验证
- 验证是否新鲜（强缓存表示在缓存期间不需要请求）
- 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 树)
