该时间点表示浏览器开始绘制页面,在此之前页面都是白屏,所以也称为白屏时间。
该时间点可用公式Time To Start Render = TTFB(Time To First Byte) + TTDD(Time To Document Download) + TTHE(Time To Head End)表示。其中TTFB表示浏览器发起请求到服务器返回第一个字节的时间,TTDD表示从服务器加载html文档的时间,TTHE表示文档头部解析完成所需要的时间。在高级浏览器中有对应的属性可以获取该时间点。Chrome可通过chrome.loadTimes().firstPaintTime获取,IE9+可以通过performance.timing.msFirstPaint获取,在不支持的浏览器中可以根据上面公式通过获取头部资源加载完的时刻模拟获取近似值。开始渲染时间越快,用户就能更快的看见页面。
对于该时间点的优化有:
1)优化服务器响应时间,服务器端尽早输出
2)减少html文件大小
3)减少头部资源,脚本尽量放在body中
来源: https://juejin.im/entry/59f6a59cf265da432e5b48e6