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,如下图所示:
Chrome 87 重要更新解读
更多信息,请移步链接。
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功能权限。弹出的提示框如下:

Chrome 87 重要更新解读
调用 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://mp.weixin.qq.com/s/arJe36fWJh63VOh071yRpw

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

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 讨论中如何克服困难,脱颖而出成为标准的故事。
Chrome 87 重要更新解读


Chrome 87 重要更新解读
关注「Alibaba F2E」
把握阿里巴巴前端新动向

上一篇:《树莓派渗透测试实战》——2.11 安装Stunnel客户端


下一篇:【转载】SAP物料主数据屏幕增强