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

Lighthouse（灯塔）—— Chrome 浏览器性能测试工具

news 来源：原创 2025/5/13 22:43:50

1.认识 Lighthouse

Lighthouse 是 Google 开发的一款开源性能测试工具，用于分析网页或 Web 应用的性能、可访问性、最佳实践、安全性以及 SEO 等关键指标。开发人员可以通过 Lighthouse 快速了解网页的性能瓶颈，并基于优化建议进行改进。

核心功能：

对页面性能进行全面分析
提供优化建议和评分
支持多种测试维度，如性能、可访问性、SEO、PWA 等
自动化生成测试报告

使用的谷歌浏览器版本：

2.Lighthouse 的三种模式

Lighthouse 提供三种测试模式，每个模式适用于不同场景。以下是每种模式的说明：

模式名称	说明	局限性
导航模式（默认）	获取页面性能分数与指标。评估渐进式 Web 应用功能。分析页面加载后的可访问性。	无法分析表单提交或单页应用的转换。
时间跨度模式	测量特定时间范围内的性能（如布局偏移、JS 执行时间）。适合评估长时间使用的页面或 SPA。	不提供总分。无法分析瞬时性能指标，如最大内容绘制 (LCP)。
快照模式	分析页面当前状态，适用于查找深层次表单或隐藏菜单的可访问性问题。	不提供总分。无法分析 DOM 之外的问题。

测试设备选择

Lighthouse 支持两种设备类型：

移动设备模拟（默认）
桌面设备模拟

3.主要监测指标

Lighthouse 监测多个维度的性能指标，以下是最重要的性能指标说明：

性能（Performance）

指标名称	说明
首次内容绘制 (FCP)	页面首次绘制 DOM 内容的时间，表示用户第一次看到页面内容的时间点。
最大内容绘制 (LCP)	可视区域中最大内容元素呈现的时间，用于衡量主要内容的加载速度。
可交互时间 (TTI)	页面完全可交互的时间点，表示浏览器可以快速响应用户操作的时刻。
总阻塞时间 (TBT)	页面从首次内容绘制到完全可交互期间的总阻塞时间。
累积布局偏移 (CLS)	页面布局的稳定性指标，衡量意外布局偏移对用户体验的影响。
速度指标 (SI)	衡量页面内容在首屏可见的速度，值越小越佳。

可访问性（Accessibility）

检测网页的无障碍设计，包括对屏幕阅读器支持、颜色对比度、表单标签等。

最佳实践（Best Practices）

检测网页安全性和开发实践，例如是否启用 HTTPS，是否存在安全漏洞等。

SEO（Search Engine Optimisation）

评估网页的搜索引擎友好性，比如标题、元描述是否优化，页面是否允许爬取等。

渐进式 Web 应用（PWA）

验证网页是否符合 PWA 标准，如离线支持、安装性等。

4.如何使用 Lighthouse

Lighthouse 可以通过多种方式运行：

Chrome DevTools
打开 Chrome 浏览器，右键点击页面 -> 检查 -> 切换到 Lighthouse 面板，选择测试选项，点击 分析页面加载。

CLI 命令行工具
Chrome 插件
在 Chrome 网上应用商店搜索 Lighthouse 插件，安装后直接在浏览器中生成报告。

Node.js API
使用 Node.js 脚本运行 Lighthouse 测试，适合高级开发者(官方介绍的，没用过)。

5.Lighthouse 报告解读

Lighthouse 报告为每个维度生成 0–100 的评分，并用颜色标识：

绿色（90–100）：表现优秀
橙色（50–89）：表现中等
红色（0–49）：表现较差

下面是关键性能指标的理想范围：

指标名称	绿色（优秀）	橙色（中等）	红色（较差）
首次内容绘制 (FCP)	0–1.8 秒	1.8–3 秒	>3 秒
最大内容绘制 (LCP)	0–2.5 秒	2.5–4 秒	>4 秒
可交互时间 (TTI)	0–3.8 秒	3.9–7.3 秒	>7.3 秒
总阻塞时间 (TBT)	0–200 毫秒	200–600 毫秒	>600 毫秒
累积布局偏移 (CLS)	0–0.1	0.1–0.25	>0.25

6.性能优化建议

根据报告中提供的优化建议，可以从以下几个方面提升性能：

减少未使用的 JS 和 CSS
- 使用代码分割和按需加载技术。
- 删除无用的 CSS 和 JS 文件。
启用文本压缩
- 配置服务器支持 gzip 或 Brotli 压缩。
优化图片加载
- 使用下一代图片格式（如 WebP）。
- 启用懒加载（Lazy Loading）。
消除渲染阻塞资源
- 将关键 CSS 内联到 HTML 中。
- 为非关键资源添加 async 或 defer 属性。
开启 HTTP/2
- 改用 HTTP/2 协议，提高请求效率。
优化服务器响应时间
- 使用 CDN 缓存静态资源。
- 减少重定向请求。

……

总结

Lighthouse 是前端性能优化的强大工具，通过全面的分析和详细的优化建议，开发者可以发现网页性能问题并进行改进。

参考资料：

Google Developers 文档
CSDN 博客

Lighthouse（灯塔）—— Chrome 浏览器性能测试工具

1.认识 Lighthouse Lighthouse 是 Google 开发的一款开源性能测试工具，用于分析网页或 Web 应用的性能、可访问性、最佳实践、安全性以及 SEO 等关键指标。开发人员可以通过 Lighthouse 快速了解网页的性能瓶颈，并基于优化建议进行改进。核心功能&…...

编程日记 2025/5/13 22:43:50

深入浅出机器学习中的梯度下降算法

大家好，在机器学习中，梯度下降算法（Gradient Descent）是一个重要的概念。它是一种优化算法，用于最小化目标函数，通常是损失函数。梯度下降可以帮助找到一个模型最优的参数，使得模型的预测更加准…...

编程日记 2025/5/10 9:01:42

AIGC 012-Video LDM-更进一步，SD作者将LDM扩展到视频生成任务！

AIGC 012-Video LDM-Stable Video diffusion前身，将LDM扩展到视频生成任务！ 文章目录 0 论文工作1论文方法实验结果 0 论文工作 Video LDM作者也是Stable diffusion的作者，作者在SD的架构上进行扩展，实现了视频的生成。后续在Vid…...

编程日记 2025/5/8 17:51:32

安装Rust 检查并更新Ubuntu的软件包 $ sudo apt update $ sudo apt upgrade安装相关依赖：安装GCC、G、MAKE、curl $ sudo apt install build-essential $ sudo apt install curl安装Rust $ curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh执行命令…...

编程日记 2025/5/13 12:56:49

docker部署RustDesk自建服务器

客户端： Releases rustdesk/rustdesk GitHub 服务端： 项目官方地址：GitHub - rustdesk/rustdesk-server: RustDesk Server Program 1、拉取RustDesk库 docker pull rustdesk/rustdesk-server:latest 阿里云库： docker pu…...

编程日记 2025/5/13 7:26:26

QT4和 QT5 槽函数连接的区别

正常连接方式 //QT4官方用列QLabel *label new QLabel;QScrollBar *scrollBar new QScrollBar;QObject::connect(scrollBar, SIGNAL(valueChanged(int)),label, SLOT(setNum(int)));//QT5官方用列QLabel *label new QLabel;QLineEdit *lineEdit new QLineEdit;QObject::c…...

编程日记 2025/5/13 2:23:40

【C++】入门【六】

本节目标一、继承的概念及定义二、基类和派生类对象赋值转换三、继承中的作用域四、派生类的默认成员函数五、继承与友元六、继承与静态成员七、复杂的菱形继承及菱形虚拟继承八、继承的总结和反思九、笔试面试题一、继承的概念及定义 1.继承的概念继承是面向对象…...

编程日记 2025/5/13 6:23:29

Ansible 运维工具

安装 apt install ansible /etc/ansible/hosts , 指定密码或密钥访问分组机器 [k8s_masters] master0.c0.k8s.sb[k8s_nodes] node0.c0.k8s.sb node1.c0.k8s.sb[k8s:children] k8s_masters k8s_nodes[k8s_masters:vars] ansible_ssh_usersbadmin ansible_ssh_pass"***&q…...

编程日记 2025/5/13 22:39:25

【分布式】分布式缓存

一、什么是分布式缓存分布式缓存是一种将缓存数据存储在多个节点上的缓存方案。它通过将数据分散存储在多个节点的内存中，以提高系统的读取性能、降低数据库压力和提高系统可扩展性。二、分布式缓存的优点优点明细提高性能：分布式缓存可以将数据缓…...

编程日记 2025/4/28 5:45:30

uni-app简洁的移动端登录注册界面

非常简洁的登录、注册界面模板，使用uni-app编写，直接复制粘贴即可，无任何引用，全部公开。废话不多说，代码如下： login.vue文件 <template><view class"content"><view class&quo…...

编程日记 2025/5/10 4:26:40

传奇996_47——前端ui

方式一： 后端写ui，前端通过触发函数进行截取。然后获取标签名进行补充或附加动画这种方式很好用。问题1：获取不到标签名，标签名就是标签id，当id数字时不需要处理即可直接获取到，但是id如果时汉字就会获取…...

编程日记 2025/5/7 17:17:12

nlp培训重点

1. SGD梯度下降公式当梯度大于0时，变小，往左边找梯度接近0的值。当梯度小于0时，减去一个负数会变大，往右边找梯度接近0的值，此时梯度从负数到0上升 2.Adam优化器实现原理 #coding:utf8import torch import torch.n…...

编程日记 2025/5/13 10:02:46

ARM A32多数据处理汇编指令理解分享

ARM A32多数据处理汇编指令理解分享 1 多数据存储指令1.1 push指令1.2 STMFD/STMDB指令1.3 STMED/STMDA指令1.4 STMFA/STMIB指令1.5 STMEA/STMIA指令 2 多数据加载指令2.1 pop指令2.2 LDMFD/LDMIA指令2.3 LDMFA/LDMDA指令2.4 LDMEA/LDMDB指令2.5 LDMED/LDMIB指令在ARM A32多数…...

编程日记 2025/5/4 4:38:24

【人工智能】Transformers之Pipeline（二十七）：蒙版生成（mask-generation）

目录一、引言二、蒙版生成（mask-generation） 2.1 概述 2.2 facebook/sam-vit-base 2.3 pipeline参数 2.3.1 pipeline对象实例化参数 2.3.2 pipeline对象使用参数 2.3.3 pipeline对象返回参数 2.4 pipeline实战 2.5 模型排…...

编程日记 2025/5/11 14:54:25

数据挖掘之逻辑回归

逻辑回归（Logistic Regression）是数据挖掘中一种经典且广泛应用的算法，主要用于解决分类问题。尽管名字中带有“回归”，它的核心目标却是预测离散的类别，而不是连续的数值。逻辑回归凭借其简单、高效、易于解释的特性&…...

编程日记 2025/5/13 22:15:41

PH热榜 | 2024-12-05

1. Oopsie 标语：用AI和会话回放调试Flutter和React Native应用介绍：Zipy推出的Oopsie是一款你唯一需要的AI赋能移动端调试工具，它能提供▶️会话回放、🤖错误监控、💡AI生成的概要分析，以及&#x1f525…...

编程日记 2025/5/10 17:21:36

docker-常用应用部署dockerfile模板

文章目录概述Springboot-Djava.security.egdfile:/dev/./urandom参数说明 vue应用部署nginx.conf配置Dockerfile 概述本文列举了Java开发中常用如SpringBoot、Vue前端等类型的应用Docker部署所需的DockerFile Springboot FROM anapsix/alpine-java:8_server-jre_unlimited…...

编程日记 2025/5/13 22:28:39

LabVIEW中“this VI‘s owning library is missing”错误及解决

问题描述当加载或打开一个VI时，如果其所属的项目库未加载到内存，LabVIEW将提示错误：“this VIs owning library is missing”（该VI的所属库不存在）。该问题通常发生在以下情况下： 项目库文件丢失或路径…...

编程日记 2025/5/13 15:47:58

【算法】棋盘覆盖问题源代码及精简版

目录一、题目二、样例三、示例代码四、精简代码五、总结对于棋盘覆盖问题的解答和优化。一、题目输入格式： 第一行，一个整数n（棋盘n*n，n确保是2的幂次，n<64） 第二行，两个整数…...

编程日记 2025/5/13 21:50:14

剖析kubernetes service的IP能否在宿主机中ping通

文章目录前言一、serviceIP是怎么产生的二、宿主机中ping serviceIP地址1.ping示例2.为什么ping不通剖析2.1.封装及解封装过程2.2.ICMP报文以太网数据帧格式2.3.原因三、ping不通svcIP是否跟iptables规则有关？四、为什么ipvs的的clusterIP类型的service能够ping通…...

编程日记 2025/5/12 9:16:56

路由VueRouter的基本使用

1.下载VueRouter到当前工程。 vue2：VueRouter3.x Vuex3.x。 vue3：VueRouter4.x Vuex4.x。在终端使用命令： year add vue-router3.6.5 2.引入。 import VueRouter from vue-router 3,安装注册。 Vue.use(VueRouter) 4…...

编程日记 2025/5/13 22:08:11

学习记录，正则表达式，隐式转换

正则表达式 \\：表示正则表达式 W: 表示一个非字（不是一个字，例如：空格，逗号，句号） W: 多个非字基本组成部分 1.字符字面量： 普通字符：在正则表达式中，大…...

编程日记 2025/5/13 21:30:25

Spring Boot + MySQL 多线程查询与联表查询性能对比分析

Spring Boot MySQL: 多线程查询与联表查询性能对比分析背景在现代 Web 应用开发中，数据库性能是影响系统响应时间和用户体验的关键因素之一。随着业务需求的不断增长，单表查询和联表查询的效率问题日益凸显。特别是在 Spring Boot 项目中&#xff0…...

编程日记 2025/5/12 13:37:42

C++小碗菜之二：软件单元测试

“没有测试的代码重构不能称之为重构，它仅仅是垃圾代码的到处移动” ——Corey Haines 目录前言什么是单元测试？ 单元测试的组成单元测试的命名单元测试的独立性 Google Test 单元测试的环境配置与使用 1. Ubuntu下安装 Google Test 2. 编写…...

编程日记 2025/5/11 18:05:19

集成学习综合教程

一、前置知识一个分类器的分类准确率在60%-80%，即：比随机预测略好，但准确率却不太高，我们可以称之为 “弱分类器”，比如CART（classification and regression tree 分类与回归树）。反之&#x…...

编程日记 2025/5/13 22:33:41

Java NIO channel

channel(通道)，byteBuffer(缓冲区)，selector（io多路复用），通道FileChannel,SocketChannel的transferTo,transferFrom,MappedByteBuffer实现了零拷贝。 JVM调操作系统方法，read,write，都可以送字…...

编程日记 2025/5/13 21:27:24

B3631 单向链表-模拟链表

来源 ：题目链接-洛谷 B3631 单向链表单向链表题目描述实现一个数据结构，维护一张表（最初只有一个元素 1 1 1）。需要支持下面的操作，其中 x x x 和 y y y 都是 1 1 1 到 1 0 6 10^6 106 范围内的正整数&…...

编程日记 2025/5/13 22:31:34

【C++】格式化输出详解：掌握 cout 的进阶用法

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯格式化输出的理论概述💯控制输出宽度和填充字符setw 操作符setfill 操作符 💯控制浮点数的显示格式fixed 与 scientificsetprecision 💯…...

编程日记 2025/5/13 22:35:48

【NoSQL数据库】Hbase基本操作——数据库表的增删改查

目录一、Hbase原理二、HBase数据库操作三、遇到的问题和解决方法一、Hbase原理 HBase的数据模型： 行键时间戳列族：contents 列族：anchor 列族：mime “com.cnn.www” T9 Achor:cnnsi.com”CNN” T8 Achor:…...

编程日记 2025/5/13 22:17:51

同步fifo

同步FIFO FIFO即是一种先进先出的数据缓存器。同步FIFO指的是数据的写入和读出的时钟是同一个时钟。异步 FIFO 有两个时钟信号，读和写逻辑用的各自的读写时钟。 FIFO没有外部读写地址线，使用起来简单。但是缺点就是只能先入先出，数据地址由…...

编程日记 2025/5/11 19:05:56

肌肉骨骼肿瘤治疗市场：潜力无限，未来可期

肌肉骨骼肿瘤治疗作为现代医学的重要分支，专注于应对骨骼和肌肉系统中的良性和恶性肿瘤。随着全球人口老龄化和生活方式的改变，肌肉骨骼疾病日益成为公共卫生的重要问题。与此同时，医疗技术的进步和患者对高质量医疗服务的需求不断推动该市场…...

编程日记 2025/5/5 23:55:20

高考倒计时：用倒计时软件为梦想加油可用于教室黑板或者电脑上

高考，这个被无数学子视为人生重要转折点的考试，即将来临。每一年的六月，都充满了紧张与期待。如何在这场人生的战役中取得胜利？除了日常的勤奋学习，科学的复习计划和心态调整外，一款好用的倒计时软件&#…...

编程日记 2025/5/10 21:00:11

人工智能学习用的电脑安装cuda、torch、conda等软件，版本的选择以及多版本切换

接触人工智能的学习三个月了，每天与各种安装包作斗争，缺少依赖包、版本高了、版本低了、不兼容了、系统做一半从头再来了。。。这些都是常态。三个月把单位几台电脑折腾了不下几十次安装，是时候总结一下踩过的坑和积累的经验了。以一个典型的…...

编程日记 2025/5/10 11:26:28

BERT模型的输出格式探究以及提取出BERT 模型的CLS表示，last_hidden_state[:, 0, :]用于提取每个句子的CLS向量表示

说在前面最近使用自己的数据集对bert-base-uncased进行了二次预训练，只使用了MLM任务，发现在加载训练好的模型进行输出CLS表示用于下游任务时，同一个句子的输出CLS表示都不一样，并且控制台输出以下警告信息。说是没有这些权重。…...

编程日记 2025/5/11 10:58:34

InfluxDB 集成 Grafana

将InfluxDB集成到Grafana进行详细配置通常包括以下几个步骤：安装与配置InfluxDB、安装与配置Grafana、在Grafana中添加InfluxDB数据源以及创建和配置仪表板。以下是一个详细的配置指南： 一、安装与配置InfluxDB 下载与安装： 从InfluxDB的官…...

编程日记 2025/5/10 3:12:04

Vue跨标签通讯(本地存储)(踩坑)

我司有一个需求【用户指引】需求是根标签有一个用户指引总开关，可以控制页面所有的用户指引是否在页面进入后初始是否默认打开，但是有些页面会新开标签这就设计到跨标签通讯了我采取的方案是本地存储重点:首先本地存储在页面是同源(即域名协议端口三…...

编程日记 2025/5/6 17:38:56

掌握创意之钥：全面解析HTML5 Canvas

在数字时代，表达创意的方式多种多样，而 HTML5 中的 <canvas> 元素无疑为网页开发者提供了一个强大的工具箱。无论你是想要创建动态图表、互动游戏还是复杂的可视化应用，掌握 Canvas 的基本用法都是迈向成功的关键一步。本文将带你一步步…...

编程日记 2025/5/11 2:43:24

mac port 安装redis 并设置为系统服务自定义配置方法

mac系统中，port 包管理工具比brew的速度快N倍，今天就给大家分享一下在macos系统中如何使用 port安装 redis数据库并配置为服务自动启动和自定义redis.conf配置的方法。 1. 安装redis sudo port install redis 2. 启动redis服务 sudo port load redis …...

编程日记 2025/5/10 10:23:37

Agent AI: Surveying the Horizons of Multimodal Interaction---摘要、引言、代理 AI 集成

题目智能体AI:多模态交互视野的考察论文地址：https://arxiv.org/abs/2401.03568 图1：可以在不同领域和应用程序中感知和行动的Agent AI系统概述。Agent AI是正在成为通用人工智能（AGI）的一个有前途的途径。Agent AI培训已经证…...

编程日记 2025/5/13 17:22:51

二百七十八、ClickHouse——将本月第一天所在的那一周视为第一周，无论它是从周几开始的，查询某个日期是本月第几周

一、目的 ClickHouse指标表中有个字段week_of_month，含义是这条数据属于本月第几周。而且将本月第一天所在的那一周视为第一周，无论它是从周几开始的。比如2024-12-01是周日，即12月第一周。而2024-12-02是周一，即12月第二周二…...

编程日记 2025/5/9 8:45:21

Unity 相机旋转及角度限制

前言由于欧拉角具有直观的可读性，做相机旋转时选择修改eulerAngles 来实现旋转，但实际效果与预期稍有不同，这是因为欧拉角受到万向锁（Gimbal Lock）的影响，在赋值时需要对输入的角度进行调整。 if (value…...

编程日记 2025/5/6 20:36:18

基于CentOS系统利用Kamailio搭建企业级SIP服务器

一、Kamailio简介 Kamailio是一款开源的SIP服务器，具有高性能、可扩展、模块化等特点。它广泛应用于VoIP、即时通讯、视频会议等领域。Kamailio支持多种操作系统，如Linux、FreeBSD等，可以与其他开源项目（如 Asterisk、FreeSWITCH…...

编程日记 2025/5/13 7:42:05

部署项目报错

vue2项目部署后 Error: Cannot find module /views/*** 1.起因登录页、首页等静态页面可以正常进入，后端访问也正常，可以获取到验证码。但是登录之后会发现首页空白或者进入不到首页 F12查看有报错信息：Error: Cannot find module ‘/v…...

编程日记 2025/5/5 8:09:37

【AIGC】大模型面试高频考点-位置编码篇

【AIGC】大模型面试高频考点-位置编码篇 （一）手撕绝对位置编码算法（二）手撕可学习位置编码算法（三）手撕相对位置编码算法（四）手撕 Rope 算法（旋转位置编码&#xf…...

编程日记 2025/5/7 12:14:17

钓鱼攻击详解：鱼叉攻击与水坑攻击

钓鱼攻击详解：鱼叉攻击与水坑攻击在现代网络安全领域中，钓鱼攻击（Phishing）是一种最常见且有效的攻击手段。它通过欺骗用户，引导其泄露敏感信息或执行恶意操作，从而为攻击者打开大门。本文将深入介绍两种…...

编程日记 2025/5/9 2:17:13

如何在自动化安全测试中，实现多工具集成与数据融合，以提高对Spring Boot应用程序安全漏洞的检测效率与准确性？

为了在自动化安全测试中实现多工具集成与数据融合，以提高对Spring Boot应用程序安全漏洞的检测效率与准确性，可以采取以下策略和方法： 文章目录 1. 工具选择与集成2. 数据标准化与聚合3. 数据分析与融合4. 持续改进5. 实施示例 1. 工具选择与…...

编程日记 2025/5/7 5:55:59

框架篇面试

一、Spring框架中的单例bean的安全性 Spring框架中有一个Scope注解，默认的值就是singleton，单例的；因为一般在spring的bean中注入的都是无状态的对象，所以没有线程安全问题。但是如果在bean中定义了可修改的成员变量，…...

编程日记 2025/5/13 2:10:11

STM32滴答定时器SysTick理解+时基设置(4.1)

文章目录 1. 什么是滴答定时器？2. SysTick定时器初始化2.1 systick定时器时钟源？2.2 定时器四个寄存器 3 函数设置3.1SysTick_Config（uint32_t ticks）函数3.2初始化函数 4. 延时函数实现4.1 ms延时思路及实现4.2 us延时 1. 什么是…...

编程日记 2025/5/12 14:42:50