Chrome 83 的新功能

Pete LePage

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

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

我是 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 表单控件，这些控件是很多网页互动的关键。这些功能易于使用、内置无障碍功能，并且对用户来说很熟悉。表单控件的样式可能会因浏览器和操作系统而异。我们经常需要发布大量 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 博客中的推出网页指标：衡量运行状况良好网站的重要指标，了解完整详情。

等等

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

深入阅读

本指南仅涵盖部分重要内容。如需了解 Chrome 83 中的其他变更，请点击以下链接。

订阅

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

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