Google I/O 2023 — Web 平台的最新动态

大家好，我是 ConardLi。

今天开始来为大家解读今年的 Google I/O ，我会重点为大家解读前端开发者应该关注的信息，应该包括以下这些方向：

• 一、Web 平台的最新动态 *
• 二、提升 Web 核心性能指标优化建议
• 三、准备好迎接三方 Cookie 的终结
• 四、Web UI 开发的最新动态
• 五、Web  动画开发的最新动态
• 六、合作打造稳定的 Web 体验
• qi、移动端 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 对象现在更加简单了。在以前，如果我们想创建一个没有引用原始对象的对象副本，一般我们会选择使用 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 语句引入它们。

详细可以看我这篇文章：Import Mpas 目前已获得跨浏览器支持！

以上是一些最近所有主要浏览器引擎都可用的新功能的简要介绍。这只是冰山一角，还有许多其他的新特性和更新。但我们建议以最新的、支持的浏览器为基础，并根据大家的情况确定是否可以在生产代码中实际使用新功能。

最后

参考：https://youtu.be/x9rh0Du4Czg

如果你想加入高质量前端交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。

点赞和在看是最大的支持⬇️❤️⬇️