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

news/2024/11/9 3:07:28/
白屏

// 不兼容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

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


http://www.ppmy.cn/news/206355.html

相关文章

人生时间计算器_真实年龄计算器app下载-抖音珍稀时间年龄计算器下载v1.5 安卓版-西西软件下载...

抖音珍稀时间年龄计算器app能够快速的计算出你真是的实际年龄,精确到每分每秒.同时向你预估出你人生中剩余的时间,在剩余的时间里还能做那些事情,让人们思考生从何来死往何去,记住你的每一个关键的纪念日,十分的有趣!点击下载抖音珍稀时间年龄计算器app就能看到自己的时间啦!…

接口请求到服务器端响应的时间,接口响应时间剖析

在日常工作过程中,我们经常需要关注接口的响应时间,优化接口的时延,那么接口的响应时间由哪些部分组成呢?先给出一个公式: 接口响应时间 = 请求机器与服务器之间包往返时间 RTT * N + 业务处理处理时间 通过下面的一组实验数据,我们可以完整地解析出从请求接口,到接口返…

Android 计算网络速度文件下载剩余时间<<最优方案>>

最近在项目开发中遇到了一项功能,需要在下载文件时显示出当前的网络速度和预计剩余时间,在调研中发现使用的比较多的是通过TrafficStats来获取网络使用量然后在间隔每秒后重新获取一次网络使用量,两者相机算既可以得出每秒的网络使用量。 pub…

Oracle 计算时间差

Oracle中计算时间差是经常用到的。可以使用“日期1-日期2”并加以运算,来获得你要想的时间差:天、小时、分钟或者秒。 例如: selectTO_DATE(2012-02-20 17:45:04,yyyy-mm-dd hh24:mi:ss)-TO_DATE(2012-02-19 08:34:04,yyyy-mm-dd hh24:mi:ss) as Dayfrom dual; 结果: 这里…

如何用计算机算时间,在win10电脑的计算器中如何进行日期的计算

在win10电脑的计算器中如何进行日期的计算 今天给大家介绍一下在win10电脑的计算器中如何进行日期的计算的具体操作步骤。 1. 首先打开电脑,找到自带的计算器,打开进入。 2. 在打开的计算器页面,点击页面上方的三横图标: 3. 在打开的菜单中,点击“日期计算”: 4. 打开的日…

实时下载速度的计算:

所谓的实时下载速度也是按秒计算的,直接每秒计算一下当前下载量与上次记录的下载量便可得到从 上一秒到这一秒的下载数据量,这样实时下载速度就得出来了,至于剩余时间,可以将当前下载的数 据量与耗用的秒为单位的时间进行计算&…

对3800x初步超频总结

3800x超频: 原则散热无法保证全核心高频率高使用工作,在使用原装散热时最好不要超频 (一旦超过4.2hz 继续往上加可能无法通过ad64fpu烤鸡测试)-使用4.2以上全核烤鸡会在几分钟之后达到温度临界值,电脑自动蓝屏 //尽管游…

服务器cpu哪个型号可以超频,CPU超频史上的14个神器:你用过几个?

超频,是围绕处理器永恒的话题。虽然这几年大家的热情消退了不少,各方面的限制也让超频空间大大缩减,但是回顾历史,每每想起那一颗颗神器,我们仍难以抑制激动的心情。这里我们就看一下历史上的一些超频英雄,…