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

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

news 2026/2/7 14:43:57

文章目录

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

一、首屏时间

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

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

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/22 15:14:25

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2026/1/23 12:18:20

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2026/2/1 3:20:44

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2026/1/31 9:49:23

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/10/16 14:46:22