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