即將推出的 chrome 95 新特性！從中我們能學(xué)到什么？

1前言

為什么會(huì)想到開始寫這類的文章呢?

我想先從大的方向來談:

Google 坐擁了全球第一大操作系統(tǒng) Android 以及全球第一大瀏覽器 Chrome，67.14%市場(chǎng)占有率的 Chrome 簡(jiǎn)直可以為所欲為．

人們總是對(duì) Google 亦步亦趨，畢竟這十年里逐漸崛起的 Google Chrome 在眾多的瀏覽器中已經(jīng)無敵手了．

對(duì)于前端開發(fā)者而言，雖然是樂意看到 Chrome 一統(tǒng)天下的，畢竟誰也忘不了曾經(jīng)被 IE 支配的恐懼。但壟斷并不是一件好事！因?yàn)樗蟾怕蕰?huì)帶來技術(shù)的停滯，IE 就是一個(gè)鮮活的例子。IE 當(dāng)初脫離標(biāo)準(zhǔn)，形成自己的 API 規(guī)范的初衷，就是為了壟斷瀏覽器市場(chǎng)?。ù蠹覒?yīng)該對(duì)壟斷心懷警惕?。?/p>

微軟 Edge 瀏覽器換用 Chromium 內(nèi)核已經(jīng)不是新聞了，Chromium 內(nèi)核的 Edge 也已經(jīng)正式發(fā)布，雖然沒有通過 Windows Update 推送，但大家可以手動(dòng)到 Edge 官網(wǎng)下載安裝。

開源是一個(gè)非常有效的達(dá)到合謀的方式，可以迅速的成就一個(gè)「虛擬的寡頭」乃至于造成事實(shí)上的壟斷。高舉規(guī)范、開源(chromium)旗幟的 Chrome，正在悄悄的成為巨龍．．．

為什么選擇從這個(gè)時(shí)候開始寫呢？

因?yàn)閺?chrome95 開始，chrome 會(huì)每隔 4 周就會(huì)更新一個(gè)版本。
版本更迭之快，從中我們能嗅探到很多前沿的技術(shù)趨勢(shì)，以及未來哪些東西會(huì)面臨淘汰！

我想在之后的每一個(gè)大版本更新后,我都會(huì)第一時(shí)間把其中的重要資訊總結(jié)出來給與大家一起分享學(xué)習(xí)!

Chrome 95 測(cè)試版于 2021 年 9 月 23 日發(fā)布，預(yù)計(jì)將于 2021 年 10 月下旬成為穩(wěn)定版本。

2新版本特性分享

新增特性

• EyeDropper APIEyeDropper API 提供瀏覽器提供的吸管，用于構(gòu)建自定義顏色選擇器。為 Web 構(gòu)建的創(chuàng)意應(yīng)用程序可以受益于從屏幕上的像素中采樣顏色的能力。
  這個(gè)可以在屏幕的任何地方取顏色哦~ 包括瀏覽器外面的區(qū)域,它有什么好處呢?不知道大家用過 figma，或者藍(lán)湖沒有,諸如此類的 web 端 ui 設(shè)計(jì)應(yīng)用,取色是一個(gè)很常用的功能項(xiàng)（包括我們平時(shí)開發(fā)頁面時(shí)，不需要借用其他工具去別的窗口提取ＵＩ給出的設(shè)計(jì)圖某塊區(qū)域的顏色值，現(xiàn)在通過這個(gè)特性就能簡(jiǎn)單的實(shí)現(xiàn)?。?/strong>

• self.reportError API
  該全局方法可用于報(bào)告錯(cuò)誤控制臺(tái)或全球事件處理程序，模擬一個(gè)未捕獲的 JavaScript 異常。詳情^[1]

  var?newError?=?new?Error("Some?error?message",?"someFile.js",?11);
  self.reportError(newError);
  
  window.onerror?=?function(message,?source,?lineno,?colno,?error)?{
  ????console.log("message:"?+?error.message?+?",?lineno:?"?+?lineno);
  ????return?true;
  };
  
  self.addEventListener("error",?(error)?=>?{
  ????console.log(error.filename);
  });
  
  //?Output
  //?>?"message:Some?error?message,?lineno:?11"
  //?>?"someFile.js"
  

  此功能主要用于自定義事件調(diào)度或回調(diào)操作庫。庫可以使用此功能來捕獲回調(diào)代碼中的錯(cuò)誤并將它們重新拋出到頂級(jí)處理程序。這確保了一個(gè)回調(diào)中的異常不會(huì)阻止其他回調(diào)的處理，同時(shí)確保堆棧跟蹤信息仍可用于頂層調(diào)試。

• URLPattern作為一個(gè)新的 API，提供操作系統(tǒng)支持，用于將 URL 與提供的模式相匹配。詳情^[2]和MDN^[3]

• 調(diào)試面板中對(duì)屬性值的便捷修改

  DevTools 添加了一種更簡(jiǎn)單而靈活的方式來更新 CSS 中的長度！在“樣式”窗格中，查找任何具有長度的 CSS 屬性（例如 height, padding）。將鼠標(biāo)懸停在單位類型上，注意單位類型帶有下劃線。單擊它以從下拉列表中選擇一個(gè)單位類型。

  

  配合 chrome 94 支持中文的特性,控制臺(tái)變的越來越方便 ??

• 改進(jìn)了 DevTools 命令菜單的 UI

  對(duì)于經(jīng)常在 chrome 中查找頁面資源的開發(fā)者還是挺有用(ctrl+P 調(diào)出) 改進(jìn)前

  改進(jìn)后

• 在 Console、Sources 面板和 Properties 窗格中對(duì)自定義的屬性進(jìn)行加粗和排序

  

  除了這些更改之外，“屬性”窗格中的屬性現(xiàn)在也被扁平化，以獲得更好的 DOM 屬性調(diào)試體驗(yàn)，尤其是對(duì)于[Web components]

  對(duì)于 web component 以后有機(jī)會(huì)我單獨(dú)拎一篇文章來講，大家可以查看這里^[4]

  

• Lighthouse 現(xiàn)在更新到了 8.4

  我們都知道,網(wǎng)站使用體驗(yàn)的三大核心指標(biāo) - LCP, FID, CLS

  Lighthouse 現(xiàn)在將檢測(cè) LCP 元素是否是惰性加載的圖像，并建議刪除它的 loading 屬性。

  影響 LCP 的四個(gè)因素如下:

  因?yàn)樽罱豁?xiàng) WordPress 中延遲加載的最新研究發(fā)現(xiàn)，對(duì)于某些站點(diǎn)來說，如果初始視圖中的圖像沒有延遲加載，LCP 可以提高 15%。

  詳情可以看這里^[5]

  

• 較慢的服務(wù)器響應(yīng)時(shí)間
• 渲染阻塞的 js 和 css
• 較慢的資源加載時(shí)間
• 客戶端渲染

• 最新的 lighthouse 支持通過 npm 下載

  通過命令lighthouse https://www.example.com --view

  這里我通過百度為例子,大家替換為自己想測(cè)試的站點(diǎn)即可

  

3刪除與棄用

• 刪除了 FTP 支持

  Chrome 正在取消對(duì) FTP URL 的支持^[6]。瀏覽器中 FTP 的使用率足夠低，投資改進(jìn)現(xiàn)有 FTP 客戶端已不再可行。此外，所有受影響的平臺(tái)上都提供了功能更強(qiáng)大的 FTP 客戶端。

  Google Chrome 72 及更高版本取消了對(duì)通過 FTP 獲取文檔子資源和呈現(xiàn)頂級(jí) FTP 資源的支持。當(dāng)前導(dǎo)航到 FTP URL 會(huì)根據(jù)資源類型顯示目錄列表或下載。Google Chrome 74 及更高版本中的一個(gè)錯(cuò)誤導(dǎo)致不再支持通過 HTTP 代理訪問 FTP URL。在 Google Chrome 76 中完全刪除了對(duì) FTP 的代理支持。在 Chrome 86 中，預(yù)發(fā)布渠道（Canary 和 Beta）的 FTP 支持被關(guān)閉，并且實(shí)驗(yàn)性地關(guān)閉了百分之一的穩(wěn)定用戶，盡管它可以通過命令行重新啟用. 在 Chrome 87 中，它對(duì) 50% 的用戶關(guān)閉，但也可以通過命令行啟用。從 Chrome 88 開始，它只能通過棄用試用版獲得，現(xiàn)在已被禁用。

• FTP 支持現(xiàn)在被完全刪除自 Chrome 88 以來，它只通過廢棄試驗(yàn)提供，但現(xiàn)在已經(jīng)完全取消了。

• 支持以數(shù)字結(jié)尾的非 IPv4 主機(jī)名的 URL

  大多數(shù)不是有效 IPv4 地址但以數(shù)字結(jié)尾的主機(jī)名都被視為有效，并通過 DNS 查找（例如，http://foo.127.1/）。根據(jù)公共后綴列表規(guī)范，該 URL 中主機(jī)名的 eTLD+1 應(yīng)為127.1.? 如果將其反饋到 URL 中，則由 URL 規(guī)范http://127.1/映射到http://127.0.0.1/，這似乎具有潛在危險(xiǎn)。127.0.0.0.1也可能被用來迷惑用戶。現(xiàn)在拒絕帶有這些主機(jī)名的 URL^[7]。

• WebAssembly 跨源模塊共享

  Chrome 現(xiàn)在不贊成^[8]在跨域但同站點(diǎn)的環(huán)境之間共享 WebAssembly 模塊^[9]，以允許代理集群長期作用于源^[10]。

• 棄用 U2F API（加密令牌）

  Chrome 用于與安全密鑰交互的舊版 U2F API 已棄用，并在 Chrome 95 中開始棄用試用，其中該 API 默認(rèn)保持啟用狀態(tài)，但試用令牌將禁用參與站點(diǎn)的密鑰。U2F 安全密鑰本身并未被棄用，并將繼續(xù)有效。

  受影響的站點(diǎn)應(yīng)遷移到Web 身份驗(yàn)證 API^[11]。最初通過 U2F API 注冊(cè)的憑據(jù)可以通過 Web 身份驗(yàn)證進(jìn)行質(zhì)詢。Web Authentication API 也支持 U2F API 支持的 USB 安全密鑰。

  U2F 是 Chrome 的原始安全密鑰 API。它允許站點(diǎn)在 USB 安全密鑰上注冊(cè)公鑰憑據(jù)，并挑戰(zhàn)它們以構(gòu)建防網(wǎng)絡(luò)釣魚的兩因素身份驗(yàn)證系統(tǒng)。U2F 從未成為開放的 Web 標(biāo)準(zhǔn)，而是被 Web 身份驗(yàn)證 API（在 Chrome 67 中啟動(dòng)）所包含。Chrome 從未直接支持 FIDO U2F JavaScript API，而是提供了一個(gè)名為 cryptotoken 的組件擴(kuò)展，它公開了一個(gè)等效的chrome.runtime.sendMessage()方法。U2F 和 Cryptotoken 一直處于維護(hù)模式，并在過去兩年鼓勵(lì)站點(diǎn)遷移到 Web 身份驗(yàn)證 API。

chrome 刪除與棄用特性的歷史列表

訪問 ChromeStatus.com 以獲取當(dāng)前棄用^[12]和以前刪除的^[13]列表。

4最后

chrome95 開始，chrome 會(huì)每隔 4 周就會(huì)更新一個(gè)版本，對(duì)于喜歡嘗鮮的同學(xué)們，我推薦下載 chrome 測(cè)試版或者金絲雀版本來體驗(yàn)最新的特性． 對(duì)于一些正在試驗(yàn)中的 API 我們也可以通過下面這個(gè)網(wǎng)站提交登記，或者體驗(yàn)資格

通過填寫一些信息后等待審核通過即可，非常的方便！

以上就是我對(duì)即將推出的 chrome95 的主要新增特性的分享~希望對(duì)你有所幫助 ~ ??

往期干貨：
?26個(gè)經(jīng)典微信小程序+35套微信小程序源碼+微信小程序合集源碼下載（免費(fèi)）
?干貨~~~2021最新前端學(xué)習(xí)視頻~~速度領(lǐng)取
?前端書籍-前端290本高清pdf電子書打包下載

點(diǎn)贊和在看就是最大的支持??