4. 性能

学习成果

• 理解实际性能和感知性能的概念以及两者之间的区别。

• 理解关键性能概念

  • 源顺序。

  • 关键路径。

  • 延迟。

  • 浏览器如何渲染页面。

• 理解性能如何影响可持续性——良好的性能可以通过减少能源消耗和带宽使用量，对地球产生积极影响。

  • 能效

    • 代码性能（参见 4.5 JavaScript 与性能）。

    • 静态功耗（空闲状态）。

  • 硬件效率（可维修性/利用率）。

  • 需求效率

    • 空间（您在哪里执行计算）。

    • 时间（您何时执行计算）。

资源

• Web 性能的“为什么”

• 什么是 Web 性能？

• 感知性能

学习成果

• 如何减少页面加载时间

  • 使用最佳媒体格式和压缩。

  • 从静音视频中移除不必要的音频。

  • 使用 video preload 属性来减少初始下载量。

  • 考虑使用自适应流。

  • 使用 width 和 height 属性减少媒体加载卡顿。

  • 谨慎选择字体——尽量减小文件大小，例如只包含您需要的字形、变体和粗细。

• 如何改进“可用时间”

  • 通过最初只显示重要内容来最小化初始加载。尽快使重要的交互功能可用。

  • 当用户使用页面时，可以在后台加载其他数据和资源。

  • 对不需要立即使用的图像和其他资源使用延迟加载。

• 如何提高功能的感知性能

  • 使用动画在状态之间过渡，而不是让用户等待最终状态。

  • 使用加载微调器和进度条指示进度，让用户感觉有事情在发生。

  • 明智地使用事件，例如在 keydown 时触发操作，而不是等待 keyup。

资源

• 感知性能

• 多媒体：图像

• 多媒体：视频

学习成果

• 理解衡量性能的关键指标，例如首次内容绘制、速度指数、总阻塞时间、跳出率、独立用户/页面浏览量。

• 如何使用常用的性能测量工具

  • Google Lighthouse.

  • Pagespeed Insights.

  • WebPageTest.

  • Google Analytics.

  • 浏览器开发者工具。

• 如何使用 Performance Web APIs 创建自己的性能测量工具

  • Performance Timeline API。

  • Navigation Timing API。

  • User Timing API。

  • Resource Timing API。

资源

• 测量性能

• Performance APIs 参考

• Google Lighthouse > Performance

• 相关的 Firefox 开发者工具：网络监视器 和 性能监视器，Firefox Source Docs

• 相关的 Chrome 开发者工具：检查网络活动 (2019) 和 分析运行时性能 (2017)，developer.chrome.com

学习成果

• 理解改进 CSS 性能的技术

  • 仅在需要时加载；使用媒体查询进行优化。

  • 最小化动画，并强制 GPU 执行动画。

  • 最小化重绘。

  • 适当地使用 will-change 和 contain。

资源

• CSS 性能优化

学习成果

• 理解改进 JavaScript 性能的技术

  • 减少使用的 JavaScript 量。

  • 仅在需要时加载 JavaScript，并移除未使用的代码。

  • 适当地使用延迟/异步 JavaScript。

  • 压缩、打包和拆分 JavaScript。

资源

• JavaScript 性能