Web 性能是 Web 开发的一个关键方面，它侧重于页面加载速度以及对用户输入的响应速度。当您优化网站性能时，您将为用户提供更好的体验。更好的用户体验对于帮助您实现网站的预期目标大有裨益。
Web 性能看起来可能是一个小众话题，但实际上它既广泛又深入。鉴于其作为一个主题领域的深度，关于 Web 性能的课程既平易近人又内容丰富至关重要。本课程的初始版本侧重于初学者应该觉得内容丰富的 Web 性能基础知识。
本系列中的每个模块都旨在尽可能地提供一组演示，以补充每个模块的内容并演示关键的性能概念。鉴于本课程是首次推出，目前正计划在未来几个月内发布更多模块。
以下是 Learn Performance 初始课程的内容
为什么速度很重要
在开始学习性能之前，您首先必须了解其在用户体验中的作用，以及它如何为用户带来更好的结果。本课程首先简要介绍这些主题，为学习性能的重要性提供重要的背景信息。
HTML 性能通用注意事项
每个网站都从请求 HTML 文档开始，该请求对于网站的加载速度起着重要作用。本模块涵盖了 HTML 缓存、解析器阻塞、渲染阻塞等重要概念，因此您可以确保对网站 HTML 的第一个请求顺利进行。
了解关键路径
关键渲染路径是 Web 性能中的一个概念，它处理页面初始渲染在浏览器中显示的速度。本模块深入探讨了关键渲染路径背后的理论，涵盖了渲染阻塞和解析器阻塞资源等概念，以及它们如何在页面在浏览器中显示的速度方面发挥关键作用。
优化资源加载
当页面加载时，其 HTML 中引用了许多资源，这些资源通过 CSS 为页面提供外观和布局，并通过 JavaScript 为页面提供交互性。在本模块中，涵盖了与这些资源以及它们如何影响页面加载时间相关的许多重要概念。
使用资源提示协助浏览器
资源提示是 HTML 中可用的一组功能，可以帮助浏览器更早地加载资源，甚至可能以更高的资源优先级加载资源。在本模块中，介绍了一些可以帮助您的页面加载速度更快的资源提示。
图片性能
图片代表了当今许多网页上传输的大部分数据。本模块介绍了如何优化图片，以及如何有效地提供图片，以便最大限度地减少浪费的字节，无论用户使用何种设备。
视频性能
视频是一种经常在网页上使用的媒体类型，但了解如何有效地提供视频是您不应忽视的性能方面。本模块介绍了一些关键技术，用于以保持网站快速的方式嵌入视频，以及可能因其使用而产生的相邻性能注意事项。
优化 Web 字体
Web 字体是 Web 上常用的一种资源，这是理所当然的，因为它们以其他资源无法实现的方式为网站的设计增添色彩。即便如此，Web 字体仍然有性能成本。在本模块中，探讨了围绕 Web 字体的一些性能注意事项和技术。
代码拆分 JavaScript
有些资源对于网页的初始加载并不重要。JavaScript 就是这样一种资源，可以通过称为代码拆分的技术将其延迟到需要时再加载。通过这样做，您可以通过减少带宽和 CPU 争用来提高性能，这对于提高初始页面加载速度和启动期间的输入响应能力至关重要。
延迟加载图片和 <iframe> 元素
图片和 <iframe> 元素会消耗大量带宽和 CPU 处理时间。但是，并非所有图片和 <iframe> 元素都需要在初始页面加载期间加载，并且可以延迟到用户最有可能看到它们的稍后时间。此技术称为延迟加载。在本模块中，解释了延迟加载图片和 <iframe> 元素，以便您可以让页面加载速度更快，并且仅在需要时才消耗带宽和处理时间。
预提取、预渲染和 Service Worker 预缓存
虽然大部分性能都与您可以做些什么来优化和消除不必要的资源有关，但建议在需要之前加载某些资源似乎有点自相矛盾。但是，在某些情况下，提前加载某些资源可能是合适的。在本模块中，探讨了性能的这一方面，并讨论了预提取、预渲染和 Service Worker 预缓存。
Web Worker 概述
用户在浏览器中看到的大部分内容都发生在称为主线程的单线程上。但是，在某些情况下，您可以启动新线程来执行计算密集型工作，以便主线程可以容纳重要的面向用户的任务。执行此操作的 API 称为 Web Worker API，在本模块中，介绍了它的基础知识。
Web Worker 具体用例
现在您已经对 Web Worker 及其功能和局限性有了基本的了解，现在是时候看看 Web Worker 的具体用例了。在此演示中，Web Worker 用于获取 JPEG 文件，提取其元数据，并将其发送回主线程，以便用户可以在浏览器中看到它。
准备好开始学习 Web 性能了吗？首先阅读为什么速度很重要，开始学习吧。