Google 2023开发者大会简单回顾 - Web 平台新动向

1,105 阅读2分钟

欢迎关注我的公众号:前端侦探

简单回顾一下 Google 2023 开发者大会(上海)关于 Web 平台的部分。

image.png

web的优势

首先介绍了 Web 的一些优势,以超链接为基石,把所有生态都连接起来,是最开放的平台

image.png

接下来开始介绍各种新特性

WebAssembly

WebAssembly 是一种新的编码方式 ,可以直接运行 C/C++等语言,更接近硬件原生性能。

web.dev/webassembly…

image.png

将浏览器端性能提升 50%

image.png

支持以下各种托管内存语言

image.png

WebGPU

WebGPUWebGL的后继者,使 web 开发人员能够使用底层系统的 GPU(图形处理器)进行高性能计算并绘制可在浏览器中渲染的复杂图形。

基于扩散的模型,相比WebGL,性能提升3倍以上。

developer.mozilla.org/zh-CN/docs/…

image.png

cocos 渲染引擎支持了以 WebGPU模型进行渲染

image.png

INP

新的性能指标:Interaction to Next Paint (INP),优化下一次绘制的交互

web.dev/inp/

image.png

和 FID(First Input Delay)的最大区别是,FID 只统计首次渲染输入延迟,而 INP统计的是整个页面周期

image.png

提升 INP 的一些方式和带来的效益

image.png

WebView

将 WebView 无缝嵌入原生 Android 应用中,以一种安全且便于操作的方式查看 Web 内容

image.png

拖放

image.png

部分式 custom tabs

image.png

Authentication

浏览器端身份验证

image.png

通过 Passkeys可以很轻松的将用户指纹、面部信息等密码链接到自己的账户上, 从而不需要手动去输入账号密码

developers.google.com/identity/pa…

image.png

Privacy Sandbox

保护隐私,抛弃第三方 cookie

privacysandbox.com/intl/zh_cn/

image.png

Web UI 的黄金时代

接下来是关于 CSS 的新特性,大家可能有些见过有些没见过

image.png

介绍了 18 个和 UI 相关的新特性

image.png

节奏比较快,这里随便拍了几张

第一个就是弹出式窗口,也就是 popover,在之前,我还专门写了一篇文章做了详细介绍

原生 popover 终于来了!

image.png

还有 View Transition API,也是我之前介绍过的

太丝滑了!了解一下原生的视图转换动画 View Transitions API

image.png

CSS 嵌套

image.png

全新的,可自定义样式的 selectmenu

image.png

层联级

image.png

:has() 选择器

image.png

容器查询

image.png

锚点定位

image.png

还有一些没有拍照...

Baseline

后面还提到了一些新的调试方式,还有新的 web 可靠性平台,应该是个官方的兼容列表

web.dev/baseline/

image.png

后续会在 MDN、web.dev 上推出

image.png

总结一下

以上就是关于 web 平台新动向的大致内容了,一句话总结: Web 是最开放的平台,一切皆有可能,人人都有机会。

有兴趣的可以去官方回顾完整视频

ioconnectchina.googlecnapps.cn

image.png

最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤

欢迎关注我的公众号:前端侦探