Chrome 86 在2020年10月推出了穩定版，現已全面應用於Android、Chrome OS、Linux、macOS 和 Windows等平臺，我們一起來看下這次的重要更新。

若要看全部更新，請移步（https：//www。chromestatus。com/features#milestone=86）。

新增穩定功能

檔案系統訪問

還記得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）；

更多資訊，請移步

更醒目的 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必須要使用者授權才能呼叫。

多屏 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/w

eb/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-acc

ess/

——————————————————————————————————————————

阿里巴巴集團淘系技術部官方賬號。淘系技術部是阿里巴巴新零售技術的王牌軍，支撐淘寶、天貓核心電商以及淘寶直播、閒魚、躺平、阿里汽車、阿里房產等創新業務，服務9億使用者，賦能各行業1000萬商家。我們打造了全球領先的線上新零售技術平臺，並作為核心技術團隊保障了11次雙十一購物狂歡節的成功。

點選下方主頁關注我們，你將收穫更多來自阿里一線工程師的技術實戰技巧&成長經歷心得。另，不定期更新最新崗位招聘資訊和簡歷內推通道，歡迎各位以最短路徑加入我們。