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

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

news 2026/5/27 8:03:41

文章目录

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

一、首屏时间

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

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

SSE 基础知识

SSE 基础知识 一、概念定义 SSE 全称 Server-Sent Events&#xff0c;是基于HTTP协议的服务器单向数据推送技术。 建立一次长连接后&#xff0c;服务端可主动持续向前端推送数据&#xff0c;无需客户端反复轮询请求。 二、核心特点 单向通信&#xff1a;仅服务器 → 客户端发送…...

编程新知 2026/5/27 5:26:11

0.2毫秒快速启动的操作系统

在工业控制以及航空航天等核心场景&#xff0c;极速启动就是高可靠系统的生命线。0.2毫秒超快启动搭配硬件看门狗&#xff0c;让设备在掉电重启、异常恢复时瞬时归位&#xff0c;关键任务永不延误&#xff01; https://www.bilibili.com/video/BV11mLY6VERt/?spm_id_from333.1…...

编程新知 2026/5/26 0:16:07

Unity发行版DLL调试实战：DnSpy无源码IL级断点指南

1. 这不是“反编译”&#xff0c;而是Unity游戏开发者的日常调试手段你有没有遇到过这样的情况&#xff1a;接手一个Unity发行版游戏&#xff0c;想快速验证某个功能逻辑是否按预期执行&#xff0c;或者排查一个偶发的崩溃&#xff0c;但手头只有打包后的Assembly-CSharp.dll&a…...

编程新知 2026/5/26 0:10:05

flameshow性能优化技巧：如何快速定位Go程序中的CPU热点

flameshow性能优化技巧&#xff1a;如何快速定位Go程序中的CPU热点 【免费下载链接】flameshow A terminal Flamegraph viewer. 项目地址: https://gitcode.com/gh_mirrors/fl/flameshow &#x1f525; 想要快速定位Go程序中的性能瓶颈吗&#xff1f;flameshow是一个强大…...

编程新知 2026/5/25 22:18:24

2026这6款神级降AIGC平台大公开，一键让AIGC率直逼绝对安全线！

步入 2026 年&#xff0c;学术圈的风向早已不是从前的模样。曾经大家还在为查重率发愁&#xff0c;如今却陷入了更棘手的困境——如何在不破坏论文专业性的前提下&#xff0c;彻底消除 AI 痕迹&#xff1f;随着 AIGC 检测技术不断进化&#xff0c;高校对论文的审核标准也愈发严…...

编程新知 2026/5/25 20:09:55

5A智慧景区建设｜对标一流！巨有科技打造数智化标杆景区

5A级景区是中国旅游的最高标准&#xff0c;代表着服务与管理的顶尖水平。随着5A评审标准日益严苛&#xff0c;“智慧化”已成为核心硬性指标。然而&#xff0c;不少景区的智慧化建设陷入“重硬件、轻整合”的误区&#xff0c;系统林立、数据孤岛&#xff0c;投入巨大却效果不佳…...

编程新知 2026/5/25 20:07:55

5分钟免费搞定HS2汉化：Honey Select 2完整中文补丁终极教程

5分钟免费搞定HS2汉化&#xff1a;Honey Select 2完整中文补丁终极教程 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 还在为Honey Select 2的日文界面而烦恼吗…...

编程新知 2026/5/25 16:17:31

AI Agent 为什么必须有“记忆系统”？

导语&#xff1a;大模型不是没有智商&#xff0c;而是经常没有“记性”。真正能长期干活的 Agent&#xff0c;不是靠无限拉长上下文&#xff0c;而是靠一套会压缩、会检索、会遗忘、会治理的外置记忆系统。一、先给结论&#xff1a;Agent 的记忆系统&#xff0c;本质是“上下文…...

编程新知 2026/5/25 16:04:33

如何用Nucleus Co-Op让单机游戏变身本地多人分屏神器

如何用Nucleus Co-Op让单机游戏变身本地多人分屏神器 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 还在为想和朋友一起玩游戏却只有一台电脑而烦…...

编程新知 2026/5/25 15:56:18

STM32G431实战：拆解蓝桥杯嵌入式‘分任务’调度核心，让你的代码像RTOS一样清晰

STM32G431实战&#xff1a;构建轻量级时间片轮询调度框架 在嵌入式开发中&#xff0c;尤其是资源受限的竞赛平台如蓝桥杯嵌入式赛道&#xff0c;如何高效管理多个外设任务是一个常见挑战。传统的while(1)轮询方式会导致代码臃肿且难以维护&#xff0c;而完整RTOS又可能超出硬件…...

编程新知 2026/5/25 12:44:38