导航

什么是浏览器的导航，它有什么流程？

祭出一张 W3C (opens new window) 规范中的神图

该图中详细阐述了浏览器加载页面时触发的所有行为（钩子）的流程，这一过程一般成为导航（Navigation）。所有钩子均可通过 performance.timing 访问得到：

• Prompt for unload：提示卸载。打开新页面的瞬间，准备卸载之前页面（如果有的话）的 document。这之后马上记录下时间作为 navigationStart
• redirect（unload）：重定向，若发生网络重定向直接跳至 DNS 解析，若发生本地重定向，查找本地强制缓存资源。同时卸载之前页面，回收内存。
• App cache：读取本地缓存，减少网络 IO 开销（有缓存直接跳至 Processing）

提示

对于本地缓存，一般读取大量的小文件要比一个大文件更耗时，老式机械硬盘寻址需要反复转（切换扇区）且移动磁头，而固态硬盘虽然都是电路运算，也避免不了多次寻址。

以上三点均为浏览器本地行为

• DNS：没有缓存，走网络，DNS 解析找到对应的 IP。DNS 解析发送的是 UDP 包。
• TCP：建立 TCP 连接
• Request：HTTP 通信
• Response：服务器响应

以上四点上述均为网络行为

注意

responseStart 是客户端从服务端中接收到第一个字节时的时间。因为 requestStart 到 responseStart 之间的时间包含客户端发送完毕、客户端查询 / 运算、客户端返回内容等众多时间，这些时间在客户端是无法区分开的，在图中均被统计入 request 中。并且注意，没有 responseEnd。

• Processing：浏览器解析 DOM，处理一系列响应、渲染行为。详见渲染机制
• onLoad：加载完成。

以上两点均为浏览器本地行为

指标计算见 非视觉指标