大家好，我是Echa。

2023年5月10號，谷歌官方在美國加利福尼亞州山景城，舉行 2023 年度 Google I/O 大會。小編利用周末時間開始來為大家解讀今年的 Google I/O ，小編會重點為大家解讀前端開發者應該關注的信息，應該包括以下這些方向：

一、Web 平臺的最新動態

二、提升 Web 核心性能指標優化建議

三、準備好迎接三方 Cookie 的終結

四、Web UI 開發的最新動態

五、Web 動畫開發的最新動態

六、合作打造穩定的 Web 體驗

七、移動端 Web 開發的新功能

作為一名前的開發工程師，請問大家是否知道可以利用 HTML 元素來構建網站模型呢？是否知道你有更簡單的方式來控制 CSS 變換呢，或者是否知道現在有新的視口單位可以適應移動用戶界面？

根據大家在 Web 開發中的關注點或專業領域，可能已經知道了這些特性，但是也可能錯過了這些公告，這都沒關系。Web 一直在發展，瀏覽器也在不斷更新它們的引擎，來向開發者提供創新平臺的工具。曾經需要三方庫的東西現在可能已經得到了所有瀏覽器的本地支持，或者可能有更簡單的編碼設計元素的方法。這就是 Web 的偉大之處，它始終作為一個平臺不斷發展和調整我們使用 Web 的方式。

然而，在這個不斷發展的過程中，其中也可能遇到一些困惑，比如，怎么快速去梳理或者掌握這些更新呢。我們總是會有一些問題，比如什么時候所有瀏覽器引擎都支持這個新特性？我什么時候才能在生產代碼中實際使用這些功能？或者我們是不是應該長時間支持舊版瀏覽器？

真正的答案是取決于你的用戶群體、技術棧、團隊結構和支持的設備。但我們都認為，Web 的當前局面非常令人困惑，做出這些判斷會比較困難。

所以，Chrome 團隊一直在與其他瀏覽器引擎和 Web 社區合作，以便為開發者提供更好的體驗。下面會重點介紹一些在過去兩個版本中所有主要瀏覽器引擎都可以使用的功能。

Web 平臺一直在發展，但我們認為支持兩個最新版本的瀏覽器是一個很好的基礎標準，這樣大家就可以考慮是否可以在生產環境中使用新的 Web 特性。

Dialog 元素

Dialog 是一個新的 HTML 元素，可以用來創建一個對話提示框。

我們可以用非常簡單地方式定義一個模態框，如下所示，然后可以通過調用對話框元素的 showMotor 方法打開對話框。

可能大家會想，這也不是什么新功能，我在使用 JavaScript 框架的時候也有相關的 UI 組件。但使用像這樣的原生 HTML 元素的優點在于它具有瀏覽器的魔力，比如焦點管理、標簽跟蹤和保持堆疊上下文。

甚至可以讓一個對話框元素打開另一個對話框元素，瀏覽器會自動處理應該顯示在前面的元素。所以，我們不需要編寫冗長的代碼來管理它。

CSS 變換

另一個簡化我們代碼的功能是獨立的 CSS 變換屬性，它可以以一種很好的、高性能的方式來為我們的網站添加動畫效果。你可能熟悉像下面這樣寫 CSS 變換的方式。

現在，通過單獨的變換屬性，我們可以分別指定變換的屬性。

當我們編寫復雜的關鍵幀動畫時，這是非常方便的。比如現在我們準備從零到百分之百平移元素，并在不同的關鍵幀點上旋轉元素，在中間位置縮放元素。

在以前，我們必須手動計算所有三個屬性在不同關鍵幀點上的值，才能編寫如下所示的代碼。

但現在，我們無需計算中間點的值，只需為每個單獨的屬性編寫值就可以輕松編寫和管理代碼。

新的 CSS 視口單位

新添加的視口單位對于移動網站非常重要，因為移動視口的大小可能受動態工具欄的存在或缺失的影響。有時候你會看到 URL 搜索條和導航工具欄，但有時它們完全消失了。

像 Small Viewport 和 Large viewport 高度這樣的新視口單位給 Web 開發者提供了最終的控制權，以便在設計移動網站時更好地適應視口大小。

不僅僅是這兩個單位，還有 Dynamic viewport 等其他選項。

詳細可以看我之前寫的這篇文章：Chrome 108 發布新的 CSS 布局單位升級

深拷貝

關于深拷貝這塊，詳細可以看我之前寫的這篇文章：深入剖析JavaScript中深淺拷貝

深拷貝 JavaScript 對象現在更加簡單了。在以前，如果我們想創建一個沒有引用原始對象的對象副本，一般我們會選擇使用 JSON.stringify 和 JSON.parse。

先把原始的 JavaScript 對象轉換為字符串，然后通過 JSON 解析將其轉回到 JavaScript 對象。這是一個非常常見的技巧，以至于 V8 引擎都對它進行了積極的性能優化。

但現在，你不需要使用這個技巧，用 structuredClone 就可以了。只需將原始對象傳遞給 structuredClone 函數，就可以創建一個深度復制的對象副本。雖然這是一個非常小的點，但確實是非常有用的更新。

focus-visible 偽類

focus-visible 偽類對于無障礙方面的功能是非常有用的。我們都熟悉當你使用鍵盤或單擊輸入元素導航頁面時出現的焦點鏈接。

這是無障礙必備的功能，但有時它會妨礙不同用戶的設計決策。focus-visible 是一個 CSS 偽類，它可以用于檢查瀏覽器是否啟發性地認為焦點應該是可見的。

在焦點可見時（例如用戶使用鍵盤導航的頁面），你可以應用恰當的設計，比如如把輪廓聚焦在元素上；但如果焦點不可見（例如用戶使用鼠標導航），則可以根據整體設計需求去除輪廓。

Transform Stream

Transform Stream 現在對所有主要瀏覽器都可以使用了。這個能力讓流管道化的管理更加方便，例如你可以從一個地方流式傳輸數據，然后對數據進行復雜的處理，最后將其流式傳輸到另一個位置。

當你創建一個新的 Transform Stream時，如果沒有參數，它會創建一個身份流，這是一個可讀、可寫的流對，可以接收任何傳遞到可寫端的東西并將其發送到可讀端。

你可以向 URL1 發出請求以獲取數據，將響應從 fetch 請求轉化為完成流，然后壓縮，并將其傳輸到我們創建的 Transform Stream 中。因為可讀和可寫端都是身份流，所以任何傳遞到可寫端的東西都會被發送到可讀端。

Import Maps

Import Maps 是一種可以在 Web 應用程序中包含和重復使用 JavaScript 模塊的新方法。

現在，你可以在應用程序中定義一個 Import Map，它允許你指定模塊名稱并將它映射到 URL 上。當你在代碼中使用 import 語句時，瀏覽器會自動查找 Import Map，并從 URL 中加載相應的模塊。

因此，如果你需要重復使用某些 JavaScript 模塊（例如，一些通用工具函數），則可以在 Import Map 中指定它的名稱和 URL，然后在代碼中使用 import 語句引入它們。

以上是一些最近所有主要瀏覽器引擎都可用的新功能的簡要介紹。這只是冰山一角，還有許多其他的新特性和更新。但我們建議以最新的、支持的瀏覽器為基礎，并根據大家的情況確定是否可以在生產代碼中實際使用新功能。