此页面由 Cloud Translation API 翻译。

Chrome 83 的新功能

Pete LePage

Chrome 83 现已开始面向稳定版发布。

以下是您需要知晓的相关信息：

可信类型有助于防范跨站脚本漏洞。
表单元素进行了重要的改头换面。
检测内存泄漏的方式有了新变化。
原生文件系统 API 启动了新的源代码试用，并添加了功能。
新增了跨源政策
我们推出了网页指标计划，旨在就我们认为哪些质量信号对提供出色的网站用户体验至关重要提供统一指南。
更多。

我是 Pete LePage，在家办公和录制视频。我们来深入了解一下 Chrome 83 中面向开发者的新功能吧！

可信类型

基于 DOM 的跨站脚本攻击是 Web 上最常见的安全漏洞之一。很容易在无意中将其引入到您的网页中。受信任类型有助于防止此类漏洞，因为它们要求您先处理数据，然后再将其传递给可能危险的函数。

以 innerHTML 为例，如果启用可信类型，当我尝试传递字符串时，会因 TypeError 而失败，因为浏览器不知道是否可以信任该字符串。

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

相反，我需要使用安全函数（例如 textContent），传入受信任的类型，或者创建元素并使用 appendChild()。

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

在启用受信任类型之前，您需要使用 report-only CSP 标头来识别和修复所有违规问题。

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

然后，在一切就绪后，您就可以正确开启了。如需了解完整详情，请参阅 web.dev 上的使用可信类型防范基于 DOM 的跨站脚本漏洞。

表单控件更新

我们每天都在使用 HTML 表单控件，它们是 Web 互动性的重要组成部分。这些功能易于使用、内置无障碍功能，并且对用户来说很熟悉。表单控件的样式可能会因浏览器和操作系统而异。我们经常需要发布大量 CSS 规则，才能在各种设备上实现一致的外观。

Microsoft 一直致力于改进表单控件的外观，这让我深感钦佩。除了视觉效果更出色之外，它们还支持更好的触控操作，并且无障碍功能更完善，包括改进了键盘支持！

新表单控件已在 Microsoft Edge 中推出，现在也已在 Chrome 83 中推出。如需了解详情，请参阅 Chromium 博客上的表单控件和焦点更新。

源试用

使用 `measureMemory()` 衡量内存

从 Chrome 83 开始，performance.measureMemory() 是一个新 API，可用于衡量网页的内存用量并检测内存泄漏。

内存泄漏很容易引入：

忘记取消注册事件监听器
从 iframe 捕获对象
不关闭工作器
在数组中累加对象
以此类推

内存泄漏会导致网页在用户看来运行缓慢且臃肿。

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

如需详细了解这项新 API，请参阅 web.dev 上的使用 measureMemory() 监控网页的内存总用量。

对原生文件系统 API 的更新

在 Chrome 83 中，Native File System API 开始了新的源试用，支持可写入的流，并能够保存文件句柄。

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

可写入流可以更轻松地写入文件，并且由于它是流，因此您可以轻松地将响应从一个流管道到另一个流。

将文件句柄保存到 IndexedDB 后，您可以存储状态或记住用户正在处理的文件。例如，保留最近修改的文件列表、打开用户上次处理的文件等。

您需要新的源试用令牌才能使用这些功能，因此请参阅 web.dev 上更新后的文章 The Native File System API: Simplifying access to local files，了解所有详细信息以及如何获取新的源试用令牌。

其他来源试用

查看源代码试用版中功能的完整列表。

新的跨源政策

某些 Web API 会增加 Spectre 等旁道攻击的风险。为降低此类风险，浏览器提供了一种基于用户选择的隔离环境，称为“跨源隔离”。跨源隔离状态还可以防止修改 document.domain。能够修改 document.domain 可允许同一网站上的文档之间进行通信，这被视为同源政策中的漏洞。

如需了解完整详情，请参阅 Eiji 的博文使用 COOP 和 COEP 使您的网站实现“跨源隔离”。

Web Vitals

衡量用户体验质量有很多方面。虽然用户体验的某些方面会因网站和情境而异，但有一组常见的信号（即“核心网页指标”）对所有网络体验来说都是至关重要的。此类核心用户体验需求包括网页内容的加载体验、互动性和视觉稳定性，它们共同构成了 2020 年核心网页指标的基础。

Largest Contentful Paint 用于衡量感知的加载速度，并在网页加载时间轴中标记网页主要内容可能已加载的时间点。
First Input Delay 用于衡量响应速度，并量化用户在首次尝试与网页互动时获得的体验。
Cumulative Layout Shift 用于衡量视觉稳定性，并量化可见网页内容的意外布局偏移量。

所有这些指标均可捕获以用户为中心的重要成效，可在现场衡量，并且具有相应的实验室诊断指标和工具。例如，虽然 Largest Contentful Paint 是总体加载指标，但也非常依赖于 First Contentful Paint (FCP) 和 Time To First Byte (TTFB)，后两者仍然至关重要，需要持续监控和改进。

如需了解详情，请参阅 Chromium 博客上的网页指标简介：衡量网站运行状况的重要指标，了解完整详情。

等等

Chrome 现在支持 Barcode Detection API，该 API 可检测和解码条形码。
新的 CSS @supports 函数可为 CSS 选择器提供特征检测。
新的 ARIA 注释支持为具有语义含义的评论、建议和文本突出显示内容提供屏幕阅读器无障碍功能（类似于 <mark>）。
借助 prefers-color-scheme 媒体查询，作者可以支持自己的深色主题，从而完全控制自己构建的体验。
JavaScript 现在支持共享工作器中的模块。

想知道未来会推出哪些新功能？不妨查看 Fugu API 跟踪器，了解详情！

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 83 中的其他变更，请点击以下链接。

如需及时了解我们的最新视频，请订阅我们的 Chrome Developers YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，我需要理发，但 Chrome 84 一发布，我就会立即为您介绍 Chrome 中的新变化！