作者 | 彼洋
Chrome 86 在2020年10月推出了穩定版，現已全面應用于Android、Chrome OS、Linux、macOS 和 Windows等平台，我們一起來看下這次的重要更新。若要看全部更新，
請移步。
新增穩定功能
檔案系統通路
還記得Chrome 83中的本地檔案系統嗎，當時的試驗功能，現已穩定。通過調用
showOpenFilePicker
方法，你可以喚起檔案選擇視窗，進而通過傳回的檔案句柄對檔案進行讀寫。代碼如下：
async function getFileHandle() {
const opts = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt', '.text'],
'text/html': ['.html', '.htm']
}
}
]
};
return await window.showOpenFilePicker(opts);
} 在寫檔案之前，浏覽器會檢查使用者是否已授權寫檔案，若未授權，會先彈窗提示使用者，再進行後續操作。
特别的是，調用
showDirectoryPicker
方法會打開檔案目錄，允許你擷取多個檔案，或者在目錄中建立檔案。這很适合IDE、媒體播放器等應用。
全面阻止所有非HTTPS混合内容下載下傳
HTTPS混合内容錯誤是指初始網頁通過安全的HTTPS連結加載，但頁面中其他資源，比如圖像，視訊，樣式表，腳本卻通過不安全的HTTP連結加載，這樣就會出現混合内容錯誤，也就是不安全因素。
攻擊者可攔截不安全的下載下傳位址，将程式替換成惡意軟體、甚至通路更多的敏感資訊。為管控這些風險，谷歌最終還是決定在Chrome中禁止加載不安全資源。
從 M82 開始，Chrome 就逐漸警告及阻止混合内容的下載下傳，到 M86，會完全阻止下載下傳，時間表如下：
要想排查網站的混合内容，使用 Chrome 通路網頁，打開開發者工具，選擇“Security”-"Non-Secure Origin"，就可以看到Mixed Content（小編身邊的網站都是安全的，暫時沒找到例子，請各位自行發掘）。
另外，從 M86 開始，圖檔類型的請求，會自動更新到 HTTPS，并且沒有 HTTP 的降級，Audio/Video 類型的請求早在 M80 就開始進行了自動更新。
ParentNode.replaceChildren
目前，要想替換某DOM節點下的全部子節點，必須要先通過 innerHTML 或 removeChild 删除全部子節點，然後再逐個添加，比較麻煩。為此，Chrome 支援了 replaceChildren 方法，可以用參數中的子節點清單替換原有的全部子節點，代碼如下：
parentNode.replaceChildren(newChildren);
更多資訊，請移步
https://www.chromestatus.com/feature/6143552666992640更醒目的 HTTP 安全警告
在我們通路 HTTPS 網頁時，位址欄最左側會顯示一個鎖定圖示來表明目前網站是安全的，但如果 HTTPS 網頁中嵌入的是并不安全的 HTTP 表單，浏覽器則不會給出任何提示資訊。而實際上已經有釣魚網站通過這種方式來盜取使用者的敏感資訊了。
是以在 Chrome 86 中，如果 HTTPS 的網頁中嵌入了不安全的 HTTP 表單，表單字段下方會有極為醒目的「此表單不安全」文本提示。
如果你無視提示警告繼續送出表單資訊，則會看到一個确認警告頁面，告知你即将送出的資訊并不安全。
背景标簽頁更省電
如果一個标簽頁在背景運作了五分鐘以上，這個頁面就會被暫時當機，相應的 CPU 使用也會被限制在 1% 左右；如果頁面支援自動重新整理，喚醒時間被限制在每一分鐘一次。
新增試用功能
WebHID
HID(Human Interface Device)，人機界面裝置。有很多長尾的HID，或者太新，或者太舊，或者不常見，導緻無法被系統驅動支援。WebHID API，提供了通過JavaScript通路這些裝置的方法。這會大大便利web遊戲的操作性，可以使用搖杆、搖桿、傳感器、震動回報等等裝置。
調用的代碼如下：
butOpenHID.addEventListener('click', async (e) => {
const deviceFilter = { vendorId: 0x0fd9 };
const opts = { filters: [deviceFilter] };
const devices = await navigator.hid.requestDevice(opts);
myDevice = devices[0];
await myDevice.open();
myDevice.addEventListener('inputreport', handleInpRpt);
}); 當然，這些強大的API必須要使用者授權才能調用。
更多詳情請移步
https://web.dev/hid/多屏 Placement API
目前，你可以調用
window.screen()
來擷取浏覽器所在螢幕，但如果你有多個螢幕，隻能擷取目前所在的螢幕。
API調用方式及傳回結果如下所示：
const screen = window.screen;
console.log(screen);
// {
// availHeight: 1612,
// availLeft: 0,
// availTop: 23,
// availWidth: 3008,
// colorDepth: 24,
// orientation: {...},
// pixelDepth: 24,
// width: 3008
// } 新推出的多屏 Placement API，允許你枚舉電腦連接配接的所有螢幕，并且可以把浏覽器視窗放置在特定的螢幕上。這會大大便利幻燈片以及金融相關應用。
在使用API之前，需要先請求許可，第一次請求時會向使用者彈窗。
async function getPermission() {
const opt = { name: 'window-placement' };
try {
const perm = await navigator.permissions.query(opt);
return perm.state === 'granted';
} catch {
return false;
}
} 獲得授權後，調用
window.getScreens()
會傳回 Screen 對象清單。
const screens = await window.getScreens();
console.log(screens);
// [
// {id: 0, internal: false, primary: true, left: 0, ...},
// {id: 1, internal: true, primary: false, left: 3008, ...},
// ] :focus-visible
新的CSS選擇器，允許你修改預設的focus樣式，代碼如下：
/* Focusing the button with a keyboard will
show a dashed black line. */
button:focus-visible {
outline: 4px dashed black;
}
/* Focusing the button with a mouse, touch,
or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
outline: none;
box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
} 對于清單項的數字或原點，可以使用
::marker
僞元素，來改變其顔色、尺寸、形狀等資訊。
除此之外，還可以在設定界面選擇「設定 > 進階 > 無障礙 > 短暫地突出顯示焦點對象」，選擇之後，焦點元素周圍會有閃爍的藍光，提供更為醒目的資訊提示。
廢棄&删除的功能
删除 WebComponents v0
Chrome 80版本已經在桌面和安卓端移除了 WebComponents v0，Chrome 86 進一步把它從WebView移除。這項移除包括Custom Elements v0, Shadow DOM v0, 和 HTML Imports。
移除對FTP的支援
Chrome FTP功能的使用量較低，而且實作有bug，存在安全隐患，何況各平台都有更好用的FTP用戶端，不值得繼續維護。是以從 M72 開始，Chrome 便已着手閹割 FTP 功能，先是去掉了 HTTP 代理，現在又開始完全移除 FTP 支援，據計劃，到 Chrome 88，FTP 功能會被徹底禁用。
參考文獻
- https://developers.google.com/web/updates/2020/10/nic86
- https://blog.chromium.org/2020/09/chrome-86-improved-focus-highlighting.html
- https://sspai.com/post/63084
- https://blog.p2hp.com/archives/7490
- https://web.dev/file-system-access/
🔥第十五屆 D2 前端技術論壇開放報名，速搶！
關注「Alibaba F2E」
把握阿裡巴巴前端新動向