Chrome 103 的新变化

Pete LePage

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

我是 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 早期提示使用入门：

本地字体访问 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);

如需了解完整详情，请参阅 Tom 的 Web.dev 上的文章“使用本地字体使用高级排版”。

使用 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() 则用于指示元素是否可见。

深入阅读

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

订阅

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

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