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

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

news 2026/2/9 4:14:15

文章目录

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

一、首屏时间

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

  • 简单点就是在<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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/8 4:37:13

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2026/2/7 20:40:53

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/1/31 6:38:50

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24