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