了解性能

本课程专为 Web 性能新手设计，Web 性能是用户体验的重要方面。它涵盖了关键的 Web 性能概念和提高性能的技术。

在开始学习性能之前，您首先必须了解其在用户体验中的作用，以及它如何为用户带来更好的结果。本课程首先简要介绍这些主题，为理解学习性能的重要性提供重要的背景信息。

每个网站都始于对 HTML 文档的请求，该请求对于网站的加载速度起着重要作用。本模块涵盖了重要的概念，例如 HTML 缓存、解析器阻塞、渲染阻塞等，以便您可以确保对网站 HTML 的第一个请求有一个良好的开端。

关键渲染路径是 Web 性能中的一个概念，它处理页面在浏览器中初始渲染显示的速度。本模块深入探讨了关键渲染路径背后的理论，涵盖了渲染阻塞和解析器阻塞资源等概念，以及它们如何在页面在浏览器中显示的速度方面发挥关键作用。

当页面加载时，其 HTML 中引用了许多资源，这些资源通过 CSS 为页面提供外观和布局，并通过 JavaScript 提供交互性。在本模块中，涵盖了与这些资源及其如何影响页面加载时间相关的许多重要概念。

资源提示是 HTML 中可用的一系列功能，可以帮助浏览器更早地加载资源，甚至可能以更高的资源优先级加载。在本模块中，介绍了一些可以帮助您的页面加载速度更快的资源提示。

如今，图片在许多网页上占据了传输数据的大部分。本模块介绍了如何优化图片，以及如何有效地提供图片，以便最大限度地减少浪费的字节，无论用户使用何种设备。

视频是一种经常在网页上使用的媒体类型，但了解如何有效地提供视频是您不应忽视的一个性能方面。本模块介绍了一些关键技术，用于以使您的网站保持快速的方式嵌入视频，以及使用视频可能出现的相邻性能注意事项。

Web 字体是 Web 上常用的一种资源，理所当然，因为它们以其他资源无法实现的方式为网站的设计增色。即便如此，Web 字体仍然有性能成本。在本模块中，探讨了围绕 Web 字体的一些性能注意事项和技术。

某些资源对于网页的初始加载并非至关重要。JavaScript 就是这样一种资源，可以通过称为代码拆分的技术推迟到需要时再加载。通过这样做，您可以通过减少带宽和 CPU 争用来提高性能，这对于提高初始页面加载速度和启动期间的输入响应能力至关重要。

图片和 iframe 元素会消耗大量的带宽和 CPU 处理时间。但是，并非所有图片和 iframe 元素都需要在初始页面加载期间加载，并且可以推迟到用户最有可能看到它们的时间。这种技术称为_延迟加载_。在本模块中，将解释延迟加载图片和 iframe 元素，以便您可以使页面加载速度更快，并且仅在需要时才消耗带宽和处理时间。

虽然大部分性能都与您可以采取哪些措施来优化和消除不必要的资源有关，但建议在某些资源需要之前加载它们似乎有点自相矛盾。但是，在某些情况下，提前加载某些资源_可能_是合适的。在本模块中，探讨了性能的这一方面，讨论了预取、预渲染和服务 Worker 预缓存。

用户在浏览器中看到的大部分内容都发生在称为_主线程_的单线程上。但是，在某些情况下，您可以启动新线程来执行计算密集型工作，以便主线程可以适应重要的面向用户的任务。执行此操作的 API 称为 Web Worker API，在本模块中，介绍了它的基础知识。

现在您已经基本了解了 Web Worker 及其功能和局限性，现在是时候看看 Web Worker 的具体用例了。在本演示中，Web Worker 用于获取 JPEG 文件，提取其元数据，并将其发送回主线程，以便用户可以在浏览器中看到它。