2022年開發人員不可錯過的 Web 平台的新動態

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

本文將著眼於隱私和安全性、強大功能、UI 設計、效能和核心指標以及一些新的 CSS 和 JavaScript 等方面的新功能，以增強開發人員的工具。

一、UI 功能

#1. accent-color

現在都是2022 年了，為什麼設定下拉式選單和複選框的樣式仍然如此困難？ CSS 的 accent-color 屬性就可以輕鬆解決這個問題。

使用此屬性，可以輕鬆變更先前難以存取的表單控制項的主題顏色，例如核取方塊、單選按鈕、範圍控制項和進度列等。

在一行CSS 中，accent-color 使瀏覽器能夠根據開發人員設定的背景來確定前景色，並且還可以與color-scheme 屬性一起為淺色和深色主題提供一些不錯的自動調整。使用下面的程式碼片段，瀏覽器會自動建立明暗模式，並為表單控制項使用 magenta 強調色。

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

2. <dialog></dialog>

#HTML dialog 是全新的開箱即用的 HTML 對話方塊元素。

透過這個元素可以輕鬆建立一個對話框，例如警報或提示。當將其新增至頁面時，它開始是隱藏的，當使用showModal 方法來展示它時，它會彈出來：

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

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

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

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

如果在對話框的對話中有一個表單，提交該表單將自動關閉框對話並透過對話框的回傳值告訴我們點選了哪個按鈕。

3. selectmenu

#Open UI 社群群組正在積極的研究如何解決更複雜和擴展的表單控制項。它們提出了一些實驗性解決方案，例如 selectmenu 元件和pop-up屬性。

selectmenu 元件可以為下拉式選單提供更廣泛的樣式。以下是微軟的一個關於selectmenu 元件的示範：

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

4. datetime-local

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

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

<label>
  Start data & time:
  <input type="datetime-local" />
</label>

這就是它在PC端的Chrome 和Android 端的Chrome 上的外觀：

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

5. COLRv1

COLRv1 是浏览器中的一种新的字体格式。它是 COLRv0 字体格式的演变，其添加了渐变、合成和混合，并改进了内部形状重用，以获得更清晰、更紧凑的字体文件，从而更有效地压缩。

和该方法的替代方案bitmap相比，这种压缩带来了不错的性能提升：

COLRv1 字体往往更清晰，而且它们的缩放效果也更好。

这种新格式可以更轻松地在风格上使用彩色字体和表情符号等图标来创建富有表现力的标题和高性能界面。

例如，可以将它们呈现为彩色字体，而不是使用图像作为图标。有一些新的实验性属性，例如 font-palette和 override-colors，它们为用户提供了使用 COLRv1 设置 Web 字体样式的新方式。下面的例子就使用override-colors属性来重新设置 Bungee 字体的样式。

二、性能

1. bfcache

bfcache 意为往返缓存。它在 Firefox和 Safari 中已存在多年，现在 Chromium 中也支持了该功能。

在一个网页上点击一个链接到另一个页面后，但前一页会保留一段时间，在后台冻结，这意味着如果按下返回，它会立即触发。

并非所有页面都会发生这种情况，只有不太可能导致问题的页面才会发生这种情况。DevTools 可以告诉我们它是否适用于给定页面，如果不适用，会给出相应的理由。

2. 图片懒加载

图像是页面的一部分，它会提前开始加载。一旦浏览器在源代码中看到它们，就会提示下载。即使图像被隐藏，即使它位于一个非常长的页面的底部，也会提前加载。现在，一个简单的 loading 属性就可以让浏览器在开始下载时考虑图像的可见性和位置。

它也适用于 iframe：

<img src="/static/imghw/default1.png"  data-src="..."  class="lazy"   alt="..." loading="lazy" />
<iframe src="..." loading="lazy"></iframe>

如果将 loading="lazy" 放在页面顶部的重要大图上，它们的加载速度会变慢，所以要格外小心。如果将它添加到不太重要和屏幕外的图像中时，它们不会争夺带宽，而更重要的东西（如样式、脚本和更高优先级的图像）会优先考虑。

现在它可以跨浏览器使用，并且可以在WordPress、Wix、Silverstripe、Drupal 等中使用。

3. aspect-ratio

如果我们为图像设置了height和width属性，并将高度设置为自动，它们将保持其纵横比，在加载之前，这避免了布局的变化。CSS 新增的 aspect-ratio 属性可以你为所有元素实现相同的效果，而不仅仅是图像。

在 iframe、组件div、网格布局和元素上使用该属性都可以得到一个固定的纵横比。

.whatever {
  aspect-ratio: 16 / 9;
}

这对于嵌入的内容、占位符或非HTML中的图像（如 CSS 背景）特别有用。

4. containment

containment是一个具有性能优势的 CSS 特性。该属性让开发人员可以告诉浏览器如何在屏幕上呈现内容，并隔离 DOM 子树。这反过来又使浏览器能够延迟渲染大小、窗格和布局，以提高速度和效率。

containment 也是容器查询的先决条件，下面会进行介绍。

5. Priority Hints

在取得內容時，瀏覽器會盡可能地智慧將阻止渲染的內容獲得超高優先級，然後，當瀏覽器知道內容在哪裡時，它會為視口中的內容賦予更高的優先權。但在某些情況下，瀏覽器沒有足夠的資訊來做出正確的決定，例如兩個非同步載入的腳本、兩個預先載入的圖片、兩個iframe、兩個可見的圖像，其中一個更重要。

現在，我們可以使用最近在Chrome 中支援的Priority Hints 來更快地取得圖片：

它是如何運作的呢？以上面中的程式碼為例，fetch-priority 屬性可以讓我們為外部檔案新增載入的優先權：

6. size-adjust

size-adjust是一個用於網頁排版的實驗性CSS 屬性，透過減少累積佈局偏移（CLS）來提高效能。

它是怎麼做到的？字體有各種形狀和大小，即使是相同大小的字體也可能看起來完全不同。一種 16 號字體可能看起來比另一種大很多。這就是 size-adjusts 可以發揮作用的地方。使用 size-adjusts，使用者可以對字體大小（包括本地字體）進行視覺調整，以使它們在形狀上看起來更接近想要替換它的 Web 字體。由於 web 字體在下載後會取代本機字體，這減少了頁面的整體累積佈局偏移。

7. SIMD

在過去的一年裡，SIMD登陸了 Chromium 和 Firefox 的穩定版本。 SIMD 代表單一指令多資料流，能夠複製多個運算元，並將它們打包在大型暫存器的一組指令集。它是一種並行運行特定小操作的低等級方式，它是影像、視訊和音訊進程的 C 實作中的常見最佳化。

直到現在，這些最佳化在將這些程式編譯到 WebAssembly 時都遺失了。現在，主流瀏覽器都已經實現該功能，不過 Safari 尚不支援它。我們可以編譯 WebAssembly 兩次，建立一個使用 SIMD 的套件和另一個不使用 SIMD 的套件。這樣，Chrome 和 Firefox 將受益於更快的 WebAssembly，在 Safari 中也仍然可以正常運作。這就是在 Squoosh 上為加快影像壓縮所做的工作。

8. Interaction to Next Paint

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

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

三、隱私與安全

1. CHIPS

我們的長期專案之一是透過逐步淘汰第三方cookie 和跨網站追蹤來改善使用者隱私。其他瀏覽器已經這樣做了，不過這產生了一些相容性問題。因此，我們一直致力於開發有助於我們保持現有用戶友好功能的 API。

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

那我們能做些什麼呢？如果有辦法保留cookie 的有用部分但刪除跨網站追蹤部分怎麼辦。為此，我們正在試驗具有獨立分區狀態的 cookie。

這是設定 cookie 時傳遞的屬性，表示該 cookie不會被阻止，但也不會被共用。

如果在聊天應用程式嵌入 A 時設定了 cookie，那麼它只有在網站嵌入 A 時才可用。當聊天應用程式嵌入到不同的網站時，它將有一個完全不同的 cookie jar，所以它不能用於跨網站追蹤。但是，我們仍然可以保留會話。

2. Topics

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

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

3.  User-Agent Client Hints

我們正在與其他瀏覽器一起採取措施減少User Agent 字串中自動共享的資料量，這建立使用者自訂體驗非常重要。但使用 User Agent字串來製定樣式決策或有條件地提供不同的內容通常不是一個好主意。話雖如此，有時對於諸如 polyfills 或解決特別討厭的錯誤之類的東西是必要的。

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

#4. WebAuth

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

我們正在開發 WebAuth 中的密碼，並作為 FIDO 聯盟的一部分進行開發。這將允許註冊的憑證在 Android 裝置之間同步，因此不必總是輸入密碼。若要跨裝置登錄，可以透過掃描二維碼將手機用作安全金鑰。

四、Web app 能力

1. Media Session API

#我們希望Web 有類似APP 的功能，以便可以創造豐富的跨平台體驗。例如，桌面和行動裝置上的大多數作業系統都具有某種媒體集成，它們會告訴我們正在播放的內容，並提供暫停、跳過和搜尋的控制。

在某些情況下，這些控制項會出現在不同的裝置上。從手機播放的歌曲，可以在手錶上顯示媒體控制。 Media Session API 可讓我們透過 Web 完成所有這些操作，顯示 Windows、Mac OS、Android 和 iOS 上的媒體控制項並對其做出反應，包括智慧手錶等相關裝置。

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

2. Window Controls Overlay

Window Controls Overlay 是一個作業系統的整合功能，這個功能要新得多。它目前是 Chromium 獨有的功能，但對於已安裝的 app 來說，它是一個不錯的漸進增強功能。

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

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

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

可以使用Web App Manifest 中的選項來啟動此功能，然後，我們將獲得CSS 環境變數和一個API，以告訴所有視窗控制項的位置，以便可以在它們周圍放置元素。

3. Navigation API

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

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

它現在正在 Chrome 中進行原始試驗，很快就會穩定下來。

4. PageTransition API

PageTransition API 是一個使用CSS 動畫等熟悉的概念來簡化在頁面和頁面狀態之間創建豐富動畫轉換的API。使用該 API 可以在狀態之間獲得平滑的自訂轉換。

5. Web App color scheme

Web App color scheme 是Web App Manifest 的補充，它可以讓我們為淺色和深色主題提供不同的顏色。

這類似於配色方案樣式，但它更適合網站的配色方案。它適用於 PWA 介面。這是一個看似很小的補充，但它對使用者體驗產生了很大的影響。該功能目前正在 Chromium 中進行原始試驗。

6. Eyedropper API

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

目前僅在桌面端的 Chromium 中支持，因為它是一個相當具體的桌面互動。透過快速的 API 呼叫就可以在使用者互動後啟動吸管，然後使用者可以點擊某處並將擷取顏色傳送回 Web 應用程式。它甚至可以在瀏覽器之外捕捉顏色，使其成為完全類似於應用程式的體驗。

7. Virtual Keyboard API

#平板電腦或手機等裝置通常具有用於輸入文字的虛擬鍵盤。與實體鍵盤不同，虛擬鍵盤會根據使用者的操作和需求出現和消失。

使用Virtual Keyboard API，使用者可以透過JavaScript 以程式設計方式存取虛擬鍵盤，將有關鍵盤的資訊傳遞到CSS及其環境變數中，並為其設定樣式，並提供確定是否應顯示虛擬鍵盤的策略。

五、原生功能

#1.結構化複製

可以使用structuredClone 輕鬆實作JavaScript 值的深拷貝。它目前適用於所有主流瀏覽器。

它不僅更乾淨，還可以複製更多的東西，例如 blob、圖像點陣圖、類型化陣列。它甚至可以克隆具有循環引用的物件結構。

const clone = structuredClone(obj)

这不是 JavaScript 中的功能，它来自 HTML 规范。但它也在 Node.js 和 Deno 中实现。

2. createimageBitmap

下面来介绍如何将图像 blob 转换为可以在 Canvas 中显示的内容。使用以下方式就很容易导致内存泄漏：

但是现在所有浏览器都支持 createimageBitmap API：

使用它，上面的代码就变成了这样：

不仅如此，我们还可以更好地控制图像的加载方式。它对于为 2D canvas 和 WebGL 加载纹理非常有用。

3. JavaScript 功能

（1）顶层等待

现在可以像这样在 JavaScript 模块的顶层使用 await：

（2）私有属性和方法

类现在可以拥有私有属性和私有方法：

只要以#开头的属性和方法，就只有类内部的代码可以访问它。

（3）array.at

array.at 方法可以通过索引从数组中获取一个元素，如果传入的值为负数，就会从元素后边开始查找：

该方法也适用于字符串和类型化数组。所有这些现在都是跨浏览器的。

4. SharedArrayBuffer

SharedArrayBuffer 也是跨浏览器的。它 允许在页面和 workers 之间共享内存，内存共享对于使用 WebAssembly 的多个线程来说非常重要，因为它允许从 C++ 和 Rust 等移植代码，而性能损失最小。!

该功能在2018年出现了一些非常糟糕的 CPU 错误，浏览器出于安全原因不得不取消此功能。从那时起，浏览器一直在合作开发一种称为跨域隔离的功能，这大大减少了这些 CPU 错误的影响。所以现在，该功能已在所有引擎和平台上安全恢复。

5. URLPattern

URLPattern 允许我们根据模式验证 URL，并提取部分。该功能去年年底在 Chromium 浏览器中发布。它还没有出现在其他浏览器中，但是有一个 polyfill，让我们现在可以跨浏览器使用它。

6. WebCodecs API

WebCodecs API 实际上是一整套 API，可以对图像和视频解码和图像编码进行低级控制，从将帧从动画 GIF 中拉出，到对 WebGL 生成的场景进行编码，再到 H.264 视频，所有这些浏览器内。

多年来，浏览器已经内置了图像和视频编解码器，但这个 API 让我们可以对它们进行低级控制。这是 Chromium 领先的功能，期待未来有更多的跨引擎支持。

7. CSS 功能

（1）级联层

有时我们添加的选择器只是为了打败另一条规则的特异性，级联层就解决了这个问题。

我们可以将导入的样式放入图层中：

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

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

（2）:has()

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

例如，使用

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

（3）容器查詢

我們可以使用媒體查詢建立響應式設計，根據瀏覽器視窗的寬度變更要套用哪些樣式。但更寬的瀏覽器視窗並不總是意味著更寬的元件。使用媒體查詢來滿足這一點就很困難。容器查詢可以根據任何父容器的寬度、高度、樣式或狀態應用樣式來解決這個問題，從而創建真正基於元件的響應式介面。

使用容器查詢，每個元件都擁有自己的回應訊息，並且無論它位於 UI 中的哪個位置，都會做出相應的回應。

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

六、總結

一年來，Web 走過了漫長的道路。我們一直在與瀏覽器供應商會面並合作，以透過一項名為 Interop 2022 的計畫確保開發者的 Web 開發體驗更加出色。我們的目標是推出一些最需要的開發人員功能，並解決了一些最令人惱火的相容性錯誤。

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

最終，我們希望開發者能夠在 Web 上建立出色的體驗，互通性或瀏覽器支援不應成為障礙。有很多創新即將到來！

演講：https://io.google/2022/program/3c60e411-5340-4c54-a037-3aceb2825b16/

原文網址：https:https: //juejin.cn/post/7100815944833826824

作者：CUGGZ