Web 性能指南
本页列出了 Web 性能指南。它们旨在帮助你了解有哪些方法可以提升你的 Web 项目性能。
- CSS 动画与 JavaScript 动画的性能
对众多应用程序而言，动画对提供友好的用户体验有着关键的作用。我们有很多方式生成 web 动画，比如 CSS
transition和animation或者基于 JavaScript 的动画（使用Window.requestAnimationFrame）。在这篇文章中，我们分析 CSS 动画和 JavaScript 动画的性能差异。- Web 性能计时推荐：多久才算太久？
对于加载页面时速度缓慢的定义并不明确，但有一些具体的指导方针：在 1 秒内加载内容、在 50 毫秒内释放线程、在 16.7 毫秒内渲染一帧动画、在 50 至 200 毫秒内响应用户输入。
- 优化启动性能
一个在软件应用开发中经常被忽视的方面—即便在那些专注于性能优化的软件中—就是启动时的表现。你的应用需要花费多长时间启动？当应用加载时是否会卡住用户的设备或浏览器？这会让用户担心你的应用崩溃了，或者哪儿出错了。花时间确保你的应用能够更好地启动总是一个好主意。这篇文章提供了一些技巧和建议来帮助你达成这个目标，不管是在写一个新的应用还是从其他平台向 Web 移植一个应用。
- 使用 dns-prefetch
DNS-prefetch尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。- 关键渲染路径
关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了文档对象模型（DOM）、CSS 对象模型（CSSOM）、渲染树和布局。
- 懒加载
懒加载（延迟加载）是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略。这是一种缩短关键渲染路径长度的方法，可以缩短页面加载时间。
- 推测性加载
推测性加载（Speculative load）是指在用户实际访问相关页面之前，基于对用户下一步最有可能访问的页面的预测，来进行导航操作（如 DNS 获取、获取资源或渲染文档）的行为。
- 渲染页面：浏览器的工作原理
在浏览网页时用户希望页面的内容能够快速加载且流畅交互。因此，开发者应力争实现这两个目标。