大家好，我是Echa。

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

一、Web 平臺的最新動態(tài)

二、提升 Web 核心性能指標(biāo)優(yōu)化建議

三、準(zhǔn)備好迎接三方 Cookie 的終結(jié)

四、Web UI 開發(fā)的最新動態(tài)

五、Web 動畫開發(fā)的最新動態(tài)

六、合作打造穩(wěn)定的 Web 體驗

七、移動端 Web 開發(fā)的新功能

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

根據(jù)大家在 Web 開發(fā)中的關(guān)注點或?qū)I(yè)領(lǐng)域，可能已經(jīng)知道了這些特性，但是也可能錯過了這些公告，這都沒關(guān)系。Web 一直在發(fā)展，瀏覽器也在不斷更新它們的引擎，來向開發(fā)者提供創(chuàng)新平臺的工具。曾經(jīng)需要三方庫的東西現(xiàn)在可能已經(jīng)得到了所有瀏覽器的本地支持，或者可能有更簡單的編碼設(shè)計元素的方法。這就是 Web 的偉大之處，它始終作為一個平臺不斷發(fā)展和調(diào)整我們使用 Web 的方式。

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

真正的答案是取決于你的用戶群體、技術(shù)棧、團(tuán)隊結(jié)構(gòu)和支持的設(shè)備。但我們都認(rèn)為，Web 的當(dāng)前局面非常令人困惑，做出這些判斷會比較困難。

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

Web 平臺一直在發(fā)展，但我們認(rèn)為支持兩個最新版本的瀏覽器是一個很好的基礎(chǔ)標(biāo)準(zhǔn)，這樣大家就可以考慮是否可以在生產(chǎn)環(huán)境中使用新的 Web 特性。

Dialog 元素

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

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

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

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

CSS 變換

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

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

當(dāng)我們編寫復(fù)雜的關(guān)鍵幀動畫時，這是非常方便的。比如現(xiàn)在我們準(zhǔn)備從零到百分之百平移元素，并在不同的關(guān)鍵幀點上旋轉(zhuǎn)元素，在中間位置縮放元素。

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

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

新的 CSS 視口單位

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

像 Small Viewport 和 Large viewport 高度這樣的新視口單位給 Web 開發(fā)者提供了最終的控制權(quán)，以便在設(shè)計移動網(wǎng)站時更好地適應(yīng)視口大小。

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

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

深拷貝

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

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

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

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

focus-visible 偽類

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

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

在焦點可見時（例如用戶使用鍵盤導(dǎo)航的頁面），你可以應(yīng)用恰當(dāng)?shù)脑O(shè)計，比如如把輪廓聚焦在元素上；但如果焦點不可見（例如用戶使用鼠標(biāo)導(dǎo)航），則可以根據(jù)整體設(shè)計需求去除輪廓。

Transform Stream

Transform Stream 現(xiàn)在對所有主要瀏覽器都可以使用了。這個能力讓流管道化的管理更加方便，例如你可以從一個地方流式傳輸數(shù)據(jù)，然后對數(shù)據(jù)進(jìn)行復(fù)雜的處理，最后將其流式傳輸?shù)搅硪粋€位置。

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

你可以向 URL1 發(fā)出請求以獲取數(shù)據(jù)，將響應(yīng)從 fetch 請求轉(zhuǎn)化為完成流，然后壓縮，并將其傳輸?shù)轿覀儎?chuàng)建的 Transform Stream 中。因為可讀和可寫端都是身份流，所以任何傳遞到可寫端的東西都會被發(fā)送到可讀端。

Import Maps

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

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

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

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