Chrome 63 的新功能

Pete LePage

还有更多功能！

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

想要查看完整的变更列表？查看 Chromium 源代码库更改列表。

动态模块导入

导入 JavaScript 模块非常方便，但它是静态的，您无法根据运行时条件导入模块。

幸运的是，Chrome 63 引入了新的动态导入语法，这项功能有所改变。借助它，您可以在运行时动态加载代码到模块和脚本中。它可用于仅在需要时延迟加载脚本，从而提升应用性能。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

您可以抓取登录所需的资源，而不是在用户首次访问您的网页时加载整个应用。初始加载量很小，并且速度非常快。然后，在用户登录后，加载其余内容，即可顺利运行。

异步迭代器和生成器

使用 async 函数编写执行任何类型迭代的代码可能会很难看。事实上，这是我最喜欢的面试编程题的核心部分。

现在，借助异步生成器函数和异步迭代 协议，流式数据源的使用或实现变得更加流畅，我的编码问题也变得更容易解决。

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

异步迭代器可用于 for-of 循环，还可用于通过异步迭代器工厂创建您自己的自定义异步迭代器。

滚动回弹行为

滚动是与网页互动最基本的方式之一，但某些模式可能很难处理。例如，浏览器的下拉刷新功能（在页面顶部向下滑动）会执行硬刷新。

之前，使用完整页面刷新。

之后，只刷新内容。

在某些情况下，您可能需要替换此行为并提供自己的体验。Twitter 的渐进式 Web 应用就是这样做的：当您向下拉动时，它只会将所有新推文添加到当前视图，而不是重新加载整个页面。

Chrome 63 现在支持 CSS overscroll-behavior 属性，可让您轻松替换浏览器的默认溢出滚动行为。

您可以使用 Cloud Storage 来执行以下操作：

最重要的是，overscroll-behavior 不会对网页性能产生负面影响！

权限界面变更

我非常喜欢 Web 推送通知，但有许多网站在网页加载时请求权限，却不提供任何背景信息，这让我感到非常沮丧，而且我并不是唯一一个有这种感受的人。

所有权限请求的 90% 都会被忽略或暂时屏蔽。

在 Chrome 59 中，我们开始通过以下方式解决此问题：如果用户三次关闭请求，系统会暂时屏蔽相应权限。现在，在 m63 中，Chrome for Android 将以模态对话框的形式显示权限请求。

请注意，这不仅适用于推送通知，也适用于所有权限请求。我们发现，如果您在适当的时间和上下文中请求权限，用户授予权限的可能性会增加 2.5 倍！

等等！

当然，这只是 Chrome 63 中面向开发者的部分变更，还有许多其他变更。

  • 现在，Promise 实例支持 finally，系统会在 Promise 已执行或遭拒后调用该方法。
  • 新的 Device Memory JavaScript API 会提供有关用户设备上 RAM 总量的提示，帮助您了解性能限制。您可以在运行时量身定制体验，从而降低低端设备上的复杂性，为用户提供更好的体验，减少用户的挫败感。
  • 借助 Intl.PluralRules API，您可以构建能够理解给定语言的复数形式的应用，方法是指明哪种复数形式适用于给定的数字和语言。并可以帮助处理序数。

请务必订阅我们的 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

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