Chrome 63 的新功能

皮特·莱佩奇

以及更多功能！

我是 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 generator functions和异步迭代 协议，流式数据源的使用或实现变得更加简单，我的编码问题也变得更简单了。

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 不会对网页性能产生负面影响！

权限界面变更

我喜欢网络推送通知，但有很多网站在加载网页时请求权限，这让我感到非常沮丧，而且我并不孤单。

在所有权限请求中，有 90% 会被忽略或暂时阻止。

在 Chrome 59 中，我们开始解决此问题，方法是在用户关闭某项权限三次时暂时屏蔽某项权限。现在，在 m63 中，Chrome（Android 版）将发出权限请求模态对话框。

请注意，这不仅仅适用于推送通知，也适用于所有权限请求。我们发现，如果您在适当的时间和具体情境下请求权限，用户授予权限的可能性会高出一倍半！

还有更多其他奖励！

以上只是我们针对开发者在 Chrome 63 中做出的一些改动，当然还有很多其他变化。

  • finally 现在可用于 Promise 实例，它会在 Promise 被满足或拒绝后调用。
  • 新的 Device Memory JavaScript API 可以向您提供有关用户设备上的 RAM 总量的提示，从而帮助您了解性能限制。您可以在运行时定制您的体验，降低低端设备上的复杂性，从而减少用户失望，从而提供更好的体验。
  • 借助 Intl.PluralRules API，您可以指示给定数字和语言适用于哪种复数形式，从而构建能够理解给定语言的复数形式的应用。并且有助于计算序数。

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

我叫 Pete LePage