Chrome 87 重要更新解读

2020年11月17日，Chrome 发布 M87，这是今年的最后一个正式版本（由于圣诞节原因，M88 稳定版推出要到2021年1月），Chrome 产品总监 Matt Waddell 在一篇博客文章中写道： 该版本是多年来Chrome浏览器性能获得最大提升的一次。 到底是何特性撑得起如此美誉，我们这就来一探究竟。

新增稳定功能

标签限流

即使你打开了大量标签，也只会同时聚焦在少数几个标签上，其余标签白白消耗着大量的内存和CPU。Chrome 团队通过调研发现，后台标签超过 40% 的工作消耗在JS定时器上，于是对其进行了限流，嵌套层级小于5的后台任务1s调用一次，否则会1min调用一次。这项优化会降低 Chrome 的 CPU 使用率到1/5，并且可以延长笔记本使用时间达1.25h。同时，这项优化不会影响音乐播放和通知等功能。

更多信息，请移步 链接 。

https://docs.google.com/document/d/11FhKHRcABGS4SWPFGwoL6g0ALMqrFKapCk5ZTKKupEk/view

遮挡跟踪

该功能可以检测到那些真正可见的窗口和标签，而不是那些已被最小化，或者已被遮挡的窗口。Chrome 可以对这些窗口和标签进行资源优化，使得启动速度加快25%，页面加载速度加快7%， 以及内存占用更小（无具体数字）。

更多信息，请移步 链接 。

https://docs.google.com/document/d/1Di4DiGwHamIgLYjaOpripOJQinUquUuyxuiim2-WUIs/view

前进/后退缓存

很多时候，我们需要回退到上一个页面，在移动端场景下，这个比例甚至会高达20%，Chrome 在 Android 端支持了 bfcache，可以缓存前进后退的页面，目前可以覆盖20%的场景，计划后续提升到50%。

更多信息，请移步 链接 。

https://web.dev/bfcache/

WebAuthn调试功能

测试网络验证功能一直都很困难，因为用户需要设备来测试代码。从 Chrome 87 开始，可以在devtools的一个新面板中模拟和调试。路径为 More options =>   More tools =>   WebAuthn ，如下图所示：

更多信息，请移步 链接 。

https://developers.google.com/web/tools/chrome-devtools/webauthn

摄像头PTZ

有些摄像头具有平移(pan)、上下摇摄(tilt)、放大(zoom)等功能，合称PTZ，所以摄像头可以指向房间中的某个人。这不是会议室摄像头的专享功能，网络摄像头也可以支持PTZ。从Chrome 87开始，一旦用户许可，就可以控制网络摄像头的PTZ。

特性检测方式如下：

const supports = navigator.mediaDevices.getSupportedConstraints();


if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

像其他强大的API一样，摄像头和PTZ功能也需要用户授权。通过调用 navigator.mediaDevices.getUserMedia() ，可以请求PTZ功能权限。弹出的提示框如下：

调用 MediaStreamTrack.getSettings() 可以获取摄像头支持的功能。进而通过调用 videoTrack.applyConstraints() 来调整其PTZ参数，代码调用如下：

function enablePan(capabilities, settings) {
  const input = document.getElementById('rangePan');
  input.min = capabilities.pan.min;
  input.max = capabilities.pan.max;
  input.step = capabilities.pan.step;
  input.value = settings.pan;


  input.addEventListener('input', async () => {
    const opts = { advanced: [{ pan: input.value }] };
    await videoTrack.applyConstraints(opts);
  });
}

相关功能，可以在 该网站 进行试验。 https://ptz.glitch.me/

更多信息，请移步 链接 。 https://web.dev/camera-pan-tilt-zoom/

范围请求和Service Worker

HTTP 协议范围请求（Range Request）允许服务器只发送 HTTP 消息的一部分到客户端，这在传送大的媒体文件，或者与文件下载的断点续传功能搭配使用时非常有用。它在主流浏览器中已被支持很多年，但由于历史原因，和service worker配合不佳，需要开发者绕过。从 Chrome 87 开始，在service worker内部发起范围请求，其HTTP头部可以透传出去。

更多信息，请移步 链接 。

https://web.dev/sw-range-requests/

新增试用功能

字体获取API

对于设计师来说，电脑本地会安装很多字体，比如企业logo字体、CAD或其他软件的专用字体。Chrome 87开始试用字体获取API，站点可以枚举本地安装的字体，供用户使用。代码调用如下：

// Query for all available fonts and log metadata.
const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    console.log(`${metadata.family} (${metadata.fullName})`);
  }
} catch (err) {
  console.error(err);
}


// Roboto (Roboto Black)
// Roboto (Roboto Black Italic)
// Roboto (Roboto Bold)

站点也可以调用底层API，获取字体的字节编码，让用户实现复杂的typography。代码调用如下：

const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    const sfnt = await metadata.blob();
    makeMagic(metadata.family, sfnt);
  }
} catch (err) {
  console.error(err);
}

更多信息，请移步 链接 。

https://web.dev/local-fonts/

废弃&删除的功能

iframe allow 属性的逗号分隔符

之前，iframe 的 allow 属性可以使用逗号来做分隔，但这是不标准的，应该使用分号，从Chrome 87开始，逗号分隔符会被废除。

-webkit-font-size-delta

Blink 将不再支持使用 -webkit-font-size-delta 属性，开发者应该使用 font-size 属性来替代。

更多参考

1. https://mp.weixin.qq.com/s/arJe36fWJh63VOh071yRpw

2. https://mp.weixin.qq.com/s/g3UFdV4uQDdtaooDVIJE_Q

3. https://blog.chromium.org/2020/10/chrome-87-beta-webauthn-in-devtools.html

4. https://blog.chromium.org/2020/11/tab-throttling-and-more-performance.html

5. https://developers.google.com/web/updates/2020/11/nic87

:fire:第十五届 D2 前端技术论坛早鸟票倒计时，速抢！

一起来 语言框架专场学习更多 精彩内容

继去年 D2 的语言专场后，这段时间又有哪些新的语言诞生了，哪些语言规范又增加了新特性？函数式编程和函数式流编程的思想究竟如何，我们是否应该将其引入到我们的产品中？本届 D2 的语言框架专场，将邀请 RxJS 的开发者为大家介绍 RxJS 内部的结构，以及 RxJS 如何重构的又快又小。同时我们也将邀请 Google 的 V8 核心成员讲述最新 ECMAScript 新特性，以及这些特性在 TC39 讨论中如何克服困难，脱颖而出成为标准的故事。

关注 「Alibaba F2E」

把握阿里巴巴前端新动向