大家好，我是Echa。

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

一、Web 平臺(tái)的最新動(dòng)態(tài)

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

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

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

五、Web 動(dòng)畫(huà)開(kāi)發(fā)的最新動(dòng)態(tài)

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

七、移動(dòng)端 Web 開(kāi)發(fā)的新功能

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

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

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

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

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

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

Dialog 元素

Dialog 是一個(gè)新的 HTML 元素，可以用來(lái)創(chuàng)建一個(gè)對(duì)話提示框。

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

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

甚至可以讓一個(gè)對(duì)話框元素打開(kāi)另一個(gè)對(duì)話框元素，瀏覽器會(huì)自動(dòng)處理應(yīng)該顯示在前面的元素。所以，我們不需要編寫(xiě)冗長(zhǎng)的代碼來(lái)管理它。

CSS 變換

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

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

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

在以前，我們必須手動(dòng)計(jì)算所有三個(gè)屬性在不同關(guān)鍵幀點(diǎn)上的值，才能編寫(xiě)如下所示的代碼。

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

新的 CSS 視口單位

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

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

不僅僅是這兩個(gè)單位，還有 Dynamic viewport 等其他選項(xiàng)。

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

深拷貝

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

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

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

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

focus-visible 偽類

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

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

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

Transform Stream

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

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

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

Import Maps

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

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

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

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