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 属性来替代。
更多参考
https://blog.chromium.org/2020/10/chrome-87-beta-webauthn-in-devtools.html
https://blog.chromium.org/2020/11/tab-throttling-and-more-performance.html
https://developers.google.com/web/updates/2020/11/nic87
🔥第十五届 D2 前端技术论坛早鸟票倒计时，速抢！
一起来语言框架专场学习更多精彩内容
继去年 D2 的语言专场后，这段时间又有哪些新的语言诞生了，哪些语言规范又增加了新特性？函数式编程和函数式流编程的思想究竟如何，我们是否应该将其引入到我们的产品中？本届 D2 的语言框架专场，将邀请 RxJS 的开发者为大家介绍 RxJS 内部的结构，以及 RxJS 如何重构的又快又小。同时我们也将邀请 Google 的 V8 核心成员讲述最新 ECMAScript 新特性，以及这些特性在 TC39 讨论中如何克服困难，脱颖而出成为标准的故事。
关注「Alibaba F2E」
把握阿里巴巴前端新动向