F12下看html页面的响应时间,浏览器F12 Finish DOMContentLoaded load时间如何计算出来？...

白屏

// 不兼容performance.timing 的浏览器，如IE8

window.pageStartTime = Date.now();

// 白屏时间结束点

window.firstPaint = Date.now();

因此白屏时间则可以这样计算出：

可使用 Performance API 时

白屏时间 = firstPaint - performance.timing.navigationStart;

首屏时间

通常计算首屏的方法有

首屏模块标签标记法

统计首屏内加载最慢的图片的时间

自定义首屏内容计算法

1、首屏模块标签标记法

首屏模块标签标记法，通常适用于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况。我们会在 HTML 文档中对应首屏内容的标签结束位置，使用内联的 JavaScript 代码记录当前时间戳。如下所示：

首屏

window.pageStartTime = Date.now();

window.firstScreen = Date.now();

时首屏时间等于 firstScreen - performance.timing.navigationStart;

事实上首屏模块标签标记法 在业务中的情况比较少，大多数页面都需要通过接口拉取数据才能完整展示，因此我们会使用 JavaScript 脚本来判断首屏页面内容加载情况。

2、统计首屏内图片完成加载的时间

通常我们首屏内容加载最慢的就是图片资源，因此我们会把首屏内加载最慢的图片的时间当做首屏的时间。

由于浏览器对每个页面的 TCP 连接数有限制，使得并不是所有图片都能立刻开始下载和显示。因此我们在 DOM树 构建完成后将会去遍历首屏内的所有图片标签，并且监听所有图片标签 onload 事件，最终遍历图片标签的加载时间的最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。

此时首屏时间等于 加载最慢的图片的时间点 - performance.timing.navigationStart;

3、自定义模块内容计算法

由于统计首屏内图片完成加载的时间比较复杂。因此我们在业务中通常会通过自定义模块内容，来简化计算首屏时间。如下面的做法：

忽略图片等资源加载情况，只考虑页面主要 DOM

只考虑首屏的主要模块，而不是严格意义首屏线以上的所有内容