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（Android 版）将以模态对话框的形式显示权限请求。

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

等等！

Chrome 63 面向开发者所做的更改只是其中一小部分，当然，远不止这些。

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

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

我是 Pete LePage，待 Chrome 64 发布后 我会立即向大家介绍 Chrome 的新变化！