4. 性能

学习目标

• 了解实际性能和感知性能的概念以及两者之间的区别。
• 了解关键性能概念
  • 源代码顺序。
  • 关键路径。
  • 延迟。
  • 浏览器如何渲染页面。
• 了解性能如何影响可持续性 - 良好的性能可以通过减少能源使用和带宽消耗对地球产生积极影响
  • 能源效率
    • 代码性能（参见 4.5 JavaScript 和性能）。
    • 静态功耗（空闲状态）。
  • 硬件效率（可修复性/利用率）。
  • 需求效率
    • 空间（您在何处执行计算）。
    • 时间（您何时执行计算）。

资源

• Web 性能的“为什么”
• 什么是 Web 性能？
• 感知性能

学习目标

• 如何减少页面加载时间
  • 使用最佳的媒体格式和压缩。
  • 从静音视频中删除不必要的音频。
  • 使用视频预加载属性来减少预先下载。
  • 考虑使用自适应流。
  • 使用 width 和 height 属性减少媒体加载抖动。
  • 注意字体选择 - 尽可能保持文件大小尽可能小，例如只包含您需要的字形、变体和权重。
• 如何提高“可用时间”
  • 通过最初只显示重要内容来最小化初始加载。尽快使重要的交互式功能具有交互性。
  • 其他数据和资源可以在用户使用页面时在后台加载。
  • 对图像和其他不需要立即加载的资源使用延迟加载。
• 如何提高功能的感知性能
  • 使用动画在状态之间进行过渡，而不是让用户等待最终状态。
  • 使用加载微调器和进度条指示进度，这样用户会感觉正在发生一些事情。
  • 明智地使用事件，例如在 keydown 上触发操作，而不是等待 keyup。

资源

• 感知性能
• 多媒体：图像
• 多媒体：视频

学习目标

• 了解用于衡量性能的关键指标，例如首次内容绘制、速度指数、总阻塞时间、跳出率、唯一用户/页面浏览量。
• 如何使用常见的性能测量工具
  • 谷歌 Lighthouse.
  • PageSpeed Insights.
  • WebPageTest.
  • 谷歌分析.
  • 浏览器 DevTools。
• 如何使用 Performance Web API 创建您自己的性能测量工具
  • Performance Timeline API。
  • Navigation Timing API。
  • User Timing API。
  • Resource Timing API。

资源

• 性能衡量
• 性能 API 参考
• 谷歌 Lighthouse > 性能
• 相关的 Firefox DevTools：网络监视器 和 性能监视器，Firefox 源代码文档
• 相关的 Chrome DevTools：检查网络活动（2019）和 分析运行时性能（2017），developer.chrome.com

学习目标

• 了解提高 CSS 性能的技术
  • 仅在需要时加载；使用媒体查询进行优化。
  • 最小化动画，并在 GPU 上强制动画。
  • 最小化重绘。
  • 适当地使用 will-change 和 contain。

资源

• CSS 性能优化

学习目标

• 了解提高 JavaScript 性能的技术
  • 减少使用的 JavaScript 数量。
  • 仅在需要时加载 JavaScript，并删除未使用的代码。
  • 适当地使用延迟/异步 JavaScript。
  • 压缩、打包和拆分 JavaScript。

资源

• JavaScript 性能