浏览器显示页面的几个关键时间点

来源:互联网 发布:塔塔尔族服饰淘宝 编辑:程序博客网 时间:2024/05/16 13:00

一  开始渲染阶段的时间点:

      1  TTFB(Time To First Byte)    发起请求到服务器返回数据的时间

         wiki(

Time To First Byte or TTFB is a measurement that is often used as an indication of the responsiveness of a webserver or other network resources.

It is the duration from the virtual user making an HTTP request to the first byte of the page being received by the browser. This time is made up of the socket connection time, the time taken to send the HTTP request, and the time taken to get the first byte of the page. 

)

    2 TTDD (Time To Document Download) 从服务器下载HTML文档的时间

    3 TTHE (Time To Head End)  HTML文档头部解析完成所需要的时间


二 关于DomReady 中的时间点

domReady 对应har 结构中的DomContentLoaded 

 先来看看一个粗略的时间组成公式:

    Time To Dom Ready = TTSR + TTDC + TTST

1 TTSR(Time To Start Render):浏览器开始渲染的时间

2  TTDC (Time To Dom Created)    DOM树创建所消耗时间

3  TTST (Time To Script)    BODY中所有脚本加载和执行的时间


三 关于Page Load 的时间点

1 start Reader

2 Dom Ready

3 Resource Download (简单来说所有的资源加载完毕)


四 可进行交互的时间TTI(Time To Interact)

1 start Reader

2 Core HTML Reader(核心功能相关的HTML渲染完成)

3 Core Javascript Bind (核心功能相关的Javascript 绑定完成)


原创粉丝点击