Performance 面板使用步骤
在 Chrome 中按 F12 → 切换到 Performance 标签页。
点击 ⚫️ 圆形按钮开始录制 → 操作页面 → 点击 🔴 停止（或者直接点击刷新）。
录制结束后，面板会自动生成性能报告，分为多个视图区域。
主要分为三大部分
最上面的是加载的大致情况，初略的分析
总览
大红色竖条或红色标记表示 “长时间任务”（Long Tasks） —— 即在主线程上执行时间 超过 50 毫秒 的 JavaScript 操作。
- 🟡 黄色区域：表示 JavaScript 执行时间
每一横条代表一段 JS 代码正在运行。如果黄色区域持续时间过长（如超过 200ms），说明主线程被阻塞，可能导致页面卡顿、无法及时响应用户操作。 - 🔴 红色竖条：表示 长任务（Long Tasks）
当主线程上的任务执行时间超过 50ms，就会标记为红色。这通常意味着某段 JavaScript、渲染或其他主线程工作耗时过长，是造成页面卡顿和交互延迟的重要原因之一。 - 🔵 蓝色区域：表示 加载（Loading）
主要表示 HTML 解析、资源加载及相关加载过程，通常和 CSS、JS、图片等资源请求有关。蓝色区域过多或持续时间过长，可能说明关键资源加载链路较长，从而影响首屏加载速度。 - 🟣 紫色区域：表示 渲染（Rendering）
表示浏览器对样式和布局进行计算的过程，包括样式计算（Recalculate Style）、Layout 等。紫色区域频繁出现或耗时较长，通常说明存在频繁改样式、改 DOM，或者触发了较多重排。 - 🟢 绿色区域：表示 绘制（Painting）
表示浏览器把已经计算好的页面内容真正绘制出来的过程，例如文字、颜色、边框、阴影、图片等的绘制。绿色区域过多，通常说明页面重绘开销较大。 - ⚪ 白色区域：表示 空闲状态 或 非关键耗时阶段
表示主线程当前没有执行明显的耗时任务，页面相对处于可响应状态。
渲染与交互时间线说明
在 Performance 面板中，位于 Network 区域下方的时间线展示了页面运行过程中的关键渲染与交互行为，用于评估视觉流畅性与用户体验稳定性。
Network（网络）面板的作用：可视化所有资源的加载过程，帮助你分析哪些资源导致了延迟、阻塞或重复请求。
Frames（帧）
- 显示浏览器每秒渲染的帧数及其耗时。
- 理想帧率为 60 FPS，对应每帧约 16.6 毫秒。
- 绿色帧：表示渲染及时，画面流畅。
- 黄色或红色帧：表示帧耗时超过 33ms（<30 FPS），通常由主线程被 JavaScript 或布局任务长时间占用导致。
- 大量非绿色帧表明页面存在卡顿，用户可能感知到操作延迟或动画不连贯。
Animations（动画）
- 记录 CSS 动画和 JavaScript 驱动的动画（如
requestAnimationFrame回调）的执行区间。 - 紫色条块 表示动画活跃时间段，长度反映动画持续时间。
- 为保障流畅性，应优先使用
transform和opacity实现动画效果，此类属性可由 GPU 加速处理，避免触发强制同步布局（forced synchronous layout）或重排，从而降低主线程负担。
Timings_loadDuration
它表示从页面开始加载到 window.load 触发的耗时，反映文档及其初始依赖资源的整体加载完成情况，但不等于所有后续异步资源都已完成。
- 以橙色横条形式呈现，表示从页面开始加载到
load事件触发的总耗时。 - 该指标反映整体加载完成效率。
- 若耗时过长，需结合 Network 与 Main Thread 分析是否由资源体积过大、请求数过多或脚本执行阻塞所致。
Layout Shifts（布局偏移）
-
以浅紫色菱形标记显示，表示页面内容发生意外位移的时刻。
-
常见原因包括：
- 图片或媒体元素未预设宽高；
- 动态插入内容（如广告、通知）未预留空间；
- 字体加载导致文本重排。
-
布局偏移会破坏视觉稳定性，尤其在移动端易引发误点击，应通过预留占位、使用
font-display: swap、避免顶部动态插入等方式加以控制。
主线程火焰图（Main）
作用：
浏览器的主线程，负责执行 JavaScript、DOM 解析、样式计算、布局（Layout） 和 部分绘制（Paint）。
其中，
x轴表示时间线
y轴表示调用栈的深度，上层调用下层
- 黄色：JavaScript 执行（Scripting） 。
- 紫色：布局计算（Layout）。
- 绿色：绘制（Painting）。
- 蓝色：HTML 解析、事件处理等。
四大面板
“Summary”（摘要）视图是对整个页面加载过程中主线程活动的统计汇总。它将所有操作按照类型分组，展示了每类任务所消耗的时间，帮助我们快速识别性能瓶颈所在。以下是对图中各项内容的依次说明：
Scripting（脚本执行） 这一阶段主要包括 JavaScript 的解析、编译和执行过程，也包括事件回调、函数调用等逻辑处理。如果 Scripting 时间过长，通常意味着存在大量同步代码、复杂计算或未优化的初始化逻辑，会直接阻塞页面渲染，导致用户感知到卡顿。
Rendering（渲染），这一步骤包含样式计算（Style Calculation）、布局（Layout）以及重排（Reflow）。当 DOM 结构发生变化或 CSS 样式更新时，浏览器需要重新计算元素的位置和尺寸，这个过程属于 Rendering 范畴。若该阶段耗时较长，可能是因为频繁修改 DOM 或使用了复杂的 CSS 布局。
System（系统操作），这部分主要反映浏览器内部的系统级任务，例如垃圾回收（Garbage Collection）、内存管理、V8 引擎的后台工作等。虽然这些操作不在开发者直接控制范围内，但长时间的 System 时间往往与内存泄漏或对象创建过多有关，应引起注意。
Painting（绘制），这是指浏览器将计算好的布局信息实际绘制到屏幕上的过程，包括 Paint（绘图）和 Composite（合成）两个子阶段。Painting 时间过长可能是因为页面内容复杂、图片过多或存在频繁的重绘操作。
Loading（资源加载），这表示浏览器获取 HTML、CSS、JavaScript 等静态资源的过程，包括 DNS 查询、TCP 握手、TLS 加密以及数据传输。虽然在这个案例中 Loading 时间较短，但如果网络请求较多或文件较大，此阶段也可能成为瓶颈。
Messaging（消息通信），这一项通常涉及浏览器内部不同进程之间的通信，比如主进程与渲染进程之间传递指令，或是跨域 iframe 之间的消息传递。一般情况下该值较小，除非有大量跨域交互或复杂的消息机制。
Total（总耗时），即主线程从开始到结束共花费的时间，这个数值反映了页面整体的响应延迟，是衡量用户体验的重要指标之一。
Performance
简单的查看性能方式是点击浏览器面板的performace
核心 Web 指标（Core Web Vitals）简介
Google 提出的 Core Web Vitals 是衡量网页真实用户体验的三大关键指标，分别为 LCP（最大内容绘制） 、CLS（累计布局偏移） 和 INP（交互到下次绘制） 。这三项指标分别从加载速度、视觉稳定性和交互响应性三个维度，客观反映用户对页面的主观感受。
- LCP（Largest Contentful Paint） 衡量页面主要内容加载完成的时间，通常指首屏中最大的图片、视频或文本块完全渲染的时刻。
- CLS（Cumulative Layout Shift） 衡量页面在加载过程中发生的非预期布局变动总和。例如图片未设宽高导致加载后撑开页面，或广告动态插入使下方内容突然下移。CLS 反映了页面的视觉稳定性。
- INP（Interaction to Next Paint） 衡量用户与页面交互（如点击按钮、输入文本）后，系统响应并更新屏幕所需的时间。它聚焦于最差的一次交互延迟，体现页面是否“跟手”。
如何通过 Core Web Vitals 评估网站性能
这三项指标均有明确的性能阈值，Google 将其划分为“良好”、“需改进”和“差”三个等级：
| 指标 | 良好（Good） | 需改进（Needs Improvement） | 差（Poor） |
|---|---|---|---|
| LCP | ≤ 2.5 秒 | 2.5s ~ 4.0s | > 4.0 秒 |
| CLS | ≤ 0.1 | 0.1 ~ 0.25 | > 0.25 |
| INP | ≤ 200 毫秒 | 200ms ~ 500ms | > 500 毫秒 |
评估应以真实用户数据（如 Chrome User Experience Report, CrUX）或 Lighthouse 审计结果为依据：
- 若 LCP 超过 4 秒，说明首屏内容加载过慢，用户可能在看到关键信息前就已离开；
- 若 CLS 超过 0.25，表明页面存在严重跳动，易导致误操作，尤其影响移动端体验；
- 若 INP 超过 500 毫秒，意味着用户点击后需等待半秒以上才有反馈，会显著降低操作信心。
综合来看，一个高性能网站应满足：LCP ≤ 2.5s、CLS ≤ 0.1、INP ≤ 200ms。若任一指标落入“差”的区间，即表明该方面存在明显体验缺陷，需优先优化；若三项均处于“良好”范围，则说明网站在加载速度、稳定性与交互响应上已达到现代 Web 应用的基本标准。
如何针对性优化 Core Web Vitals
- 优化 LCP
优先加载首屏关键资源：使用 <link rel="preload"> 预加载主图或字体；压缩图片并采用 WebP/AVIF 格式；启用 CDN 加速；采用服务端渲染（SSR）或静态生成（SSG）减少客户端渲染延迟。由于一般都是用csr，这个过程有js下载，之后才能加载对应的图片。
- 优化 CLS
为所有图片和嵌入内容显式设置 width 和 height；为广告、横幅等动态区域预留占位容器；避免在已有内容上方插入新元素；使用 font-display: swap 减少字体加载引起的文字重排。
- 优化 INP
减少主线程上的长任务（>50ms）；将复杂计算拆分为小块，利用 requestIdleCallback 或 setTimeout 分批执行；将 CPU 密集型逻辑移至 Web Worker；避免在事件监听器中执行重型同步操作；合理使用 React/Vue 的 memoization 机制减少无效重渲染。
Lighthouse
找到google的控制面板，可以进行性能的衡量
💡 Lighthouse 是什么？
它是 Chrome 内置的开源工具，模拟真实用户访问，自动评估网页在加载速度、可访问性、SEO 等方面的表现，满分为 100 分。
点击右上角分析按钮
网站健康度评估与优化指南
基于 Lighthouse 审计结果，对网站在性能、无障碍、最佳实践和 SEO 四个维度的表现进行分析，并提供针对性改进建议。目标是提升用户体验、可访问性与搜索引擎可见性。
1. 性能（Performance）
什么是性能指标
性能衡量网站加载速度、交互响应和运行流畅度的综合表现。加载超过 3 秒的页面会导致超半数移动用户流失（Google 数据），直接影响留存与转化。
什么是“不好”的表现？
- 首屏内容出现慢（FCP ≈ 3.5 秒，远超 1.8 秒推荐值）
- 主要内容渲染极慢（LCP > 25 秒，严重超出 2.5 秒阈值）
- JavaScript 执行时间过长，长时间阻塞主线程
- 可能受本地缓存（如 IndexedDB）干扰，导致测试结果失真
如何优化？
| 优化方向 | 具体措施 | 预期效果 |
|---|---|---|
| 图片优化 | 将大图（如 3MB）压缩为 WebP/AVIF 格式，目标 ≤ 300KB | 减少带宽消耗，显著加速 LCP |
| 懒加载 | 首屏外的图片、组件采用 loading="lazy" 或 Intersection Observer 延迟加载 | 降低初始负载，加快首屏渲染 |
| 代码分割 | 使用动态 import() 拆分大型 JS 包，按需加载 | 减少首屏 JS 体积，缩短解析与执行时间 |
| 启用压缩 | 在 Nginx/Apache 中配置 Gzip 或 Brotli 压缩 HTML/CSS/JS | 文件体积减少 60%~80% |
| 移除阻塞资源 | 非关键 CSS/JS 使用 async 或 defer，避免阻塞渲染 | 提升 FCP 和 LCP |
| 真实环境测试 | 在无痕窗口中重新运行 Lighthouse，排除 IndexedDB/缓存干扰 | 获取更准确的首次访问性能数据 |
2. 无障碍（Accessibility）
什么是无障碍？
无障碍确保视障、听障、行动障碍等用户也能顺畅使用网站。它不仅是 WCAG 等法规的要求，更是产品包容性的体现。
什么是“不好”的表现？
- 图片缺少
alt文本，屏幕阅读器只能读出文件名（如 “IMG_0231.jpg”） - 文字与背景颜色对比度不足（如浅灰色文字 on 白底），影响低视力用户
- 键盘导航支持不完整，部分功能无法通过 Tab/Enter 操作
- HTML 结构非语义化（如用
<div>代替<nav>、<main>）
如何优化？
| 问题类型 | 修复方式 | 说明 |
|---|---|---|
缺失 alt | <img src="logo.png" alt="腾讯元宝 Logo"> | 屏幕阅读器将朗读有意义的描述 |
| 对比度不足 | 使用 WebAIM Contrast Checker 验证 | 正文文本与背景对比度应 ≥ 4.5:1 |
| 键盘不可操作 | 确保所有交互元素可通过 Tab 聚焦、Enter 触发 | 测试方法：拔掉鼠标，仅用键盘操作全站 |
| 非语义化标签 | 用 <header>、<nav>、<main>、<footer> 替代通用 <div> | 屏幕阅读器可识别页面区域结构 |
3. 最佳实践（Best Practices）
什么是最佳实践？
该指标评估是否遵循现代 Web 开发的安全性、兼容性和可维护性规范。
优化
-
全站使用 HTTPS，无混合内容
-
浏览器控制台无 JavaScript 运行时错误
-
所有图片均设置
width和height属性 -
未使用已废弃的 API（如
document.write） -
资源返回正确的 MIME 类型
4. SEO（搜索引擎优化）
什么是 SEO？
SEO 决定网站在 Google、百度等搜索引擎中的可见性与排名，直接影响自然流量获取能力。
什么是“不好”的表现？
- 页面缺少
<meta name="description">，搜索结果摘要为空或截断 - 标题结构混乱（如多个
<h1>，或跳过层级） - URL 不友好（如
/page?id=123），缺乏语义信息 - 未提供
sitemap.xml，搜索引擎难以发现全部页面 - 移动端适配不足（文字过小、需横向滚动）
如何优化？
| 优化项 | 实施方式 |
|---|---|
| 添加 meta 描述 | <meta name="description" content="腾讯元宝 - 你的 AI 助手，支持多轮对话、文档解析..."> |
| 规范标题层级 | 每页仅一个 <h1>，子标题依次使用 <h2> → <h3> |
| 优化 URL 结构 | 将 /activity?id=123 改为 /activity/channel-reward |
| 生成 sitemap | 创建 sitemap.xml 并提交至 Google Search Console |
| 确保移动端友好 | 使用响应式设计，字体 ≥ 14px，避免横向滚动 |
