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

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

news 2026/4/7 3:24:52

文章目录

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

一、首屏时间

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

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

如何分析AWR中的Top SQL_通过执行次数与物理读定位低效查询

Top SQL中Executions与Physical Reads需结合分析&#xff1a;执行次数多但物理读低可能暴露应用逻辑缺陷&#xff0c;物理读/执行>1000在OLTP中属异常&#xff0c;需结合执行计划、对象访问、缓存命中率等综合判断根因。怎么看 Top SQL 里的执行次数和物理读是否异常awr 报告…...

编程新知 2026/4/7 3:20:49

你的CSP策略真的安全吗？手把手教你用Google的Nonce方案改造网站（附Tranco万站爬虫分析）

你的CSP策略真的安全吗&#xff1f;Google Nonce方案实战指南与行业适配性解析 当安全团队在年度审计报告中标注"内容安全策略配置不当"时&#xff0c;许多开发者才惊觉自己的防护体系存在致命漏洞。传统CSP&#xff08;内容安全策略&#xff09;部署的复杂性就像试图…...

编程新知 2026/4/7 2:03:00

Python上下文管理器高级应用：资源管理与代码优雅性

Python上下文管理器高级应用&#xff1a;资源管理与代码优雅性 1. 背景与意义 上下文管理器是Python中一种强大的语言特性&#xff0c;它允许我们以一种优雅的方式管理资源的获取和释放。通过使用with语句&#xff0c;我们可以确保资源在使用完毕后被正确释放&#xff0c;无论代…...

编程新知 2026/4/7 0:47:34

4步打造专属《无人深空》体验：NomNom存档编辑器全功能指南

4步打造专属《无人深空》体验&#xff1a;NomNom存档编辑器全功能指南 【免费下载链接】NomNom NomNom is the most complete savegame editor for NMS but also shows additional information around the data youre about to change. You can also easily look up each item …...

编程新知 2026/4/7 0:03:21

电力系统短路故障分析与电压暂降特征研究：三相不对称短路及其MATLAB仿真分析

1.电力系统短路故障引起电压暂降 2.不对称短路故障分析 包括&#xff1a;共两份自编word&#xff0b;相应matlab模型 1.短路故障的发生频次以及不同类型短路故障严重程度&#xff0c;本文选取三类典型的不对称短路展开研究&#xff0c;包含单相接地短路、相间短路和两相接地短…...

编程新知 2026/4/6 22:59:48

Kali 2025.4上部署HexStrike AI踩坑实录：从MCP连接失败到完美运行的完整排错指南

Kali 2025.4上部署HexStrike AI踩坑实录&#xff1a;从MCP连接失败到完美运行的完整排错指南 HexStrike AI作为新一代AI驱动的渗透测试框架&#xff0c;理论上只需几条命令就能完成部署。但现实往往比文档复杂得多——特别是当你在深夜赶项目&#xff0c;却发现MCP客户端死活连…...

编程新知 2026/4/6 21:50:14

避开Trace API的坑：Android方法耗时统计的正确姿势与实战技巧

避开Trace API的坑&#xff1a;Android方法耗时统计的正确姿势与实战技巧 在移动应用开发中&#xff0c;性能优化始终是开发者面临的核心挑战之一。特别是对于音视频、游戏等对帧率敏感的应用场景&#xff0c;毫秒级的性能差异都可能直接影响用户体验。而精准的方法耗时统计&am…...

编程新知 2026/4/6 20:59:35

电磁场仿真实战——5. 有限元法（FEM）在工程优化中的应用

1. 有限元法&#xff08;FEM&#xff09;在电磁场仿真中的核心价值 想象一下你正在设计一台新型电机&#xff0c;需要精确计算内部电磁场的分布。传统解析方法面对复杂几何结构时束手无策&#xff0c;而有限元法就像把整个电机拆解成无数个"乐高积木"&#xff0c;在每…...

编程新知 2026/4/6 17:09:22

HTML函数开发需要多少瓦电源_整机功耗估算指南【说明】

最准方法是用电力功耗仪实测整机交流输入功率&#xff1b;鲁大师靠查表估算易失真&#xff1b;HTML开发真实耗电来自浏览器、框架、开发服务等&#xff1b;选电源须看12V输出能力和80 PLUS认证。怎么看当前整机真实功耗&#xff08;不是TDP&#xff0c;是插座上真烧的电&#x…...

编程新知 2026/4/6 16:04:47

鸽姆智库真理纪元白皮书（学术修订版）真理纪元：贾子科学定理与人类逻辑主权的学术纲要

鸽姆智库真理纪元白皮书&#xff08;学术修订版&#xff09;真理纪元&#xff1a;贾子科学定理与人类逻辑主权的学术纲要摘要《真理纪元》以贾子科学定理为理论基石&#xff0c;旨在修正波普尔证伪主义百余年间对科学认知范式的垄断影响。本文以112作为科学体系的基础公理与确定…...

编程新知 2026/4/6 15:48:37