2022年Web平臺的新動態(tài)

以下文章來源于前端充電寶 ，作者CUGGZ

5月11-12日，谷歌舉辦了 2022 Google I/O  全球開發(fā)者大會。在大會上，Jake Archibald 和 Una Kravet 向我們介紹了 Web 平臺的最新動態(tài)。下面就來看看 2022 年 Web 平臺有哪些新動態(tài)吧！

本文將著眼于隱私和安全性、強大功能、UI 設計、性能和核心指標以及一些新的 CSS 和 JavaScript 等方面的新功能,。



一、UI 功能
1. accent-color
現(xiàn)在都是 2022 年了，為什么設置下拉菜單和復選框的樣式仍然如此困難？CSS 的 accent-color 屬性就可以輕松解決這個問題。


使用該屬性，可以輕松更改以前難以訪問的表單控件的主題顏色，例如復選框、單選按鈕、范圍控件和進度條等。


在一行 CSS 中，accent-color 使瀏覽器能夠根據(jù)開發(fā)人員設置的背景來確定前景色，并且還可以與 color-scheme 屬性一起為淺色和深色主題提供一些不錯的自動調整。使用下面的代碼片段，瀏覽器會自動創(chuàng)建明暗模式，并為表單控件使用 magenta 強調色。



該屬性正在所有現(xiàn)代 Web 引擎中變得穩(wěn)定。這包括為 Chrome、Edge、Opera、Safari、Firefox。

2. <dialog>
HTML dialog 是一個全新的開箱即用的 HTML 對話框元素。


通過這個元素可以輕松創(chuàng)建一個對話框，例如警報或提示。當將其添加到頁面時，它開始是隱藏的，當使用 showModal 方法來展示它時，它會彈出來：

<dialog id="dialog">
  hello world!
</dialog>

<script>
  someBotton.onclick = () => {
    const dialog = document.getElementById('dialog');
    dialog.showModal();
  };
</script>


當然，這是一個最簡單的例子，我們可以通過 CSS 來為它設置任何想要的樣式，


它真正有用的部分是它處理可訪問性。它被稱為對話框?？梢苑乐规I盤焦點離開元素。它還會在一個特殊的頂層中彈出所有內(nèi)容的頂部，因此即使對話框元素是在某些嵌套組件結構的深處創(chuàng)建的，它也可以填充視口，即使父元素隱藏了溢出隱藏或其他類型的隱藏。

如果在對話框的對話中有一個表單，提交該表單將自動關閉框對話并通過對話框的返回值告訴我們單擊了哪個按鈕。


3. selectmenu
Open UI 社區(qū)組正在積極的研究如何解決更復雜和擴展的表單控件。它們提出了一些實驗性解決方案，例如 selectmenu 組件和pop-up屬性。


selectmenu 組件可以為下拉菜單提供更廣泛的樣式。下面是微軟的一個關于 selectmenu 組件的演示：



Open UI 也在考慮解決其他組件的體驗，比如選項卡和錨定位等。

4. datetime-local
datetime-local 是一個跨瀏覽器功能，它是一種輸入（input）類型。


我們可以這樣來使用它，用戶可以選擇日期和時間：

<label>
  Start data &amp; time:
  <input type="datetime-local" />
</label>
這就是它在 PC端 的 Chrome 和 Android 端的 Chrome 上的外觀：



我們還可以設置驗證約束，例如最小和最大日期。

5. COLRv1
COLRv1 是瀏覽器中的一種新的字體格式。它是 COLRv0 字體格式的演變，其添加了漸變、合成和混合，并改進了內(nèi)部形狀重用，以獲得更清晰、更緊湊的字體文件，從而更有效地壓縮。


和該方法的替代方案bitmap相比，這種壓縮帶來了不錯的性能提升：


COLRv1 字體往往更清晰，而且它們的縮放效果也更好。


這種新格式可以更輕松地在風格上使用彩色字體和表情符號等圖標來創(chuàng)建富有表現(xiàn)力的標題和高性能界面。


例如，可以將它們呈現(xiàn)為彩色字體，而不是使用圖像作為圖標。有一些新的實驗性屬性，例如 font-palette和 override-colors，它們?yōu)橛脩籼峁┝耸褂?COLRv1 設置 Web 字體樣式的新方式。下面的例子就使用override-colors屬性來重新設置 Bungee 字體的樣式。


二、性能
1. bfcache
bfcache 意為往返緩存。它在 Firefox和 Safari 中已存在多年，現(xiàn)在 Chromium 中也支持了該功能。


在一個網(wǎng)頁上點擊一個鏈接到另一個頁面后，但前一頁會保留一段時間，在后臺凍結，這意味著如果按下返回，它會立即觸發(fā)。


并非所有頁面都會發(fā)生這種情況，只有不太可能導致問題的頁面才會發(fā)生這種情況。DevTools 可以告訴我們它是否適用于給定頁面，如果不適用，會給出相應的理由。


2.  圖片懶加載
圖像是頁面的一部分，它會提前開始加載。一旦瀏覽器在源代碼中看到它們，就會提示下載。即使圖像被隱藏，即使它位于一個非常長的頁面的底部，也會提前加載。現(xiàn)在，一個簡單的 loading 屬性就可以讓瀏覽器在開始下載時考慮圖像的可見性和位置。


它也適用于 iframe：

<img src="..." alt="..." loading="lazy" />
<iframe src="..." loading="lazy"></iframe>
如果將 loading="lazy" 放在頁面頂部的重要大圖上，它們的加載速度會變慢，所以要格外小心。如果將它添加到不太重要和屏幕外的圖像中時，它們不會爭奪帶寬，而更重要的東西（如樣式、腳本和更高優(yōu)先級的圖像）會優(yōu)先考慮。

現(xiàn)在它可以跨瀏覽器使用，并且可以在WordPress、Wix、Silverstripe、Drupal 等中使用。

3. aspect-ratio
如果我們?yōu)閳D像設置了height和width屬性，并將高度設置為自動，它們將保持其縱橫比，在加載之前，這避免了布局的變化。CSS 新增的 aspect-ratio 屬性可以你為所有元素實現(xiàn)相同的效果，而不僅僅是圖像。



在 iframe、組件div、網(wǎng)格布局和元素上使用該屬性都可以得到一個固定的縱橫比。

.whatever {
  aspect-ratio: 16 / 9;
}
這對于嵌入的內(nèi)容、占位符或非HTML中的圖像（如 CSS 背景）特別有用。

4.  containment
containment是一個具有性能優(yōu)勢的 CSS 特性。該屬性讓開發(fā)人員可以告訴瀏覽器如何在屏幕上呈現(xiàn)內(nèi)容，并隔離 DOM 子樹。這反過來又使瀏覽器能夠延遲渲染大小、窗格和布局，以提高速度和效率。


containment 也是容器查詢的先決條件，下面會進行介紹。

5. Priority Hints
在獲取內(nèi)容時，瀏覽器會盡可能地智能將阻止渲染的內(nèi)容獲得超高優(yōu)先級，然后，當瀏覽器知道內(nèi)容在哪里時，它會為視口中的內(nèi)容賦予更高的優(yōu)先級。但是在某些情況下，瀏覽器沒有足夠的信息來做出正確的決定，比如兩個異步加載的腳本、兩個預加載的圖片、兩個iframe、兩個可見的圖像，其中一個更重要。



現(xiàn)在，我們可以使用最近在 Chrome 中支持的 Priority Hints 來更快地獲取圖片：


它是如何工作的呢？以上面中的代碼為例，fetch-priority 屬性可以讓我們?yōu)橥獠课募砑蛹虞d的優(yōu)先級：


6. size-adjust
size-adjust是一個用于網(wǎng)頁排版的實驗性 CSS 屬性，通過減少累積布局偏移（CLS）來提高性能。







它是怎么做到的？字體有各種形狀和大小，即使是相同大小的字體也可能看起來完全不同。一種 16 號字體可能看起來比另一種大很多。這就是 size-adjusts 可以發(fā)揮作用的地方。使用 size-adjusts，用戶可以對字體大?。òū镜刈煮w）進行視覺調整，以使它們在形狀上看起來更接近想要替換它的 Web 字體。由于 web 字體在下載后會替換本地字體，這減少了頁面的整體累積布局偏移。


7. SIMD
在過去的一年里，SIMD登陸了 Chromium 和 Firefox 的穩(wěn)定版本。SIMD 代表單指令多數(shù)據(jù)流，能夠復制多個操作數(shù)，并把它們打包在大型寄存器的一組指令集。它是一種并行運行特定小操作的低等級方式，它是圖像、視頻和音頻進程的 C++ 實現(xiàn)中的常見優(yōu)化。


直到現(xiàn)在，這些優(yōu)化在將這些程序編譯到 WebAssembly 時都丟失了?，F(xiàn)在，主流瀏覽器都已經(jīng)實現(xiàn)該功能，不過 Safari 尚不支持它。我們可以編譯 WebAssembly 兩次，創(chuàng)建一個使用 SIMD 的包和另一個不使用 SIMD 的包。這樣，Chrome 和 Firefox 將受益于更快的 WebAssembly，在 Safari 中也仍然可以正常工作。這就是在 Squoosh 上為加快圖像壓縮所做的工作。

8. Interaction to Next Paint
本節(jié)最后來看一個試驗性的新性能指標：Interaction to Next Paint（與下一次繪制的交互），它不僅考慮第一次交互，還考慮頁面上的所有交互。例如，它將測量用戶按下播放按鈕和看到暫停按鈕替換它之間的時間。



更具體地說，它記錄了從用戶交互到所有事件處理程序運行后繪制下一幀的時間。該指標還可以更好地捕捉用戶體驗到的交互延遲，突出顯示 UI 響應方式的任何意外的緩慢。

三、隱私和安全
1. CHIPS
我們的長期項目之一是通過逐步淘汰第三方 cookie 和跨站點跟蹤來改善用戶隱私。其他瀏覽器已經(jīng)這樣做了，不過這產(chǎn)生了一些兼容性問題。因此，我們一直致力于開發(fā)有助于我們保持現(xiàn)有用戶友好功能的 API。


假設你的站點中嵌入了一個聊天應用程序，它可以管理自己的登錄狀態(tài)。傳統(tǒng)上，這將通過允許嵌入式站點擁有自己的一組 cookie 來實現(xiàn)，而不管站點嵌入在何處。這就是即將消失的第三方 cookie 行為。這非常適合隱私，但它破壞了像這種嵌入式聊天這樣的合法有用的友好案例。如果聊天沒有自己的 cookie，它就不會記住用戶已登錄，并且每次都會退出。



那么我們能做些什么呢？如果有辦法保留cookie 的有用部分但刪除跨站點跟蹤部分怎么辦。為此，我們正在試驗具有獨立分區(qū)狀態(tài)的 cookie。



這是設置 cookie 時傳遞的屬性，意味著該 cookie不會被阻止，但也不會被共享。


如果在聊天應用程序嵌入 A 時設置了 cookie，那么它只有在站點嵌入 A 時才可用。當聊天應用程序嵌入到不同的站點時，它將有一個完全不同的 cookie jar，所以它不能用于跨站點跟蹤。但是，我們?nèi)匀豢梢员Ａ魰挕?br>

2. Topics
廣告平臺目前使用跟蹤技術來投放相關廣告，但這些模式的大門已經(jīng)關閉。因此，我們正在研究如何讓平臺在不對隱私產(chǎn)生負面影響的情況下投放有意義的廣告。我們提出了一個實驗性的Topics API。



它為頁面提供了瀏覽器認為用戶感興趣的一些主題，這些主題可用于確定要展示的最佳廣告。只對外共享高級主題，而不是用戶的瀏覽歷史，并且不同站點為同一用戶獲取不同的主題，這使得它們作為跨站點標識符并不是特別有用。


3.  User-Agent Client Hints
我們正在與其他瀏覽器一起采取措施減少 User Agent 字符串中自動共享的數(shù)據(jù)量，這構建用戶自定義體驗非常重要。但使用 User Agent字符串來制定樣式?jīng)Q策或有條件地提供不同的內(nèi)容通常不是一個好主意。話雖如此，有時對于諸如 polyfills 或解決特別討厭的錯誤之類的東西是必要的。


不使用 User Agent 字符串，而是查看 User-Agent Client Hints API，目前基于 Chromium 的瀏覽器支持該 API：


4. WebAuth
密碼是不是管理用戶帳戶的最安全方法呢？盡管我們還不是完全沒有密碼的世界，但有一些新興方法可以為密碼管理器提供更好的支持，從而使用戶體驗無縫且更安全。


我們正在開發(fā) WebAuth 中的密碼，并作為 FIDO 聯(lián)盟的一部分進行開發(fā)。這將允許注冊的憑據(jù)在 Android 設備之間同步，因此不必總是輸入密碼。要跨設備登錄，可以通過掃描二維碼將手機用作安全密鑰。


四、Web app 能力
1. Media Session API
我們希望 Web 具有類似 APP 的功能，以便可以創(chuàng)建豐富的跨平臺體驗。例如，桌面和移動設備上的大多數(shù)操作系統(tǒng)都具有某種媒體集成，它們會告訴我們正在播放的內(nèi)容，并提供對暫停、跳過和搜索的控制。


在某些情況下，這些控件出現(xiàn)在不同的設備上。從手機播放的歌曲，可以在手表上顯示媒體控件。Media Session API 可以讓我們通過 Web 完成所有這些操作，顯示 Windows、Mac OS、Android 和 iOS 上的媒體控件并對其做出反應，包括智能手表等相關設備。


截至今年，瀏覽器支持非常好。


2. Window Controls Overlay
Window Controls Overlay 是一個操作系統(tǒng)的集成功能，這個功能要新得多。它目前是 Chromium 獨有的功能，但對于已安裝的 app 來說，它是一個不錯的漸進增強功能。


當你在桌面上安裝 Web app 時，它會在一個窗口中打開，類似于這樣。


但是 Chrome 99 中的一項新功能可以使它更像這樣：


看起來可能很糟糕。但這允許我們將Web 內(nèi)容放在中間的那個區(qū)域，就像這樣：


可以使用 Web App Manifest 中的選項激活此功能，然后，我們將獲得 CSS 環(huán)境變量和一個 API，以告訴所有窗口控件的位置，以便可以在它們周圍放置元素。

3. Navigation API
為了控制導航，瀏覽器有一些 API，比如 history.pushState 和 popstate事件來處理會話歷史。


我們對其進行了重新設計，并將其稱為 Navigation API。這為我們提供了同源 session history 的當前 Windows 視圖，除非我們攔截導航，這意味著不需要依賴鏈接上的點擊事件。這將使管理重新加載和遍歷 Web app 之間的狀態(tài)變得更加容易。


它現(xiàn)在正在 Chrome 中進行原始試驗，很快就會穩(wěn)定下來。







4. PageTransition API
PageTransition API 是一個使用 CSS 動畫等熟悉的概念來簡化在頁面和頁面狀態(tài)之間創(chuàng)建豐富動畫轉換的 API。使用該 API 可以在狀態(tài)之間獲得平滑的自定義轉換。


5. Web App color scheme
Web App color scheme 是對 Web App Manifest 的補充，它可以讓我們?yōu)闇\色和深色主題提供不同的顏色。


這類似于配色方案樣式，但它更適合網(wǎng)站的配色方案。它適用于 PWA 界面。這是一個看似很小的補充，但它對用戶體驗產(chǎn)生了很大的影響。該功能目前正在 Chromium 中進行原始試驗。

6. Eyedropper API
Eyedropper API 是一種輸入（input）類型，是用于選擇顏色值的吸管。


目前僅在桌面端的 Chromium 中支持，因為它是一個相當具體的桌面交互。通過快速的 API 調用就可以在用戶交互后激活吸管，然后用戶可以單擊某處并將捕獲顏色發(fā)送回 Web 應用程序。它甚至可以在瀏覽器之外捕捉顏色，使其成為完全類似于應用程序的體驗。


7. Virtual Keyboard API
平板電腦或手機等設備通常具有用于輸入文本的虛擬鍵盤。與物理鍵盤不同，虛擬鍵盤會根據(jù)用戶的操作和需求出現(xiàn)和消失。


使用 Virtual Keyboard API，用戶可以通過 JavaScript 以編程方式訪問虛擬鍵盤，將有關鍵盤的信息傳遞到 CSS及其環(huán)境變量中，并為其設置樣式，并提供確定是否應顯示虛擬鍵盤的策略。


五、原生功能
1. 結構化克隆
可以使用 structuredClone 輕松實現(xiàn) JavaScript 值的深拷貝。它目前適用于所有主流瀏覽器。


它不僅更干凈，還可以克隆更多的東西，比如 blob、圖像位圖、類型化數(shù)組。它甚至可以克隆具有循環(huán)引用的對象結構。

const clone = structuredClone(obj)
這不是 JavaScript 中的功能，它來自 HTML 規(guī)范。但它也在 Node.js 和 Deno 中實現(xiàn)。

2. createimageBitmap
下面來介紹如何將圖像 blob 轉換為可以在 Canvas 中顯示的內(nèi)容。使用以下方式就很容易導致內(nèi)存泄漏：


但是現(xiàn)在所有瀏覽器都支持 createimageBitmap API：


使用它，上面的代碼就變成了這樣：


不僅如此，我們還可以更好地控制圖像的加載方式。它對于為 2D canvas 和 WebGL 加載紋理非常有用。


3. JavaScript 功能

（1）頂層等待
現(xiàn)在可以像這樣在 JavaScript 模塊的頂層使用 await：


（2）私有屬性和方法
類現(xiàn)在可以擁有私有屬性和私有方法：


只要以#開頭的屬性和方法，就只有類內(nèi)部的代碼可以訪問它。

（3）array.at
array.at 方法可以通過索引從數(shù)組中獲取一個元素，如果傳入的值為負數(shù)，就會從元素后邊開始查找：


該方法也適用于字符串和類型化數(shù)組。所有這些現(xiàn)在都是跨瀏覽器的。

4. SharedArrayBuffer
SharedArrayBuffer 也是跨瀏覽器的。它 允許在頁面和 workers 之間共享內(nèi)存，內(nèi)存共享對于使用 WebAssembly 的多個線程來說非常重要，因為它允許從 C++ 和 Rust 等移植代碼，而性能損失最小。!

該功能在2018年出現(xiàn)了一些非常糟糕的 CPU 錯誤，瀏覽器出于安全原因不得不取消此功能。從那時起，瀏覽器一直在合作開發(fā)一種稱為跨域隔離的功能，這大大減少了這些 CPU 錯誤的影響。所以現(xiàn)在，該功能已在所有引擎和平臺上安全恢復。

5. URLPattern
URLPattern 允許我們根據(jù)模式驗證 URL，并提取部分。該功能去年年底在 Chromium 瀏覽器中發(fā)布。它還沒有出現(xiàn)在其他瀏覽器中，但是有一個 polyfill，讓我們現(xiàn)在可以跨瀏覽器使用它。


6. WebCodecs API
WebCodecs API 實際上是一整套 API，可以對圖像和視頻解碼和圖像編碼進行低級控制，從將幀從動畫 GIF 中拉出，到對 WebGL 生成的場景進行編碼，再到 H.264 視頻，所有這些瀏覽器內(nèi)。


多年來，瀏覽器已經(jīng)內(nèi)置了圖像和視頻編解碼器，但這個 API 讓我們可以對它們進行低級控制。這是 Chromium 領先的功能，期待未來有更多的跨引擎支持。


7. CSS 功能
（1）級聯(lián)層
有時我們添加的選擇器只是為了打敗另一條規(guī)則的特異性，級聯(lián)層就解決了這個問題。



我們可以將導入的樣式放入圖層中：


也可以使用這些圖層塊對樣式進行分組：


現(xiàn)在，默認情況下，一個接一個出現(xiàn)的圖層可以覆蓋之前圖層的所有樣式，而不管選擇器的特異性（權重）如何。我們也可以預先定義圖層的順序。層中的樣式比層外的樣式具有更低的特異性，除非樣式被標記為 !important。執(zhí)行此操作時，這些樣式會以相反的圖層順序應用它。


（2）:has()
:has() 是 CSS 選擇的強大工具，可以用來檢查父級在其范圍內(nèi)的任何屬性，它被稱為父選擇器，用來檢查父級中是否包含某個子元素。



例如，使用

figure:has(figcaption) 時，figure 如何包含figcaption元素，就可以為子元素、父元素或者其他元素來設置樣式。

（3）容器查詢
我們可以使用媒體查詢創(chuàng)建響應式設計，根據(jù)瀏覽器窗口的寬度更改應用哪些樣式。但更寬的瀏覽器窗口并不總是意味著更寬的組件。使用媒體查詢來滿足這一點就很困難。容器查詢可以根據(jù)任何父容器的寬度、高度、樣式或狀態(tài)應用樣式來解決這個問題，從而創(chuàng)建真正基于組件的響應式界面。


使用容器查詢，每個組件都擁有自己的響應信息，并且無論它位于 UI 中的哪個位置，都會做出相應的響應。

容器查詢的另一個很酷的事情是命名容器。如果有一個嵌套在一個父級中的子級，但它需要查詢另一個父級，就可以創(chuàng)建針對這種確切情況的容器規(guī)則。

六、總結
一年來，Web 已經(jīng)走過了漫長的道路。我們一直在與瀏覽器供應商會面并開展合作，以通過一項名為 Interop 2022 的計劃確保開發(fā)者的 Web 開發(fā)體驗更加出色。我們的目標是推出一些最需要的開發(fā)人員功能，并解決了一些最令人惱火的兼容性錯誤。

2022 年，我們的目標是專注于這 15 個關鍵領域，以確保行為在瀏覽器之間完全可互操作。


最終，我們希望開發(fā)者能夠在 Web 上構建出色的體驗，互操作性或瀏覽器支持不應成為障礙。有很多創(chuàng)新即將到來！

作者：CUGGZ



歡迎關注微信公眾號 ：前端晚間課

更多文章，收錄于小程序-互聯(lián)網(wǎng)小兵