Web 性能指南
此页面列出了 Web 性能指南。它们旨在帮助您了解可以改进 Web 项目性能的各种方法。
- 动画性能和帧速率
Web 上的动画可以通过
SVGAnimationElement、window.requestAnimationFrame，包括canvas和WebGL_API、CSSanimation、video、动画 GIF 甚至动画 PNG 和其他图像类型来实现。为 CSS 属性设置动画的性能成本可能因属性而异，为昂贵的 CSS 属性设置动画可能导致浏览器难以达到平滑的帧率而出现卡顿。- 关键渲染路径
关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕像素所经历的步骤序列。优化关键渲染路径可以提升渲染性能。关键渲染路径包括 文档对象模型 (DOM)、CSS 对象模型 (CSSOM)、渲染树和布局。
- CSS 和 JavaScript 动画性能
动画对于许多应用程序的愉悦用户体验至关重要。实现 Web 动画的方法有很多，例如 CSS
transition/animation或基于 JavaScript 的动画（使用Window.requestAnimationFrame）。在本文中，我们将分析基于 CSS 和基于 JavaScript 的动画之间的性能差异。- 懒加载
懒加载是一种将资源标识为非阻塞（非关键）并仅在需要时加载这些资源的策略。这是一种缩短关键渲染路径长度的方法，从而减少页面加载时间。
导航计时是衡量浏览器文档导航事件的指标。资源计时是关于应用程序资源加载的详细网络计时测量。两者都提供相同的只读属性，但导航计时测量主文档的计时，而资源计时提供主文档及其请求的资源所调用的所有资产或资源的计时。
- 优化启动性能
提高启动性能通常是性能优化中价值最高的一项。您的应用程序需要多长时间才能启动？在应用程序加载时，它是否会锁定设备或用户的浏览器？这会让用户担心您的应用程序已崩溃，或者出现其他问题。良好的用户体验包括确保您的应用程序能够快速加载。本文为编写新应用程序和将应用程序从其他平台移植到 Web 提供了性能技巧和建议。
- 性能预算
性能预算是一种防止性能退化的限制。它可以应用于文件、文件类型、页面上加载的所有文件、特定指标（例如，可交互时间）、自定义指标（例如，英雄元素加载时间）或一段时间内的阈值。
- 性能基础
性能意味着效率。在开放网络应用的背景下，本文档总体解释了什么是性能，浏览器平台如何帮助提升性能，以及你可以使用哪些工具和流程来测试和提升性能。
- 性能监控：RUM vs. 合成监控
合成监控和真实用户监控 (RUM) 是两种用于监控和提供 Web 性能洞察的方法。RUM 和合成监控提供不同的性能视图，并具有各自的优点、良好的用例和缺点。RUM 通常最适合理解长期趋势，而合成监控非常适合回归测试和缓解开发过程中较短期的性能问题。在本文中，我们将定义和比较这两种性能监控方法。
- 填充页面：浏览器如何工作
用户希望 Web 体验内容能够快速加载，并且交互流畅。因此，开发人员应努力实现这两个目标。
- 推荐的 Web 性能时间：多长时间算太长？
对于页面加载速度慢的明确规则没有明确规定，但有具体的指导原则用于指示内容将加载（1 秒）、空闲（50 毫秒）、动画（16.7 毫秒）和响应用户输入（50 到 200 毫秒）。
- 推测性加载
推测性加载是指在实际访问相关页面之前执行导航操作（例如 DNS 获取、获取资源或渲染文档）的做法，其依据是对用户最可能接下来访问哪些页面的预测。
- 理解延迟
延迟是指数据包从源头传输到目的地的所需时间。在性能优化方面，重要的是要优化以减少延迟的原因，并测试网站性能，模拟高延迟以优化连接不佳的用户。本文解释了什么是延迟，它如何影响性能，如何测量延迟以及如何减少延迟。
- 使用 dns-prefetch
DNS-prefetch是在请求资源之前尝试解析域名。这可能是一个稍后加载的文件或用户尝试访问的链接目标。