此页面由 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 Early Hints 状态代码进行响应，并要求浏览器预加载这些子资源。

然后，服务器生成页面后，就可以通过常规 HTTP 200 响应将其发送出去。在页面进入时，浏览器已经开始加载所需资源。

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

开始使用 HTTP 103 Early 提示：

本地字体访问权限 API

网页字体一直是个挑战，对于允许用户创建自己的图形和设计的应用来说尤其如此。到目前为止，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 中也已支持该 API。

还有更多其他奖励！

当然还有很多。

avif 图片文件格式现在可通过网络共享功能共享
现在，Chromium 会在网址发生更改后立即触发 popstate，从而与 Firefox 匹配。现在，两个平台上的事件顺序为：先是 popstate，然后是 hashchange。
Element.isVisible() 用于指示某个元素是否可见。

注意：在视频中，我提到了 Element.isVisible() 可在稳定版中使用，但目前只能通过功能标志使用。

深入阅读

这仅涵盖了部分重要的亮点。如需了解 Chrome 103 中的其他更改，请访问以下链接。

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

我是 Pete LePage