大家好，我是Echa。
2023年5月10号，谷歌官方在美國加利福尼亞州山景城，舉行 2023 年度 Google I/O 大會。小編利用周末時間開始來為大家解讀今年的 Google I/O ，小編會重點為大家解讀前端開發者應該關注的資訊，應該包括以下這些方向：
Google I/O
- 一、Web 平台的最新動态
- 二、提升 Web 核心性能名額優化建議
- 三、準備好迎接三方 Cookie 的終結
- 四、Web UI 開發的最新動态
- 五、Web 動畫開發的最新動态
- 六、合作打造穩定的 Web 體驗
- 七、移動端 Web 開發的新功能
作為一名前的開發工程師，請問大家是否知道可以利用 HTML 元素來建構網站模型呢？是否知道你有更簡單的方式來控制 CSS 變換呢，或者是否知道現在有新的視口機關可以适應移動使用者界面？
根據大家在 Web 開發中的關注點或專業領域，可能已經知道了這些特性，但是也可能錯過了這些公告，這都沒關系。Web 一直在發展，浏覽器也在不斷更新它們的引擎，來向開發者提供創新平台的工具。曾經需要三方庫的東西現在可能已經得到了所有浏覽器的本地支援，或者可能有更簡單的編碼設計元素的方法。這就是 Web 的偉大之處，它始終作為一個平台不斷發展和調整我們使用 Web 的方式。
然而，在這個不斷發展的過程中，其中也可能遇到一些困惑，比如，怎麼快速去梳理或者掌握這些更新呢。我們總是會有一些問題，比如什麼時候所有浏覽器引擎都支援這個新特性？我什麼時候才能在生産代碼中實際使用這些功能？或者我們是不是應該長時間支援舊版浏覽器？
真正的答案是取決于你的使用者群體、技術棧、團隊結構和支援的裝置。但我們都認為，Web 的目前局面非常令人困惑，做出這些判斷會比較困難。
是以，Chrome 團隊一直在與其他浏覽器引擎和 Web 社群合作，以便為開發者提供更好的體驗。下面會重點介紹一些在過去兩個版本中所有主要浏覽器引擎都可以使用的功能。
Chrome 團隊
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 語句引入它們。
以上是一些最近所有主要浏覽器引擎都可用的新功能的簡要介紹。這隻是冰山一角，還有許多其他的新特性和更新。但我們建議以最新的、支援的浏覽器為基礎，并根據大家的情況确定是否可以在生産代碼中實際使用新功能。
一起回顧谷歌最近釋出Web 相關新技術
谷歌 Chrome： Cookie 通路方式大調整
重磅！谷歌正式釋出 WebGPU
預測未來10大 Web 開發趨勢
最後
一台電腦,一個鍵盤,盡情揮灑智慧的人生;幾行數字,幾個字母,認真編寫生活的美好;
一 個靈感,一段程式,推動科技進步,促進社會發展。
創作不易，喜歡的老鐵們加個關注，點個贊，打個賞，後面會不定期更新幹貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。