当前位置： 首页 > news >正文

【前端】如何计算首屏及白屏时间

news 2025/11/7 16:08:12

文章目录

    • 一、首屏时间
    • 二、白屏时间

一、首屏时间

白屏时间：页面渲染完所有内容的时间

  • 简单点就是在<body> 标签后写js代码计算，但是不是很准确
<head><title>白屏时间</title>
</head>
<body></body>
<script type="text/javascript">
const time = Date.now() - performance.timing.navigationStart
console.log('首屏时间结束点：', time)
</script>
  • 还有一个思路就是利用 MutationObserver 监控DOM的变化，变化幅度最大一次时间的就是首屏时间
1. DOM的增加、修改、删除，会触发 MutationObserver
2. 每次 DOM 变化可以计算出一个相对时间(time)和 DOM 变化的分数，并存入一个 observerData 数组中
3. 而后处理 observerData 数组，计算 DOM 变化时分数的差值，取 DOM 分数变化最大的时间点作为首屏时间的取值点
4. 因为首屏并不是所有DOM都渲染，所以不能取最后一项DOM加载完的时间

二、白屏时间

白屏时间：页面开始显示内容的时间

  • 一般浏览器开始渲染 <body> 标签或者解析完 <head> 标签，就是页面白屏结束的时间点。
<head><title>白屏时间</title>
</head>
<script type="text/javascript">
const time = Date.now() - performance.timing.navigationStart
console.log('白屏时间结束点：', time)
</script>
  • 如果不支持performance，可以这样做
<head><title>白屏时间</title><script type="text/javascript">window.start = Date.now();console.log('白屏时间开始点：', window.start)</script>
</head>
<script type="text/javascript">
const time = Date.now() - window.start
console.log('白屏时间结束点：', time)
</script>

相关文章：

【前端】如何计算首屏及白屏时间

文章目录 一、首屏时间二、白屏时间 一、首屏时间 白屏时间&#xff1a;页面渲染完所有内容的时间 简单点就是在<body> 标签后写js代码计算&#xff0c;但是不是很准确 <head><title>白屏时间</title> </head> <body></body> <s…...

编程日记 2024/3/13 16:18:47

重学SpringBoot3-ServletWebServerFactoryAutoConfiguration类

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-ServletWebServerFactoryAutoConfiguration类 工作原理关键组件以TomcatServletWebServerFactory为例ServletWebServerFactory会创建webServer的时机关键…...

编程日记 2024/3/13 16:15:44

FileZillaClient连接被拒绝，无法连接

1.ECONNREFUSED - 连接被服务器拒绝 2、无法连接FZ时&#xff0c;判断没有ssh 更新源列表&#xff1a; sudo apt-get update 安装 openssh-server &#xff1a;sudo apt-get install openssh-server 查看是否启动ssh&#xff1a;sudo ps -e | grep ssh...

编程日记 2024/3/13 16:14:43

每日一面——成员初始化列表、移动构造和拷贝构造

写前声明&#xff1a;参考链接 C面经、面试宝典 等 ✊✊✊每日一面——成员初始化列表、移动构造和拷贝构造 一、类成员初始化方式&#xff1f;构造函数的执行顺序&#xff1f;为什么用成员初始化列表会快一些&#xff1f;二、final和override关键字三、拷贝初始化和直接初始化…...

编程日记 2024/3/13 16:13:42

OPC UA 服务器的Web访问

基于Web 的应用非常普及&#xff0c;例如基于web 的SCADA &#xff0c;物联网 Dashboard 等等&#xff0c;那么基于Web 的应用如何访问OPC UA 服务器呢&#xff1f;本博文讨论这方面的问题。 Web 的通信方式 Web 是我们通常讲的网站&#xff0c;它由浏览器&#xff0c;HTTP 服…...

编程日记 2024/3/13 16:11:38

docker 子网

当需要给容器分配指定 ip &#xff0c;为避免ip 冲突&#xff0c;指定容器子网处理 创建 subnet 子网 docker network create --subnet 10.0.0.0/24 --gateway 10.0.0.1 subnet-testdocker network ls NETWORK ID NAME DRIVER SCOPE ... f582ecf297bc sub…...

编程日记 2024/3/13 16:10:37

QT使用RabbitMQ

文章目录 1.RabbitMQ 客户端下载地址：1.1RabbitMQ基本结构：2.搭建RabbitMQ server3.安装步骤4.运行4.1 报错问题解决5.使用5.1 配置Web管理界面6.常用命令总结7.Qt客户端编译7.1 这里重点强调一下，这个文件需要改成静态库7.2 下载地址：(qamqp自己下载，下载成功后，静态编译…...

编程日记 2024/3/13 16:09:35

什么是R语言？什么是R包？-R语言001

R语言是一种专为统计计算和图形而设计的编程语言和环境。它最初由罗斯伊哈卡和罗伯特亨特尔在1993年创建&#xff0c;灵感来源于S语言。R语言已经发展成为统计学、数据分析、科学研究以及许多其他领域中最受欢迎和广泛使用的工具之一。R语言的核心是一个开源的解释型语言&#…...

编程日记 2024/3/13 16:08:34

Java17 --- springCloud之LoadBalancer

目录 一、LoadBalancer实现负载均衡 1.1、创建两个相同的微服务 1.2、在客户端80引入loadBalancer的pom 1.3、80服务controller层&#xff1a; 一、LoadBalancer实现负载均衡 1.1、创建两个相同的微服务 1.2、在客户端80引入loadBalancer的pom <!--loadbalancer-->&…...

编程日记 2024/3/13 16:05:31

Mac(含M1) 使用 brew 安装nvm

目录 Mac 安装nvm 下载命令 配置环境变量 刷新 Mac(M1) 安装nvm 搜索 下载 为nvm创建文件夹 配置环境变量 刷新 Mac 安装nvm 下载命令 brew install nvm 配置环境变量 vi ~/.zshrc 内容如下&#xff1a; export NVM_DIR"$HOME/.nvm"[ -s "/usr/local…...

编程日记 2024/3/13 16:00:25

优秀的前端框架vue，原理剖析与实战技巧总结【干货满满】

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属的专栏&#xff1a;前端零基础教学&#xff0c;实战进阶 景天的主页&#xff1a;景天科技苑 文章目录 Vuevue.js库的基本使用vue.js的M-V-VM思…...

编程日记 2024/3/13 15:59:24

＜2024最新＞ChatGPT逆向教程

前言 在使用本篇文章用到的项目以及工具时，需要对其有一定的了解，无法访问以及无法使用的问题作者不承担任何责任，可以自行想办法解决遇到的问题​。 文章若有不合适，有问题的地方，请私聊指出，谢谢~ 准备工具 一台至少 2 核 2G 内存的服务器，推荐是位于香港、新加坡或…...

编程日记 2024/3/13 15:58:22

C#编程技巧--2

1.使用泛型: 泛型允许你编写更加灵活和可重用的代码&#xff0c;同时提高类型安全性。 C# 中的泛型功能允许你编写更加灵活和可重用的代码&#xff0c;并且可以增加类型安全性。通过使用泛型&#xff0c;你可以编写适用于不同类型的代码&#xff0c;而无需为每种类型单独重写代…...

编程日记 2024/3/13 15:55:18

设计模式 代理模式

代理模式主要使用了 Java 的多态&#xff0c;主要是接口 干活的是被代理类&#xff0c;代理类主要是接活&#xff0c; 你让我干活&#xff0c;好&#xff0c;我交给幕后的类去干&#xff0c;你满意就成&#xff0c;那怎么知道被代理类能不能干呢&#xff1f; 同根就成&#xff…...

编程日记 2024/3/13 15:53:16

关于学习时间

这篇文章我来说一下我对于我最近学习时间的一些思考。 早上和下午是我最为活跃和高效的时间段。 我能够专注地工作&#xff0c;不容易分心。 然而&#xff0c;到了晚上&#xff0c;我的状态开始下降&#xff0c;这是很正常的情况。 由于早上和下午的专注学习&#xff0c;我的大…...

编程日记 2024/3/13 15:50:12

Github：Your browser did something unexpected. Please try again.

问题概述 Github&#xff1a;Your browser did something unexpected. Please try again. If the error continues, try disabling all browser extensions. 问题原因&#xff1a; 提示是插件出了问题&#xff0c;关闭了所有插件也无法解决&#xff0c;搜索了一下说是VPN的问题…...

编程日记 2024/3/13 15:49:11

Django性能优化

1.服务器CPU太高的优化 在Django项目中使用line_profiler进行性能剖析&#xff0c;您需要遵循以下步骤来设置并使用它&#xff1a; 1. **安装line_profiler**&#xff1a; 在命令行中执行以下命令来安装line_profiler&#xff1a; pip install line_profiler …...

编程日记 2024/3/13 15:48:10

全网最详细Docker命令(分类总结)

默认存储容器地址 cd /var/lib/docker 容器生命周期 Docker 命令 开启docker &#xff1a; systemctl start docker 查看docker状态 &#xff1a;systemctl status docker 停止&#xff1a;systemctl stop docker 重启: systemctl restart docker docker开机自启&#xf…...

编程日记 2024/3/13 15:47:09

运维自动化之ANSIBLE

一、Ansible的发展史及功能 官网&#xff1a;https://www.ansible.com/ 官方文档&#xff1a;https://docs.ansible.com/ 1、Ansible功能 2、Ansible特性 批量执行远程命令,可以对远程的多台主机同时进行命令的执行 批量安装和配置软件服务&#xff0c;可以对远程的多台主机…...

编程日记 2024/3/13 15:46:07

算法训练day42leetcode01背包问题 416. 分割等和子集

01 背包 题目描述 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 题目分析 每一件物品其实只有两个状态&#xff0c;取或者不取&…...

编程日记 2024/3/13 15:45:06

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/11/7 9:55:28

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/10/15 12:45:18

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2025/11/7 4:10:45

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

编程新知 2025/10/24 19:58:16