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://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 讨論中如何克服困難，脫穎而出成為标準的故事。

關注「Alibaba F2E」

把握阿裡巴巴前端新動向