-
查看浏览器缓存
- 如果资源未缓存,发送请求
- 如果资源被缓存,检验是否足够新鲜,是的话直接使用,否则发起请求验证
- 验证是否新鲜(强缓存表示在缓存期间不需要请求)
- 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 树)
转载于:https://juejin.im/post/5cb93cc56fb9a068b80d601c