浏览器加载一个URL的过程

感谢

首先感谢W3C和MDN提供的详尽文档，为web世界做出了具有重大意义的贡献。

图片展示

解释

• redirect 重定向阶段
  • navigationStart 从同一个浏览器上下文的上一个文档卸载(unload)结束时的UNIX时间戳
  • redirectStart 第一个HTTP重定向开始时的UNIX时间戳
  • redirectEnd 最后一个HTTP重定向完成时
• App Cache 请求前查缓存
  • fetchStart 浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳
• DNS 请求前查缓存 (有DNS缓存时，均为0)
  • domainLookupStart 域名查询开始的UNIX时间戳
  • domainLookupEnd 域名查询结束的UNIX时间戳
• TCP 创建TCP连接
  • connectStart HTTP请求开始向服务器发送时的Unix毫秒时间戳
  • secureConnectionStart 浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳
  • connectEnd 浏览器与服务器之间的连接建立时的Unix毫秒时间戳
• Request 发起第一个请求
  • requestStart 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。
  • responseStart 浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳
  • responseEnd 浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳
• Processing 页面解析
  • domLoading 网页DOM结构开始解析,Document.readyState === 'loading'
  • domInteractive 网页DOM结构结束解析、开始加载内嵌资源时, Document.readyState === 'interactive'
  • domContentLoaded 相当于jquery.ready()钩子
    • domContentLoadedEventStart 所有被执行的脚本已经被解析
    • domContentLoadedEventEnd 所有需要立即执行的脚本已经被执行
  • domComplete 返回当前文档解析完成 Document.readyState === 'complete'
• Onload html解析完，加载其他资源
  • loadEventStart 加载了其他资源后
  • loadEventEnd 加载事件已经完成之时的 Unix毫秒时间戳

ps:

• W3C Performance
• MDN PerformanceTiming