Chrome 83 的新功能

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

以下是您有必要知道的信息:

我是 Pete LePage,在家工作和拍摄,下面就来深入了解一下 Chrome 83 为开发者提供了哪些新功能!

可信类型

基于 DOM 的跨站脚本攻击是网络中最常见的安全漏洞之一。不小心在网页中引入一个标记很容易发生。可信类型有助于防止这些类型的漏洞,因为它们需要先处理数据,然后才能将其传递给可能不安全的函数。

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 中捕获对象
  • 未关闭 worker
  • 在数组中累积对象
  • 等等

内存泄漏会导致页面显示速度变慢,并让用户感到臃肿。

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

如需了解新 API 的所有详细信息,请参阅 web.dev 上的使用 measureMemory() 监控网页的总内存用量

Native File System API 更新

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

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 上更新的文章 Native File System API:简化对本地文件的访问,其中介绍了所有详细信息,以及如何获取新的源试用令牌。

其他源试用

请查看源试用中功能的完整列表。

新的跨源政策

某些 Web API 会增加发生旁路攻击(例如 Spectre)的风险。为了降低这种风险,浏览器提供了一个基于选择启用的隔离环境,称为“跨域隔离”。跨域隔离状态还会阻止对 document.domain 的修改。能够更改 document.domain 将允许同站点文档之间进行通信,并已被视为同源政策中的漏洞。

如需了解完整详情,请参阅 Eiji 的博文使用 COOP 和 COEP 将您的网站“跨域隔离”

网页指标

衡量用户体验质量涉及许多方面。虽然用户体验的某些方面因网站和上下文而异,但有一组通用信号,即“核心网页指标”,这对所有网络体验都至关重要。这些核心用户体验需求包括网页内容的加载体验、互动和视觉稳定性,这些需求共同也是 2020 年核心网页指标的基础。

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

所有这些指标都能捕获以用户为中心的重要结果,可在现场进行测量,并且具有配套的实验室诊断指标等效项和工具。例如,虽然 Largest Contentful Paint 是主要加载指标,但它也高度依赖于首次内容绘制 (FCP) 和首字节时间 (TTFB),而这两项指标对于监控和改进仍然至关重要。

如需了解详情,请参阅 Chromium 博客上的隆重推出网页指标:健康网站的基本指标,了解完整详情。

其他数据

想要了解未来有哪些新功能?请查看 Fugu API 跟踪器

深入阅读

这里仅介绍一些重要的亮点。如需了解 Chrome 83 中的其他变化,请点击以下链接。

订阅

如果您想及时了解我们视频的最新动态,请订阅我们的 Chrome Developers YouTube 频道。每当我们发布新视频时,您都会收到电子邮件通知。

我是 Pete LePage,需要剪个头发,但 Chrome 84 发布之后,我会立即告诉您 - Chrome 有什么新变化!