浏览器如何加载网页 — JavaScript PerformanceTiming

在地址栏中输入一个 url,发生了哪些事情?

  1. 输入 blog.zhengxianjun.com
  2. 浏览器查找域名的 IP 地址
    1. 查找浏览器 hosts 缓存
    2. 查找系统缓存——本机 hosts 文件
    3. 查找最近的本地域名服务器(LDNS)
    4. (LDNS)查找 Root Server->返回所在域的 gTLD Server(全球共13台国际顶级域名服务器)->查找域名对应的 Name Server->匹配域名和 IP 映射表->返回IP记录以及 TTL->LDNS 缓存并返回给浏览器
  3. 浏览器向服务器发起一个 HTTP 请求报文
    1. 应用层协议 HTTP 通过TCP报文发送到服务器
    2. TCP 3次握手(HTTP 1.0 规定服务器处理完成后立即断开TCP连接,1.1 版本)
    3. 返回 HTTP 报文,如果包含重定向信息,浏览器进行重定向(重定向次数限制)
  4. 服务器处理请求,并返回 HTTP 响应报文
  5. 浏览器接收 HTML,分析 HTML 中的资源(图片、样式、音视频),继续请求
  6. 浏览器呈现网页

JavaScript 提供的 PerformanceTiming 接口详述了各个阶段发生的时间点。

PerformanceTiming 定义

PerformanceTiming 所有属性均为只读。

PerformanceTiming 示例

网页加载时间示例

w3 文档地址:http://www.w3.org/TR/navigation-timing/