了解 Web 平台信息中心，以及如何查询其 HTTP API 以获取已达到基准的功能的数据，以便为您的开发工作流构建工具。

随着 Core Web Vitals 的重要性日益增强，网站所有者和开发者越来越关注性能和关键用户体验。Google 提供了许多工具来帮助评估、优化和监控网页，但不同的数据源和有效使用方式往往会让用户感到困惑。本指南提出了一种将多种工具相结合的工作流程，并阐明了这些工具在开发过程中的意义和方式。

了解 2025 年 2 月与基准相关的各种活动。

ruby-align 现已纳入 Baseline

发布时间：2025 年 2 月 20 日 可靠地下载大型 AI 模型是一项具有挑战性的任务。如果用户的互联网连接中断或关闭您的网站或 Web 应用，他们会丢失部分下载的模型文件，并且在返回您的网页后必须重新开始。通过将 Background Fetch API 用作渐进式增强功能，您可以显著提升用户体验。 Browser Support Source Background Fetch API 要求您的应用 注册服务工件 。

了解 rel=prefetch 资源提示及其用法。

了解如何识别和解决布局偏移。

Cumulative Layout Shift (CLS) 是一项指标，用于量化用户遇到网页内容突然偏移的频率。在本指南中，我们将介绍如何优化导致 CLS 的常见原因，例如没有尺寸或动态内容的图片和 iframe。

CSS scrollbar-color 和 scrollbar-gutter 已在所有主流浏览器引擎中推出，因此已成为“新推出的 Baseline”功能。

WasmFS 和 Emscripten 中的 mimalloc 功能对分配和 I/O 性能有很大帮助。本指南将介绍这些功能如何在某些情况下将速度提高 10 倍或更多。

这是 Baseline 月度摘要的第一期，涵盖了 2025 年 1 月 Google 和 Web 开发者社区的 Baseline 动态。

WebAssembly 垃圾回收和 Wasm 尾调用优化现已在所有主流浏览器引擎中推出，因此它们已成为新的基础配置。

这篇博文介绍了 Largest Contentful Paint (LCP) 指标并说明了如何测量该指标

Promise.try 现已在所有主流浏览器引擎中推出，成为了新推出的 Baseline 功能。

简短说明

发布时间：2024 年 1 月 13 日 您可以使用 AI、传统机器学习模型和较新的大语言模型 (LLM) 构建许多令人惊叹的项目。借助 LLM，计算机可以生成新内容、撰写摘要、分析文本的情感等。在过去几年里，人们有机会使用 Gemini 和 ChatGPT 等应用，这些应用使用先进的自然语言处理 (NLP) 技术与用户进行对话。 Google 开发者专家 Christian Liebel 撰写了一篇文章，介绍了如何使用 LLM 向网站或 Web 应用添加聊天机器人。 在本系列中，您将：

发布时间：2024 年 1 月 13 日 本文是关于 LLM 和聊天机器人的三篇系列文章中的第一篇。第 2 部分介绍了如何 使用 WebLLM 构建聊天机器人 ，第 3 部分介绍了如何 使用 Prompt API 。 大语言模型 (LLM) 正成为软件开发中的重要构建块：LLM 非常适合生成和处理自然语言文本，可实现数据提取、总结等应用场景，或协助与用户数据进行对话。 在本系列文章中，我将介绍设备端 LLM 的优点和缺点，并引导您使用两种本地和离线方式（基于 Web 的 LLM 运行时

有人告诉你不要阻塞主线程并拆分长任务，但执行这些任务意味着什么呢？

借助 CSS 遮罩，您可以选择将图片用作遮罩层。这意味着，您可以使用图片、SVG 或渐变作为遮罩，在不使用图片编辑器的情况下制作有趣的效果。

web-features 数据集、Web 平台状态信息中心、基准状态微件等！回顾一下 2024 年的基准。

本文介绍了延迟加载以及您可以用于延迟加载视频的选项。

模块预加载提供了一种以声明方式提前加载 JavaScript 模块的方法。

为了优化用户体验，了解用户如何与您的表单互动至关重要。浏览器自动填充功能在此过程中发挥着重要作用。了解如何收集和分析有关用户如何在表单中使用自动填充功能的数据。

毒性内容检测功能可保护您的用户，并营造更安全的在线环境。在第 2 部分，我们将学习如何构建客户端 AI 工具，以便在源头检测和减少毒性内容。

本文介绍了总阻塞时间 (TBT) 指标，并说明了如何衡量该指标

了解如何在真实环境和实验室环境中衡量网站的 Web Vitals。

关于如何分解 LCP 并确定有待改进的关键方面的分步指南。

衡量网站是否运行正常的基本指标

以下是 Chrome 确定的一系列最佳实践，它们是优化网站性能和提升 Core Web Vitals 的最大机遇

CSS content-visibility 属性现已面向 Baseline Newly 提供。

核心网页指标阈值背后的研究和方法

您浏览了现场数据，发现存在一些缓慢的互动。下一步是详细了解如何手动测试这些互动，并找出这些互动背后的原因。

本文介绍了 Baseline 的起源故事、Google 的参与以及 WebDX 社区小组的所有权。

了解如何优化网页，让用户在使用浏览器的后退和前进按钮时能够即时加载。

CSS 嵌套功能得到了大幅改进！

此博文介绍了 First Input Delay (FID) 指标，并说明了如何衡量该指标

了解如何使用调试信息对性能数据进行归因，以帮助您通过数据分析发现和修复真实用户的问题

@property 对 CSS 的性能有何影响？

了解如何利用 Google 工具将 Core Web Vitals 与广告收入关联起来。

在浏览器中存储数据有多种选择。哪种方式最符合您的需求？

这篇博文将介绍加载属性以及如何使用该属性来控制 iframe 的加载。

了解构建多个 PWA 重复使用同一域名的推荐和不推荐方法及其优缺点。

分步互动式教程，介绍如何构建服务器以管理推送通知订阅并将 Web 推送协议请求发送到推送服务。

优秀或出色的渐进式 Web 应用有何特点？

渐进式 Web 应用可安装性标准。

为 PWA 更改 Web 应用清单中的图标、快捷方式、颜色和其他元数据所需的操作。

Web 应用清单是一个简单的 JSON 文件，用于告知浏览器您的 Web 应用应采取的行为。

了解如何基于脚本 Nonce 或哈希部署 CSP，以深度防范跨站脚本攻击。

本文可帮助 Web 开发者根据给定设备选择合适的硬件 API。

了解如何使用相关源请求 (Related Origin Request)，以允许在您的各个网站上重复使用通行密钥。

此博文将介绍加载属性以及如何使用该属性来控制图片的加载。

为了在您的网站上投放经过优化的图片，首先要选择适当的图片格式。此帖子可帮助您做出正确的选择。

利用自定义指标，您可以衡量和优化您的网站为网站带来的独特体验。

了解如何将 Web Vitals 数据发送到 Google Analytics 4 媒体资源，以及如何导出此类数据以便在 BigQuery 和 Looker Studio 中进行分析。

本指南概述了网站在请求用户授予敏感功能（例如摄像头、麦克风和位置信息）的使用权限时应遵循的最佳做法，以最大限度减少不必要的提示和禁止访问。

了解 Cookie 通知对性能、效果衡量和用户体验有何影响。

网络开发者可以使用 Media Session API 自定义媒体通知并响应媒体相关事件，例如跳转或轨道变化。

要在实验室中重现缓慢的互动问题，以优化网站的 Interaction to Next Paint，您需要依靠现场数据来找到它们。本指南介绍了如何执行此操作。

使用 tabindex 属性明确设置元素的标签页位置。

这篇博文介绍了 Time to First Byte (TTFB) 指标，并说明了如何对其进行测量。

了解如何调整提示，以便在不同的 LLM、模型和模型大小中实现首选结果。

这篇博文介绍了 Interaction to Next Paint (INP) 指标，并说明了其工作原理和测量方式，并就如何改进该指标提供了建议。

description：使用 light-dark() 函数定义可响应所用配色方案的颜色。

本指南面向希望从 WebAssembly 中受益的 Web 开发者，您将学习如何借助正在运行的示例，利用 Wasm 外包 CPU 密集型任务。

在 CSS 网格中，您可以使用 `grid-template-columns` 和 `grid-template-rows` 属性分别定义线条名称并跟踪网格列和行的大小。支持插值这些属性可以让网格布局在不同状态之间平滑过渡，而不是在动画或过渡的中间点贴靠。

了解如何使用 Gamepad API 控制网页游戏。

inert 属性是一种全局 HTML 属性，它简化了移除和恢复元素用户输入事件（包括焦点事件和来自辅助技术的事件）的方式。

依赖方可以通过检查 AAGUID 来确定通行密钥的来源。了解其运作方式。

通过名为 ExampleScript 的合成玩具语言示例，了解如何使用 Binaryen.js API 用 JavaScript 编写和优化 WebAssembly 模块。

通过 <model-viewer> 网络组件，您可以以声明方式在网页上使用 3D 模型。

音频/视频捕获功能长期以来一直是 Web 开发的“圣杯”。 多年来，我们一直依赖浏览器插件（ Flash 或 Silverlight ）来完成此任务。 快来！ 此时，HTML5 可以派上用场。这可能并不明显，但 HTML5 的兴起确实带来了对设备硬件的大量访问。 Geolocation API （GPS）、 Orientation API （加速度计）、 WebGL （GPU）和 Web Audio API （音频硬件）就是很好的例子。这些功能非常强大，可公开基于系统底层硬件功能的高级

了解如何在 WebAuthn 中使用“userVerification”

了解 RUM 数据为什么会显示与 CrUX 不同的核心网页指标数据。

因此，构建包容且人人皆可访问的网站非常重要。我们可以针对至少六个关键的残疾领域进行优化：视觉、听觉、行动不便、认知、言语和神经系统。

第三方脚本提供广泛多样的实用功能，使得网络更具动态性。了解如何优化第三方脚本的加载，以降低其对性能的影响。

了解如何防止在用户的密码管理工具中已有通行密钥时创建新的通行密钥。

IndexedDB 基础知识。

现在您可以使用的值得信赖、强大且稳定的 CSS 了。

了解如何针对 Time to First Byte 指标进行优化。

主机、网站和源有何区别？什么是 eTLD+1？本文介绍了相关信息。

了解什么是可发现的凭据，以及如何打造适合您的使用场景的用户体验。

如果网站和应用运行不佳，用户就会注意到，因此优化渲染性能至关重要！

当元素的内容矩形改变大小时，“ResizeObserver”会通知您，以便您相应地做出反应。

除了避免不必要的资源下载，在提高网页加载速度上您可以采取的最有效措施就是，通过优化和压缩其余资源来最大限度减小总下载大小。

本文介绍了如何使用 OffscreenCanvas API 在 Web 应用中渲染图形时实现性能提升。

此博文介绍了 First Contentful Paint (FCP) 指标，并说明了如何衡量该指标

本文全面介绍了内容分发网络 (CDN)。此外，还介绍了如何选择、配置和优化 CDN 设置。

有关用户退出网站时应该怎么做的实用开发者指南。

这篇博文介绍了可交互时间 (TTI) 指标并说明了如何衡量该指标

Fetch Priority API 用于指示资源相对于浏览器的相对优先级。它能够实现最佳加载效果并改进核心网页指标。

关于 :user-valid 和 :user-invalid 伪类，以及如何使用它们来改善输入验证的用户体验。

了解业务决策者和非开发者如何改进核心网页指标。

了解并避免在对字符串应用 base64 编码和解码时出现的常见问题。

subgrid 支持网格共享性，允许嵌套网格与祖先和同级对齐。

在当今的数字世界中，在线广告是我们所有人享受的免费网络的关键组成部分。但是，如果广告植入不当，可能会导致浏览速度变慢，让用户感到沮丧，并降低互动度。了解如何在不影响网页速度的情况下有效加载广告，确保顺畅的用户体验，并为网站所有者最大限度地发掘创收机会。

了解什么是代码覆盖率，并探索衡量代码的四种常用方法。

确定需要测试的内容以及可以排除的内容。

确定要测试的内容、定义测试用例并确定优先级。

以用户为中心的效果指标是一项重要的工具，可帮助您了解和改善网站的体验，让真实用户受益。

了解预加载自适应图片以确保出色用户体验的全新精彩可能性。

一种根据用户的偏好调整字体的方法，让用户在阅读您的内容时能感到最得心应手。

了解如何将不同的测试类型组合成与您的项目契合的合理策略。

让我们从基础知识开始吧！了解两种常规测试模式和三种常见的测试自动化类型。

您应定期审核资源，以确保每个资源都有助于提供更好的用户体验。

介绍了 WebAssembly（有时缩写为 Wasm），它是一种可执行程序的可移植二进制代码格式和对应的文本格式，以及用于促进此类程序与其主机环境之间交互的软件接口。

mkbitmap C 程序依次读取图像并对其应用以下一项或多项操作：反转、高通过滤、缩放和阈值。每项操作都可以单独控制和开启或关闭。本文介绍了如何将 mkbitmap 编译为 WebAssembly。

如何在 Web 应用中安全地显示用户控制的内容。

文件系统标准引入了来源专用文件系统 (OPFS)，作为对网页来源专用且对用户不可见的存储端点，可选择性地提供对一种针对性能进行了高度优化的特殊文件的访问权限。 现代浏览器支持源私有文件系统，并且该系统已由 Web 超文本应用技术工作组 ( WHATWG ) 在 文件系统 Living Standard 中标准化。 Browser Support Source 当您想到计算机上的文件时，可能会想到文件层次结构：文件按文件夹整理，您可以使用操作系统的文件浏览器浏览这些文件夹。例如，在 Windows

简要介绍如何在生态系统中采用 AVIF，以及开发者可以通过 AVIF 从静态图片和动画中获得何种性能和质量优势。

了解如何优化网站的 Interaction to Next Paint。

您只需了解 Baseline 中的部分功能即可。

加载脚本时，浏览器需要一些时间在执行之前对其进行评估，这可能会导致任务耗时较长。了解脚本评估的工作原理，以及您可以采取哪些措施来防止脚本评估在网页加载期间导致耗时较长的任务。

DOM 大小大可能是决定互动是否快速的因素。详细了解 DOM 大小与 INP 之间的关系，以及在网页包含大量 DOM 元素时，您可以采取哪些措施来缩减 DOM 大小，以及如何通过其他方式限制渲染工作。

输入延迟会严重影响总互动延迟，并会对网页的 INP 造成不利影响。在本指南中，了解什么是输入延迟，以及如何减少输入延迟以提高互动速度。

使用 JavaScript 呈现 HTML 与呈现由服务器发送的 HTML 不同，这可能会影响性能。请在本指南中了解不同之处，以及您可以采取哪些措施来确保网站的呈现效果（尤其是在涉及互动的情况下）。

由 PHP 提供支持的完整 WordPress 平台，可通过 WebAssembly 在浏览器中运行

这篇博文介绍了 Cumulative Layout Shift (CLS) 指标并说明了如何衡量该指标。

得益于 WebAssembly，这里现在展示了各种工具。

渐进式 Web 应用可以提交到 Android Play 商店、Microsoft Store 等应用商店。

使用源代码映射改善 Web 调试体验。

现在您可以使用的值得信赖、强大且稳定的 CSS 了。

在 CSS 中计算正弦、余弦、正切等值。

requestVideoFrameCallback() 方法可让网络作者注册一个回调，该回调会在新的视频帧发送至合成器时在呈现步骤中运行。

对 Google Developers Experts (GDE) 计划成员的系列访谈之一。

我们来使用作用域自定义属性和 background-clip 来实现动画渐变文字效果 前往 CodePen 并创建一个新的 Pen。 为文本创建标记。我们使用包含“Speedy”一词的标题： 然后，为 body 设置较深的 background-color ： 将文本的 font-size 调高。使用 clamp 使其响应迅速： 为我们要使用的颜色创建两个自定义属性。使用这些颜色将 linear-gradient 应用于 background ，并将其旋转 90 度：

这篇博文宣布了媒体应用一系列新的模式。

这本 Chrometober 是如何生动展现卷轴式图书的，分享有趣又惊悚的提示与技巧。

基本概述了如何构建颜色自适应且易于访问的提示自定义元素。

通行密钥使网站的用户帐号更加安全、更简单、更易于使用且无密码。本文介绍了如何允许用户为您的网站创建通行密钥。

通行密钥使网站的用户帐号更加安全、更简单、更易于使用且无密码。本文介绍了应如何设计通过通行密钥实现无密码登录，同时兼顾现有密码用户的需求。

简要介绍如何构建颜色自适应、响应迅速且易于访问的 FAB 组件。

了解如何针对核心网页指标优化网页字体。

对 Google Developers Experts (GDE) 计划成员的系列访谈之一。

我们来使用作用域自定义属性和 animation-timing-function 制作一个动画 CSS 加载器 前往 CodePen 并创建一个新的 Pen。 为加载器创建标记。请注意内嵌自定义属性的使用： 您还可以使用生成器 ( Pug ) 配置行数： 为我们的加载器添加一些样式： 使用绝对定位和 calc 与 transform 的组合来定位线条： 根据 --index 应用不透明度： 开始行动吧！ 请注意使用 steps(var(--count)) 来获得正确的效果 ✨ 完成！🎉 您希望以

简要介绍了用于测试和验证设计的无障碍色彩对比度的三种工具和方法。

本教程介绍了如何构建网站的无障碍主导航。您将了解语义 HTML、无障碍功能，以及如何使用 ARIA 属性有时弊大于利。

利用以下便捷的 CSS 伪选择器，您可以实现选择模态元素。

探索如何利用 CSS 重现视错觉的有趣探索。

针对 Core Web Vitals 优化代码和跟踪代码管理器。

了解设置列表样式的一些实用且富有创意的方式。

在设计系统和组件库中使用自定义属性的优势。

了解如何使用单独的平移、旋转和缩放 CSS 属性以直观的方式处理转换。

了解在 CSS 中为边框添加动画效果的几种方法

BBC 为其网站部署了 HSTS，以提高安全性和性能。欢迎了解 HSTS 的意义，以及 HSTS 能为您提供哪些帮助。

了解监控核心网页指标的工具可能会报告不同的数字，以及如何解读这些差异。

GDE Enrique Fernandez Guerra 对他的非政府组织 HelpDev 进行开源宣传。

停止对 Internet Explorer 的支持对于 Maersk.com 的客户和开发者来说意味着什么。

HTML5Rocks，很高兴认识你。

了解如何设置第一方 Cookie，以确保安全性和跨浏览器兼容性，并在第三方 Cookie 逐步淘汰后最大限度降低破坏的可能性。

Web Audio API 可以正确实现 AV 同步。

圆锥渐变可用于创建一些有趣的效果，例如这个漂亮的边框示例。 Adam Argyle 创建了此 CodePen （最初通过此 Tweet 在 Twitter 上分享），其中展示了如何使用 圆锥渐变 创建边框。 Terry Mun 以富有创意的方式 分叉 了 Adam 的 CodePen，并创建了此 CodePen 。将鼠标悬停在元素上，您会看到渐变发生变化，这得益于一些 JavaScript 代码更新了存储旋转角度的 CSS 自定义属性。 这些示例使用 border-image-source

了解使用 JavaScript 库或框架时需要做出的决策。

使用 Fetch API 时捕获错误。

从客户端 JavaScript 环境的角度了解框架和库之间的差异。

此资源可帮助您快速了解航站楼的导航路线。

更新了 Google Fonts CSS API - 它的工作原理、使用方式，以及它如何高效地提供网页字体。

GOV.UK 放弃了前端的 jQuery 依赖项。您永远无法猜测发生了什么。（是的，您会。）

简要介绍如何构建颜色自适应、响应式和无障碍组件。

不妨了解什么是浏览器预加载扫描程序、它如何帮助提升性能，以及如何避免这些问题。

让您能更轻松地构建网站。

如何使用当前的分析工具衡量网页指标

Web Google 开发者专家，介绍了指导计划如何帮助他们成为领导者。

通过大量示例分享可变字体的实用指南。

使用 Josh W Comeau 的这款工具，即可制作出精美的渐变效果，变得超级简单。

一系列关于首要痛点的数据分析，收集自与 Web 开发者的多次一对一对话。

查看图片工具的状态。

了解作用域及其在 JavaScript 中的工作原理。

简要介绍了如何使用“”元素构建颜色自适应、响应式且易于访问的小型和大型模态窗口。

了解如何调试网页上的媒体播放错误。

对 Google Developers Experts (GDE) 计划成员的系列访谈之一。

在初始视口内提前加载图片，同时尽可能延迟加载其余图片，这样可以减少加载的字节数，同时提升 Web Vitals 指标。

简要介绍如何使用 `` 元素构建易于访问的彩色加载栏。

尽可能简化注册表单和登录表单。 保存登录表单中的凭据，以便用户在返回时无需重新登录。 如需存储表单中的用户凭据，请执行以下操作： 在继续操作之前，请检查您的表单是否包含 autocomplete 属性。这有助于 Credential Management API 从表单中查找 id 和 password ，并构建凭据对象。 这还有助于不支持 Credential Management API 的浏览器了解其语义。如需详细了解自动填充功能，请参阅 Jason Grigsby 撰写的 这篇文章 。

用户代理字符串更改、Chrome 和 Firefox 为减轻影响而采取的策略，以及您可以如何提供帮助。

有关如何构建自适应网站图标的基础概览。

了解如何使用 Emscripten 通过 WebAssembly 将 2D 图形渲染到网页上的画布。

忘记或滥用 Cache-Control 标头可能会对网站安全和用户隐私产生负面影响。获取关于高价值网站的建议。

衡量网站是否运行正常的基本指标

了解如何将 gPhoto2 移植到 WebAssembly，以便从 Web 应用中通过 USB 控制外接摄像头。

使用网络错误日志记录 (NEL) 收集客户端网络错误。

了解如何在使用所有浏览器的用户的同时使用最新的 WebAssembly 功能。

了解如何使用 WebAssembly 和 Fugu API 将与外部设备交互的代码移植到 Web。

简要介绍如何构建易于使用的自适应主题切换组件。

了解如何在 WebAssembly 库中嵌入 JavaScript 代码以与外界进行通信。

Oculus Quest 2 是一款虚拟现实 (VR) 头戴设备，由 Meta 旗下部门 Oculus 开发。开发者现在可以构建和分发利用 Oculus Quest 2 的多任务处理功能的 2D 和 3D 渐进式 Web 应用 (PWA)。本文介绍了相关体验，以及如何在 Oculus Quest 2 上构建、旁加载和测试 PWA。

简要介绍 Designcember 的节假日日历式体验所用的流程和工具。

这张图展示了利用环境光传感器和窗口控件叠加层功能在网络上重新创建太阳能计算器的程序。

在很长一段时间里，您不得不借助变通方法和库来创建 JavaScript 值的深层副本。Android 平台现在附带了“StructuredClone()”是一种用于深层复制的内置函数。

简要介绍如何构建自适应且可访问的消息框组件。

Chrome 推出界面基金，用于向设计工具、CSS 和 HTML 设计人员提供公益金。

简要介绍如何构建响应式、自适应且易于访问的 3D 游戏菜单。

试用新的 Lighthouse API 来衡量整个用户流中的性能和最佳做法。

了解 PageSpeed Insights 的最新动态，帮助您更好地衡量和优化网页及网站的质量。

汇总了 2021 年 Chrome 开发者峰会上发布的所有重要公告，点击链接即可了解详情。

了解如何衡量动画、如何看待动画帧以及网页整体流畅性。

在过去的三年中，Chrome 一直致力于为那些想要挑战浏览器极限的 Web 应用提供强力支持。Photoshop 就是其中之一。几年前，直接在浏览器中运行像 Photoshop 一样复杂的软件这样的想法是很难想象的。但是，通过使用各种新的网络技术，Adobe 现已将 Photoshop 公开测试版引入到网络中。

简要介绍如何构建响应迅速、自适应、可访问的多选组件，以便对用户体验进行排序和过滤。

了解使用 Navigation API 和 Resource Timing API 评估现场加载性能的基础知识。

新的 Sanitizer API 旨在构建强大的处理器，以便将任意字符串安全地插入页面。本文介绍此 API 并解释其用法。

本文档介绍了加载第三方嵌入时可以采用的性能最佳实践、高效的加载技术，以及有助于减少热门嵌入的布局偏移的布局偏移终止工具。

解答关于 SPA、核心网页指标和 Google 旨在解决当前衡量限制的计划的常见问题。

preventDefault 和 stopPropagation ：何时使用哪种方法以及每种方法的确切用途。 JavaScript 事件处理通常很简单。在处理简单（相对扁平）的 HTML 结构时，这一点尤为重要。不过，当事件在元素层次结构中传播时，情况会变得更加复杂。通常，此时开发者会求助于 stopPropagation() 和/或 preventDefault() 来解决遇到的问题。如果您曾经想过：“我只会尝试 preventDefault() ，如果不行，再尝试

了解如何以同时适用于浏览器和捆绑器的方式从 JavaScript 导入和捆绑各种类型的素材资源。

简要介绍如何构建无障碍的拆分按钮组件。

了解如何使用 CSS 模块脚本来导入 CSS 样式表（使用与 JavaScript 模块相同的语法）。

只需一行代码即可将您的品牌颜色应用到内置的 HTML 表单输入。

简要介绍如何构建响应迅速的无障碍开关组件。

通过一组客户端提示标头，网站可以选择在请求时获取用户的媒体偏好设置，以便服务器出于性能方面的原因内嵌正确的 CSS。 CSS 媒体查询，尤其是 prefers-color-scheme 或 prefers-reduced-motion 等 用户偏好媒体功能 ，可能会对网页需要传送的 CSS 量以及用户在网页加载时获得的体验产生 重大影响 。 重点介绍 prefers-color-scheme ，但强调该推理也适用于其他用户偏好设置媒体功能。最佳实践是，不要在关键渲染路径中加载特定不匹配配色方案的

基本介绍了如何构建响应迅速的无障碍面包屑导航组件，以便用户能够浏览您的网站。

了解如何将用其他语言编写的多线程应用引入 WebAssembly。

构建具有离线流式传输功能的 PWA 存在一些挑战。在本文中，您将了解可为用户提供优质离线媒体体验的 API 和技术。

媒体流式传输是一种从服务器持续传送多媒体内容的方法。在该方法中，内容已被拆分为多个单独的数据块，可在播放期间通过范围请求使用 DASH 和 HLS 等协议按特定顺序重新联接在一起。

了解数字版权管理概念，以及使用清除密钥或 Widevine 加密功能从原始 mov 文件获取为 MPEG-DASH 或 HLS 打包的加密媒体所需的命令。

媒体框架兼具专有和开源的丰富性，其核心是一组支持各种容器格式和传输协议的音频和/或视频播放的 API。

现在，当网页字体加载时，您可以调整其缩放比例，使文档字体大小标准化，并在切换字体时防止布局偏移

基本概述如何建立可配置的动态配色方案

向移动设备投放桌面设备尺寸的图片会消耗的数据量多于所需数据的 2-4 倍。针对不同的设备提供不同尺寸的图片，而不是“一刀切”的方法。

从今天开始，CLS 变更已在许多 Chrome 网络工具平台发布，包括 Lighthouse、PageSpeed Insights 和 Chrome 用户体验报告。

本文介绍了用于优化网页指标的 CSS 相关技术。

这些看似只是对 CSS 选择器语法的细微添加将会产生巨大的影响。

全新的 Progressive Web App 培训（由六部分组成）现已发布，并且还有一系列新的 Codelab，旨在介绍如何构建可靠、可安装且性能强大的 PWA。

基于用户偏好的媒体功能、容器查询以及针对新型屏幕（例如可折叠屏幕）的媒体查询，将使我们在响应式网页设计的新时代能够使用资源。

将网站从依赖用户代理字符串改为使用新的用户代理客户端提示的策略。

本文列出了可用于保护网站的重要安全标头。您可以使用该报告了解基于网络的安全功能，学习如何在网站上实现这些功能，还可以作为您何时需要提醒的参考。

Thomas Steiner 在 2021 年 Google I/O 大会上演讲的演讲内容为：Excalidraw 和 Fugu：改进核心用户历程

Service Worker 可以使用 ES 模块的静态导入引入额外的代码，作为 importScripts() 的替代方案。

简要介绍了如何为电视、手机、桌面设备等构建自适应横向滚动视图。

今天，我们将介绍 Lighthouse、PageSpeed 和开发者工具中的新工具功能，帮助您确定如何改进您的网站在网页指标方面的表现。

了解如何在将传统同步语言编译为 WebAssembly 时调用异步 Web API。

借助窗口控件叠加功能，开发者可以自定义已安装 PWA 的标题栏，使其 PWA 看起来更像应用。

第三方脚本或“代码”可能会导致网站出现性能问题，因此成为优化目标。不过，在开始优化添加的代码之前，请确保没有优化您甚至不需要的代码。本文介绍了如何评估新代码请求，以及如何管理和查看现有代码。

WebOTP API 现在可以从 iframe 中接收动态密码。

DataTransfer 对象用于保存拖放操作期间正在拖动的数据。它可以存储一个或多个数据项，其中每个项包含一个或多个数据类型。本文介绍了您可以使用 DataTransfer API 执行哪些操作。

简要介绍如何构建拆分字母和单词动画。

制定计划改进 CLS 指标，使其对长期有效网页更加公平。

“Web 开发者满意度”是一个 Google 项目，旨在收集有关 Web 开发者需求的信息。我们的目标是打造一个更可靠、可预测和可互操作的网络平台，让开发者能够投资于此平台并信任其，并采用和使用新功能来发展该平台和其业务。

简要介绍了如何构建包含滑块和复选框的设置组件。

在 JavaScript 中，计算 `this` 的值可能并非易事，以下是具体的操作方法...

本章将介绍迷你应用的编程方式。

本章将详细介绍所有迷你应用平台提供的组件。

本章对迷你应用集合进行了以下观察：跳出思维模式，从自身的泡泡中汲取灵感和汲取灵感，这对于打造更美好的网络未来会大有帮助。

本章将介绍各种迷你应用平台的标记、样式、脚本和更新选项。

本章展示了一个遵循“迷你应用编程方式”方法的示例项目。

本章将介绍 H5 应用和 QuickApp（二者不同于迷你应用）的背景信息。

本章将介绍迷你应用的项目结构、生命周期和捆绑。

本章将介绍一些有趣的迷你应用开源项目。

Streams API 让 JavaScript 能够以编程方式访问通过网络接收的数据流，并根据需要进行处理。

基本概述如何构建与 iOS 和 Android 应用中的标签页组件类似的标签页组件。

通过跨域隔离，网页可以使用 SharedArrayBuffer 等强大功能。本文介绍了如何在您的网站上启用跨域隔离。

Origin-Agent-Cluster 标头会切断对同一网域上其他源的同步访问，并提示浏览器为您的源站提供专用资源。

现在，使用新的宽高比 CSS 属性可以更轻松地保持图片和元素内的宽高比。

简要介绍 WebRTC 的历史、架构、使用场景和未来。

了解如何优化轮播界面以提升性能和易用性。

了解我们关于改进 Cumulative Layout Shift 指标的计划，并向我们提供反馈。

大多数情况下， http://localhost 的行为与 HTTPS 类似，可用于开发目的。不过，在某些 特殊情况下 （例如使用自定义主机名或跨浏览器使用安全 Cookie），您需要明确将开发网站设置为像 HTTPS 一样运行，以准确反映您的网站在生产环境中的运行方式。（如果您的正式版网站不使用 HTTPS，请 优先改用 HTTPS ）。 本页介绍了如何在本地使用 HTTPS 运行网站。 如需简要说明，请参阅 mkcert 快速参考 。** 如需为本地开发网站使用 HTTPS 并访问

大多数情况下，使用 http://localhost 进行本地开发即可，但在某些特殊情况下，则不适用。本文介绍了何时需要使用 HTTPS 运行本地开发网站。 另请参阅： 如何在本地开发中使用 HTTPS 。 在本文中，关于 localhost 的陈述也适用于 127.0.0.1 和 [::1] ，因为它们都描述了本地计算机地址（也称为“环回地址”）。此外，为简单起见，我们未指定端口号。 因此，当您看到 http://localhost 时，请将其读作

了解如何构建自适应滑出侧边导航布局组件。

基本概述如何构建自适应滑出侧边导航栏

了解 CSS 的 5 种不同的居中技术。

在进行一系列测试时，请遵循以下 5 种居中技术，了解哪种方法最能适应变化。

首次加载性能很重要，但并不是全部。第二次加载您的网站的用户将使用其缓存来获取对您内容的访问权限，因此，确保网站在加载速度和正确性方面都能顺畅运行是关键。

了解如何实现跨浏览器 Houdini Paint API，并使用 Houdini.how 探索 Houdini Worklet 的世界。

这款全新的模块化工具可从多个来源自动收集效果数据。

帮助用户尽可能快速、轻松地填写地址和付款表单，从而尽可能提高转化次数。

了解付款表单的最佳做法。

使用跨平台浏览器功能构建简单安全、易于访问且易用的注册表单。

帮助用户轻松注册、登录和管理其账号详情。

要求用户提供通过短信传送的动态密码（动态密码）是确认用户电话号码的常用方法。这篇博文介绍了一些最佳实践，可帮助您构建能够提供出色用户体验的短信动态密码表单。

了解地址表单的最佳实践。

Web Worker 和 Service Worker 如何提升网站性能，以及何时使用 Web Worker 与 Service Worker。

Service Worker 如何主动与页面通信以通知某些事件。

如何传达窗口和 Service Worker，以执行与性能、缓存和离线相关的任务。

如何在页面和 Service Worker 之间建立双向通信通道。

Web 应用现在可以在捕获指针事件时停用鼠标加速。

了解如何打造与网页版 Instagram 快拍类似的体验。

基本介绍如何打造类似于 Instagram 快拍网页版的体验。

这篇博文介绍了如何在内容管理系统中采用加载属性。

“同网站”的定义不断发展，包含网址架构，因此网站的 HTTP 和 HTTPS 版本之间的链接现在计为跨网站请求。默认升级到 HTTPS，以尽可能避免问题；您也可以继续阅读下文，详细了解需要哪些 SameSite 属性值。

一个分步交互式教程，介绍如何构建一个客户端来订阅用户推送通知、将推送消息显示为通知，以及为用户退订推送通知。

分步互动式教程，介绍如何构建服务器以管理推送通知订阅并将 Web 推送协议请求发送到推送服务。

简要介绍什么是推送通知、为什么要使用推送通知以及推送通知的工作原理。

如何跟踪网站的离线使用情况，以便解释您的网站为何需要更好的离线体验。

展示高性能技术如何制作复杂而精美的动画。

Min、max 和 clamp 可提供强大的 CSS 功能，从而通过更少的代码安全锁实现更快速的样式设置。这篇博文介绍了如何利用这些得到良好支持的 CSS 数学函数来控制元素大小调整、保持适当的间距以及实现流体排版。

SXG 是一种交付机制，通过该机制，无论资源是采用何种方式，都可以单独对资源的来源进行身份验证。

为 Chromium 添加了新的逻辑属性缩写和新的内边距属性。

呈现良好动画效果是打造出色网络体验的核心所在。此博文介绍了某些类型的动画为何优于其他类型的动画。

确保您的 Service Worker 知道在请求部分响应时应该怎么做。

要提升 CSS 动画的性能，请尽可能使用 transform 和 不透明度 CSS 属性，并避免使用任何会触发布局或绘制的内容。

终于可以在网页上控制摄像头上的平移、倾斜和缩放功能了。

源试用是测试新的或实验性网络平台功能的一种方式。通过第三方源试用，嵌入式内容的提供商可以在多个网站上试用新功能。 源试用 是测试新的或实验性 Web 平台功能的一种方式。 源试用通常只能在第一方基础上进行：它们仅适用于单个已注册的 源站 。如果开发者想要在嵌入了其内容的其他源上测试实验性功能，则这些源都需要为源试用进行注册，并且每个源都具有唯一的试用令牌。这并不是测试嵌入到许多网站的脚本时采用的可扩缩方法。 通过第三方源试用，嵌入式内容的提供商可以在多个网站上试用新功能。

分离窗口是一种常见的内存泄漏类型，非常难以找到和修复。

了解如何为您的应用打造简单的离线体验。

在 CSS 中使用裁剪可以帮助我们摆脱设计中看起来像箱子的所有内容。通过使用各种基本形状（即 SVG），您可以创建裁剪路径。然后剪掉您不想显示的元素部分。

使用 CSS 自定义 `` 或 `` 元素中数字或项目符号的颜色、大小或类型。

通过将指向 /.well-known/change-password 的请求重定向到用于更改密码的网址，您可以比以往更轻松地更新密码。

基于网络的付款应用注册之后，即可接受来自商家的付款请求。本文介绍如何在运行时编排来自 Service Worker 的付款事务。

基于网络的付款应用注册之后，即可接受来自商家的付款请求。本文介绍如何在运行时编排来自 Service Worker 的付款事务。

对屏幕阅读器说撒谎也能解决无障碍功能问题！

了解如何使用 WebAssembly 以安全且符合惯例的方式将使用其他语言编写的库引入到 Web 中。

CSS content-visibility 属性通过跳过屏幕外内容的渲染，可提升 Web 内容渲染性能。本文介绍了如何使用 auto 关键字使用此新 CSS 属性来缩短初始加载时间。您还将了解 CSS Containment Spec 和 content-visibility 的其他值，以便更好地控制内容在浏览器中的呈现方式。

Async Clipboard API 简化了对权限的复制和粘贴操作。

了解如何使用不同的组件在 Android 应用内呈现 Web 内容。

不妨考虑将引荐来源网址政策设为 `Strict-origin-when-cross-origin`。此政策保留了引荐来源网址的大部分实用性，同时可降低跨源泄露数据的风险。

公告团队在开发 PWA 时对 Service Worker 的了解。

了解如何设置 Lighthouse CI 并将其集成到开发者工作流中。

为 Google 帐号带来更好的安全性和用户体验。

了解如何直接在 CSS 文件中使用语义类型、后备值等实现 CSS 自定义属性。

在 Service Worker 缓存和 HTTP 缓存层使用一致或不同的过期逻辑的优缺点。

利用 A/B 测试来评估网站速度对业务指标的影响。

了解如何修改您的 Android 付款应用，以在商家通过 Payment Request API 请求用户提供选用的送货地址及联系信息。

了解如何在客户浏览器中注册基于网络的付款应用。您还将学习如何对它们进行调试。

了解如何调整基于网络的付款应用，使其与网络付款配合使用，并为客户提供更好的体验。

导航请求是每当您在导航栏中输入新网址或访问网页上的链接时发出的 HTML 请求。这就是 Service Worker 对性能影响最大的因素：通过使用 Service Worker 无需等待网络即可进行响应，您可以确保导航可靠、快速且弹性佳。

Chrome 用户体验报告（以前称为 CrUX）是一个公开数据集，包含数百万个网站上的真实用户体验数据。与实验室数据不同，CrUX 数据实际上来自那些选择参与测试的用户。

此博文重点介绍了几行强大的 CSS 功能，它们可完成一些非常繁重的工作，并帮助您构建强大的现代布局。

自 Chrome 84 开始，ResizeObserver 支持一种称为 device-pixel-content-box 的新框测量，该测量值以物理像素为单位测量元素尺寸。这对于渲染像素完美的图形至关重要，尤其是在高密度屏幕环境中。

关于在为期 3 天的在线社区活动中宣布的重大新闻和最新动态的摘要，以及即将举办的地区活动的提醒。

借助跨平台浏览器功能，构建安全、无障碍且易于使用的简单登录表单。

借助跨平台浏览器功能，构建安全、无障碍且易于使用的登录表单。

了解如何逐步增强您的渐进式 Web 应用，使其在所有现代浏览器中都可用，同时又能在支持新 Web 功能（如文件系统访问、系统剪贴板访问、联系人检索、定期后台同步、屏幕唤醒锁定、网络共享功能等）的浏览器中提供高级体验。

如何调试个别网页或整个网站的 SEO 问题。

如何使用后台同步和 Push API 通过 Workbox 实现弹性搜索体验。

使用 和 标记在网页中嵌入媒体文件。

通过文本片段，您可以在网址片段中指定文本片段。当导航到包含此类文本片段的网址时，浏览器可突出显示和/或将其引起用户的注意。

请将您在浏览器或特定设备或平台上发现的问题告知浏览器供应商，这是完善网络平台的重要一环！

了解如何使用 Web 技术实现针对特定平台的应用模式，让您的 Progressive Web App 类似于“真实”应用。

RAIL 模型让设计人员和开发者能够可靠地开展对用户体验影响最大的性能优化工作。了解 RAIL 模型规定的目标和指南，以及可用于实现这些目标的工具。

Quicklink 是一个库，可在闲置时预提取视口内的链接，从而加快后续网页加载速度。

“提取元数据”是一项新的网络平台功能，可让服务器保护自己免受跨源攻击的侵害。

使用 CSS 创建布局时，您需要注意，不要为使用键盘进行导航的用户带来连接中断的体验。

整理网页动画将变得更加容易。

Web Payments 旨在在网络上提供顺畅的付款体验。了解其工作原理和优势，并准备好将您的付款应用与 Web Payments 集成。

了解商家如何集成付款应用、付款交易如何与 Payment Request API 搭配使用，以及 Web Payments 的各种功能。

若要使用网络付款完成付款交易，必须先发现您的付款应用。了解如何设置付款方式，并让您的商家应用做好付款准备，以便商家和客户进行付款。

了解如何让您的 Android 付款应用与 Web Payments 搭配使用，并为客户提供更好的体验。

Chromium 80 在 macOS 上出现了系统界面字体粗细回归问题。Chromium 83 的故障原因以及全新的超能力后分辨率功能，值得在 Chromium 83 中等待。

为您的 PWA 构建可靠的业务用例。了解何时该投资，以及如何衡量其成效。

通过应用快捷方式，用户可以快速访问用户经常需要的一些常用操作。

Chrome 和其他浏览器计划移除 AppCache 的详细信息。

永久性存储有助于保护关键数据免遭逐出，并降低数据丢失的可能性。

结合使用不同的安装服务以提高安装率、避免平台竞争和侵蚀效应的最佳实践。

CommonJS 模块是非常动态的，这就阻止了 JavaScript 优化器和捆绑包对其执行高级优化。

了解如何使用“about://tracing”和 Chrome 开发者工具中的 **WebAudio** 扩展程序在 Chrome 中分析网络音频应用的性能。

某些 Web API 会增加发生 Spectre 等旁路攻击的风险。为了降低这种风险，浏览器提供了基于选择启用的隔离环境，称为“跨源隔离”。了解为什么需要跨域隔离才能使用强大的功能，例如“SharedArrayBuffer”、“performance.measureUserAgentSpecificMemory()”以及更精确的高分辨率计时器。

了解 Next.js 和 Gatsby 如何改进其构建输出，以尽可能减少重复代码并提高网页加载性能

“同网站”和“同源”经常被引用，但经常被误解。本页介绍了它们的定义及不同之处。

某些 Web API 会增加发生 Spectre 等旁路攻击的风险。为了降低这种风险，浏览器提供了基于选择启用的隔离环境，称为“跨源隔离”。请使用 COOP 和 COEP 设置此类环境并启用强大的功能，例如“SharedArrayBuffer”、“performance.measureUserAgentSpecificMemory()”或精确度更高的高分辨率计时器。

了解如何在生产环境中衡量网页的内存用量以检测回归问题。

阅读 web.dev 工程团队的第一篇博文，了解我们如何构建该网站，包括如何使用 Eleventy 和 Web 组件。

通过配色方案 CSS 属性和相应的元标记，开发者可以为自己的网页选择启用用户代理样式表特定于主题的默认默认值，例如表单控件、滚动条以及 CSS 系统颜色。同时，此功能可防止浏览器自行应用任何转换。

如何确保您网站的核心功能始终可用、可访问、安全、易用、可发现且快速。

了解如何通过改进颜色和对比度来使网页更易于访问。

如何确定服务器瓶颈、快速修复瓶颈、提高服务器性能以及防止回归。

在移动设备或触摸屏设备上使用互动元素时，必须在其周围留出足够的空间。这对每个人都有帮助，特别是有运动障碍的人。

我们知道，采用自适应设计是不错的方法，可提供最佳的多设备体验，但自适应设计也有助于提高无障碍性。

全新推出：Trusted Types：一款浏览器 API，用于防止现代 Web 应用中发生基于 DOM 的跨网站脚本攻击。

如何在 Android 应用中打开渐进式 Web 应用。

通过优化渲染周期，Chrome 83 消除了预加载可选字体时的布局偏移。与 font-display: optional 搭配使用，可以最有效地确保自定义字体呈现时不卡顿。

如何使用 nginx 获取和传送 SXG 文件，以及预提取子资源所面临的挑战。

如何生成具有 SXG 扩展的 TLS 证书、安装用于生成 SXG 文件的工具，以及配置 nginx 以提供 SXG 文件。

利用媒体查询发送大小不超过其尺寸的图片，这项技术通常称为自适应图片。

其他部门可以如何帮助您的网站速度优化项目取得更大的成功。

从 Chrome 81 开始，当页面布局发生更改时，滚动条始终保持贴靠状态。换言之，您不再需要添加事件监听器来强制重新贴靠。

了解如何使用 Web Packager 提供 Signed Exchange (SXG)。

使用 beforeinstallprompt 事件为用户提供自定义的无缝应用内安装体验。

如果您已经使用过 WebXR Device API，那么要知道很少有学习的新知识了。进入 WebXR 会话的方法大致相同。运行帧循环的方法大致相同。不同之处在于配置允许适当地显示内容以实现增强现实。

Chrome 79 现已推出虚拟现实技术。此次发布基于 WebXR Device API，是增强现实和虚拟现实的基础。本文是该系列中的第二篇，重点介绍了帧循环，即 XR 会话中向观看者显示图像的部分。其他浏览器很快将支持 WebXR Device API，包括 Firefox Reality、Oculus 浏览器、Edge 和 Magic Leap 的 Helio 浏览器等。

WebXR Hit Test API 是网络增强现实的增强功能，可让您将虚拟对象放置在真实视图中。

了解 Chrome 如何投资开发一些开源工具以推进 JavaScript 生态系统的发展

介绍了渐进式 Web 应用 (PWA) 以及将其与其他 Web 应用区分开来的三大要素。

可遮盖式图标是一种格式，可赋予您更多掌控力，让您的渐进式 Web 应用能够使用自适应图标。可遮盖式图标在所有 Android 设备上都能呈现出色的显示效果。

如何在 Workbox 中注册路线，以便您的渐进式 Web 应用与平台专用应用一起显示在系统级共享界面中。

网页或应用在用户关闭时含有未提交的分析数据或其他数据，这种情况十分常见。网站使用对 XMLHttpRequest() 的同步调用来使网页或应用保持打开状态，直到其数据传递到服务器为止。这会损害用户体验，并忽略更好的数据保存方法。Chrome 80 实施了最新的规范更改以解决此问题。

模块 worker 可将开销大的代码移到后台线程，从而轻松取消屏蔽主线程，同时保留标准 JavaScript 模块的工效学和性能优势。

了解自适应加载模式、如何实现，以及 Facebook、Tinder、eBay 和其他公司如何在生产环境中使用自适应加载。

了解速度工具的最新发展情况，包括新的性能指标、PageSpeed Insights 和 Chrome 用户体验报告 (CrUX) 的更新，以及对网络生态系统的《网页年鉴》分析得出的数据洞见。

浏览器的主线程工作负担过重。通过使用 Web Worker 将代码移出主线程，您可以显著提高应用的可靠性和用户体验。

问卷调查受访者对各种图片优化技术的评论。

在此 Codelab 中，您将学习如何构建推送通知服务器。

Next.js 如何通过路由预加载加快导航速度，以及如何对其进行自定义。 在本文中，您将了解 Next.js 中的路由的工作原理、如何针对速度进行优化，以及如何对其进行自定义以满足您的需求。 在 Next.js 中，您无需手动设置路由。Next.js 使用基于文件系统的路由，这样您只需在./pages/ 目录中创建文件和文件夹即可： 如需链接到其他网页，请使用 &lt;Link&gt; 组件，方法与使用旧版 &lt;a&gt; 元素类似： 当您使用 &lt;Link&gt;

如何通过代码分块和智能加载策略加快 Next.js 应用的速度。 本文介绍了不同类型的 代码分块 ，以及如何使用动态导入来加快 Next.js 应用的速度。 默认情况下，Next.js 会将 JavaScript 拆分为每个路由的单独分块。当用户加载您的应用时，Next.js 只会发送初始路由所需的代码。当用户在应用中导航时，他们会提取与其他路线关联的块。基于路由的代码拆分可最大限度地减少一次需要解析和编译的脚本量，从而缩短网页加载时间。

Next.js 会负责 React 应用中的许多优化，因此您无需执行以下操作： Next.js 是一个自负的 React 框架，内置了多项性能优化功能。该框架背后的主思想是，通过默认包含这些功能，确保应用启动并保持尽可能高的性能。 本简介将简要介绍该框架提供的许多高级功能。本集合中的其他指南将更详细地介绍这些功能。 虽然 Next.js 默认提供了多项性能优化，但这些指南旨在更详细地介绍这些优化，并展示如何使用这些优化来打造快速且高性能的体验。 通常，可以对 React

借助 Web Share API，Web 应用能够使用与平台专用应用相同的由系统提供的分享功能。Web Share API 可让 Web 应用将链接、文本和文件共享给设备上安装的其他应用，就像共享特定平台应用一样。

了解在 Next.js 应用中支持 AMP 的好处和权衡 AMP 是一种网页组件框架，可保证快速加载网页。 Next.js 内置了对 AMP 的支持。 本指南首先简要介绍了 AMP 如何保证快速加载网页 ，然后介绍了 在 Next.js 应用中支持 AMP 的不同方法 ，最后帮助您 确定最适合您的方法 。 本指南的目标受众群体是已决定使用 Next.js 但不确定是否应支持 AMP 的 Web 开发者。 AMP 有两种主要策略来保证速度： 在 Next.js 中使用 AMP 的方式有两种： 虽然

Chrome 79 现已推出虚拟现实技术。此次发布基于 WebXR Devicer API，是增强现实和虚拟现实的基础。本文是该系列中的第一篇，介绍了基本概念以及如何进入 XR 研讨会。其他浏览器很快将支持 WebXR Device API，包括 Firefox Reality、Oculus 浏览器、Edge 和 Magic Leap 的 Helio 浏览器等。

了解 Cookie 的工作原理以及什么是第一方 Cookie 和第三方 Cookie。

网站现在可以明确标记其 Cookie 以供跨网站使用。了解如何标记 Cookie，以确保您的第一方和第三方 Cookie 在实施此变更后继续有效。

了解快速广告的价值以及如何看待广告速度。

使用推送通知，通过有针对性的及时更新吸引用户。

在此 Codelab 中，您将了解如何请求用户权限和发送通知。

在此 Codelab 中，您将学习如何使用 Service Worker 管理通知。

使用 WebPageTest 识别和修复布局不稳定性问题的演示。

功能手机正在复苏并广受欢迎，尤其是在 2G 网络是常态的新兴市场。下面是开发移动版扫雷游戏克隆 PROXX 时，我们在让其在 2G 网络的功能手机上快速加载方面的经验总结。

CSS 变量虽然很有用，但并不好用，因为它们可以接受任何值，并且可以被替换，而您不能对其使用转换效果。CSS Properties 和 Values API 1 级解决了这些问题。

了解如何通过预提取资源来加快后续导航速度。

如果初始 HTML 内容通过安全的 HTTPS 连接加载，而其他资源则通过不安全的 HTTP 连接加载，那么就会出现混合内容。

了解如何修正网站上的混合内容错误，以保护用户并确保所有内容均已加载。

研究表明，网络视频可以提高互动度和销量。即使您尚未向自己的网站添加视频，添加视频之前仍然需要完成。

介绍如何指定应在 iOS 主屏幕上显示的图标的互动式演示。

如今，Web 平台对于游戏开发已非常成熟。遵循游戏设计和变现的最佳实践是构建现代网页游戏的关键。这篇博文就此目标提供了指导。

在构建 PWA 时，多源架构存在许多挑战。探索多个源的正确用法和错误用法，以及一些在多源网站中构建 PWA 的权宜解决方法。

此博文介绍了如何加载 WebFonts，以便在网页加载时无法使用 WebFonts，以防止布局偏移和出现空白页面。

此博文介绍了如何减小网站上使用的 WebFonts 的大小，使排版良好并不意味着网站速度慢。

了解如何创建可安装的渐进式 Angular 应用。

了解如何使用 Lighthouse 和 Chrome 开发者工具找出速度缓慢的第三方资源。

了解如何避免使用第三方脚本的常见错误，从而缩短加载时间并改善用户体验。

考虑使用图片 CDN 优化您网站的图片，并降低用户的数据费用。

本文介绍了常见的第三方 JavaScript 类型以及它们所导致的性能问题。还提供了有关如何优化第三方脚本的一般性指导。

借助新的网络平台功能，您可以更轻松地构建类似内置表单控件的自定义元素。

在 Lighthouse 的帮助下，了解优化运行速度缓慢的第三方资源的技巧。

了解 rel=preconnect 和 rel=dns-prefetch 资源提示以及如何使用它们。

了解如何使用 CSS Backdrop-filter 属性为网页上的界面元素添加背景效果（如模糊处理和透明度）。

stale-while-revalidate 功能可帮助开发者在即时性（立即加载缓存的内容）和新鲜度（确保将来使用缓存内容的更新）之间取得平衡。

了解如何使用 Angular Component Dev Kit 实现虚拟滚动，使大型列表的响应性更强。

了解如何使用 Angular 的预加载策略提升应用运行速度。

了解如何优化 Angular 应用的更改检测功能，以提高其响应速度。

代码拆分可让您加快应用的运行速度，但可能会减慢后续导航的速度。预测性预提取是一种使用数据分析技术智能预提取用户接下来可能使用的内容的高效方式，从而优化网络利用率。

了解如何使用 Network Information API 根据网络质量调整您的内容。

了解如何使用 Codelyzer 使您的 Angular 应用可供访问。

了解如何使用 Angular Service Worker 预缓存应用中的静态资源。

了解如何直接在 Angular CLI 中使用性能预算！

许多设备现在支持操作系统级深色模式或深色主题体验。这篇博文介绍了如何在网页上支持深色模式，列出了最佳实践，并引入了一个名为深色模式切换开关的自定义元素，该元素使网络开发者能够为用户提供一种方法来覆盖特定网页上的操作系统级偏好设置。

了解如何使用路由级代码拆分来减小初始 app bundle。

了解如何提升 Angular 应用的速度、可靠性、可发现性、可安装性和无障碍性！

使用 srcset 自动选择合适的图片大小。

这篇博文总结了 Polymer 项目的 Kevin Schaaf 和 Salesforce 的 Caridy Patiño 对 2019 年网络组件现状的讲座。

Lighthouse 现在支持性能预算。该功能 LightWallet 可以在五分钟内完成设置，并提供关于页面资源大小和数量的 Feedvack。

自从在 Chrome 53 中推出 Payment Request API 并在 Chrome 68 中推出 Payment Handler API 以来，其各自的规范都发生了很多变化。本文将总结这些更新，并将继续累积这些 API 更改。

展示网站改进所带来的收入，同时排除营销广告系列等外部因素。

通过 Chrome 地址栏（多功能框）中的新安装按钮，可以轻松安装渐进式 Web 应用。

了解网站性能对电子商务漏斗的不同部分有何影响

对于许多 Web 开发者来说，使用 Service Worker 是一件不熟悉的事情。此博文将为您提供一些窍门，帮助您避开这些障碍。

如何宣传渐进式 Web 应用的安装和最佳实践。

如何宣传渐进式 Web 应用的安装和最佳实践。

图片会占用大量的视觉空间，并占网站上所下载字节的大部分。使用新的功能政策来识别超大图片。

了解如何使用“Critical”（关键）来提取和内嵌关键 CSS，并缩短渲染时间。

了解如何利用关键 CSS 技术缩短渲染时间，以及如何为您的项目选择最佳工具。

了解如何诊断成本高昂且妨碍用户互动的工作。

在 2019 年 Google I/O 大会上，我们推出了三项新的网络性能计划，希望能为所有人带来更好的用户体验。

PROXX 是一款以 PWA 形式构建的类似扫雷游戏。它适用于各种各样的设备，并且随着设备性能的提升，视觉效果也会逐步提升。

如果用户可以使用相机来搜索您的网站，那是不是很棒？

了解如何使用 SameSite 属性标记您的 Cookie，以供第一方和第三方使用。您可以使用 SameSite 的宽松和严格值来加强对 CSRF 攻击的保护，从而提高网站的安全性。通过指定新的 None 属性，您可以将 Cookie 明确标记为跨网站使用。

使用 Network Information API 根据用户的连接质量调整提供给用户的资源。

新提交的 Portals API 有助于简化前端，同时支持通过自定义过渡进行无缝导航。在本文中，您可以亲身体验一下如何使用门户改善您网站上的用户体验。

在此 Codelab 中，您将了解 Brotli 压缩如何进一步降低压缩比并减少应用的总体大小。

在 2019 年 Google I/O 大会上，web.dev 团队的相关人员已经发布了大量更新，包括焕然一新的设计、更多 Lighthouse 文档和一个全新的博客。

由于用户设备、网络连接和其他因素的不同，实际性能差异很大。在本博文中，我们将探索有助于您收集实验室或现场数据来评估网页性能的工具。

优化网速的品牌通常会发现速度减慢。在这篇博文中，我们将探讨如何确保您的快速体验始终是快速的。

速度很重要，但它到底是什么意思呢？快速网站意味着什么？

reCAPTCHA 是一个第三方库，可将您网站上的网页预呈现为静态 HTML 文件。这可以缩短应用中的 First Paint 时间。

借助 React.lazy 方法，您可以轻松地使用动态导入在组件级别上拆分 React 应用。将它与 Suspense 搭配使用，向用户显示适当的加载状态。

reCAPTCHA 是一个库，可高效呈现大型列表。

React 是一个开源库，让您可以更轻松地构建界面。本学习路线涵盖生态系统中的各种 API 和工具，您应考虑使用这些 API 和工具来提高应用的性能和易用性。

默认情况下，“Create React App”包含 Web 应用清单。修改此文件将可更改应用安装在用户设备上时的显示方式。

React-axe 是一个库，用于审核 React 应用，并将所有无障碍功能问题记录到 Chrome 开发者工具控制台中。eslint-plugin-jsx-a11y 是一个 ESLint 插件，可直接在您的 JSX 中识别并强制执行大量无障碍规则。组合使用这些选项可提供全面的审核方法，用于查找和修复应用中的任何无障碍功能问题。

Workbox 内置于 Create React App 中，其默认配置会在每次构建时预缓存应用中的所有静态资源。

在此 Codelab 中，您将学习如何通过预加载和预提取资源提升网页性能。

Preferreds-reduced-motion 媒体查询，用于检测用户是否已请求系统最大限度地减少其使用的动画或运动量。这适用于需要或希望使用最小化动画的用户；例如，前庭观众通常更喜欢尽可能减少动画。

了解如何推迟非关键 CSS，以优化关键渲染路径并改进 First Contentful Paint (FCP)。

Intersection Observer v2 新增了一项功能，不仅可以观察交叉路口本身，还可以检测相交元素在交叉路口是否可见。

根据用户查看设备的需求和功能来打造网站。

可构造的样式表提供了一种顺畅的方式来创建样式并将其分发到文档或影子根，而不必担心 FOUC。

有关在应用中实现逻辑和渲染的建议。

密切关注效果预算的最佳方式是自动完成预算。了解如何选择最适合您的需求和当前设置的工具。

只需极少的设置，即可定义性能预算，并结合使用 bundlesize 与 Travis CI，在开发工作流中强制实施这些预算。

了解如何设置性能预算并利用 webpack 控制软件包大小。

为提高提速，您付出了艰苦的努力。现在，您可以使用 Lighthouse Bot 在 Travis CI 中自动执行性能测试，确保您保持快速。

您如何将 WebAssembly 集成到此设置中？在本文中，我们将以 C/C+ 和 Emscripten 为例进行说明。

getInstalledRelatedApps() API 是一个 Web 平台 API，可用于检查用户设备上是否已安装 iOS/Android/桌面应用或 PWA。

在此 Codelab 中，您将学习如何通过尽可能减少转译的代码量来提高应用性能。

客户端提示是一组 HTTP 请求标头，可用于根据用户设备和网络连接的特性更改提供网页资源的方式。在本文中，您将全面了解客户端提示及其工作原理，并为您提供一些有关如何利用这些提示来提升网站加载速度的思路。

为了让屏幕阅读器能够向用户显示语音界面，有意义的元素必须具有适当的标签或替代文本。标签或替代文本为元素提供了可访问名称，该名称是在无障碍功能树中表达元素语义的关键属性之一。

许多不同的用户依靠键盘来浏览应用 - 从有暂时性或永久性运动障碍的用户，到使用键盘快捷键的用户，可以提高工作效率和生产力。为您的应用制定良好的键盘导航策略可为所有用户提供更好的体验。

您有没有想过，屏幕阅读器等辅助技术会如何知道要向用户读出什么内容？答案是这些技术依赖于开发者使用语义 HTML 来标记其网页。但是，什么是语义？屏幕阅读器如何使用语义呢？

焦点指示标志（通常用“对焦环”表示）可标识当前获得焦点的元素。对于无法使用鼠标的用户来说，这个指示器极为重要，因为它可以代替鼠标指针。

通过为标题和地标使用正确的元素，您可以显著改善辅助技术用户的导航体验。

标准 HTML 元素内置了键盘无障碍功能。构建自定义互动组件时，请使用 tabindex 确保可通过键盘访问这些组件。

通过使用正确的语义 HTML 元素，您或许能够满足大部分或全部键盘访问需求。这意味着您无需再花费太多时间来调整 tabindex，并且用户会更满意！

无障碍网站是指只要用户无论有无残疾，就可以访问其内容，而且其功能还可由尽可能多样化的用户来操作。

在此 Codelab 中，您将学习如何通过注册 Service Worker 来确保应用的可靠性。

在此 Codelab 中，您将了解如何跟踪可能会阻止您的网页被正确编入索引的欺骗性 404 错误。

在此 Codelab 中，您将学习如何使用 HTTP 标头控制资源缓存行为。

一旦您打开任何网页，浏览器就会从服务器请求 HTML 文档，解析该 HTML 文件的内容，并为任何其他外部引用分别提交请求。关键请求链表示浏览器优先处理和提取的资源的顺序。

在此 Codelab 中，您将学习如何将 imagemin 与 webpack 结合使用来优化 JPEG 和 PNG 图片，以加快下载速度。

我们都经历过 - 您忘了在将图片添加到页面之前进行缩放。图片看起来没问题，但正在浪费用户数据并影响网页性能。

在此 Codelab 中，您将学习如何通过将 GIF 动画替换为视频来提高性能。

出于安全考虑，浏览器的同源政策会阻止从不同源读取资源。启用 CORS 可让服务器告知浏览器它可以使用其他来源。

在此 Codelab 中，您将学习如何使用 Chrome 的开发者工具来解读网络流量。

一想到“安全”这个词，通常发生在坏消息的上下文中。但是，与“用户体验”或“无障碍”一样，安全性是 Web 开发的一个积极且不可或缺的一部分。

Lighthouse 是一款工具，可帮助您衡量网页性能并找出提升网页性能的方法。Lighthouse 会为您提供一个关于页面性能的报告。此报告会提供每个指标的得分以及一系列优化建议，如果您实施这些指标，应该会加快网页加载速度。

PRPL 是一个首字母缩写词，描述了一种用于加快网页加载速度并提高可交互性的一种模式。在本指南中，您将了解这两种方法如何协同发挥作用，但仍可独立使用来实现性能结果。

在此 Codelab 中，您将了解同源政策在提取资源时的运作方式。

不安全的应用可能会让用户和系统面临各种类型的损害。当恶意方利用漏洞或缺乏安全功能来破坏其利益时，这种行为就称为攻击。在本指南中，我们将了解不同类型的攻击，以便您知道在保护应用安全时应注意的事项。

良好的性能很少是副作用。了解效果预算，以及它们如何帮助您顺利实现目标。

浏览器的 HTTP 缓存是您防范不必要网络请求的第一道防线。

在此 Codelab 中，您将学习如何使用 WebP 提供经过优化的图片。

在此 Codelab 中，您将学习如何使用尺寸属性，根据用户的视口正确调整图片大小。

Lighthouse SEO 审核会扫描您的网页，测试那些对搜索引擎至关重要的内容，并给出评分，以便您了解需要改进的具体方面。SEO 很重要，因为 SEO 可为您吸引更多相关用户浏览您的内容。