此页面由 Cloud Translation API 翻译。

Chrome 103 的新变化

Pete LePage

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

新增了 HTTP 103 状态代码，可帮助浏览器在网页开始传送之前决定要预加载哪些内容。
借助 Local Font Access API，Web 应用可以枚举和使用用户计算机上安装的字体。
AbortSignal.timeout() 是一种更简单的方式，可在异步 API 上实现超时。
还有许多其他功能。

我是 Pete LePage。我们来深入了解一下 Chrome 103 中面向开发者的新功能。

HTTP 103 状态代码 103 - 提前提示

提高网页性能的方法之一是使用资源提示。它们会向浏览器“提示”它日后可能需要的内容。例如，预加载文件或连接到其他服务器。

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

但是，在服务器至少发送部分网页内容之前，浏览器无法根据这些提示执行操作。

假设浏览器请求某个网页，但服务器需要几百毫秒才能生成该网页。在浏览器开始接收网页之前，它只是静静地等待。但是，如果服务器知道网页始终需要一组特定的子资源（例如 CSS 文件、一些 JavaScript 和一些图片），则可以立即响应新的 HTTP 103 提前提示状态代码，并要求浏览器预加载这些子资源。

然后，服务器生成网页后，可以使用正常的 HTTP 200 响应将其发送。网页传入后，浏览器已开始加载所需资源。

由于这是新的 HTTP 状态代码，因此需要更新服务器才能使用。

HTTP 103 早期提示使用入门：

Local Font Access API

网页上的字体一直是一项挑战，对于允许用户自行创建图形和设计的应用来说更是如此。到目前为止，Web 应用只能真正使用 Web 字体。无法获取用户在计算机上安装的字体列表。此外，您无法访问完整的字体表数据，这对于需要实现自己的自定义文本堆栈非常重要。

借助新的 Local Font Access API，Web 应用可以枚举用户设备上的本地字体，并提供对字体表数据的访问权限。

如需获取设备上安装的字体的列表，您首先需要请求权限。

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

然后，调用 window.queryLocalFonts()。它会返回用户设备上安装的所有字体的数组。

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

如果您只对部分字体感兴趣，可以通过添加 postscriptNames 参数来过滤它们。

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

如需了解完整详情，请参阅 web.dev 上 Tom 撰写的文章结合使用高级排版和本地字体。

使用 AbortSignal.timeout() 更轻松地设置超时

在 JavaScript 中，AbortController 和 AbortSignal 用于取消异步调用。

例如，发出 fetch() 请求时，您可以创建 AbortSignal 并将其传递给 fetch()。如果您想在 fetch() 返回之前取消它，请对 AbortSignal 实例调用 abort()。到目前为止，如果您希望它在特定时间后中止，则需要将其封装在 setTimeout() 中。

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

幸运的是，借助 AbortSignal 上的新 timeout() 静态方法，这变得更容易了。它会返回一个 AbortSignal 对象，该对象会在给定毫秒数过后自动中止。以前需要几行代码才能完成的操作，现在只需一行代码即可完成。

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

Chrome 103 支持 AbortSignal.timeout()，Firefox 和 Safari 已支持该功能。

等等！

当然，还有许多其他功能。

avif 图片文件格式现在可以通过 Web Share 分享
Chromium 现在会在网址更改后立即触发 popstate，以便与 Firefox 保持一致。现在，事件顺序为：popstate，然后是 hashchange（在两个平台上）。
Element.isVisible() 则用于指示元素是否可见。

注意：我在视频中提到 Element.isVisible() 已在稳定版中推出，但目前仅通过功能标志提供。

深入阅读

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

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

我是 Pete LePage，Chrome 104 发布后，我会立即为您介绍 Chrome 中的新变化！