Chrome 2024 年开发者回顾:利用开发者工具中的 AI、内置 Gemini 和新的界面功能重新构想 Web

发布时间:2024 年 12 月 13 日

在互联网刚刚起步时上网意味着要耐心等待缓慢的拨号连接,并摆弄一些 Perl 和 HTML 代码。但在我们感觉像是一瞬间的时间里,Web 已经发生了指数级的变化。无论是临时订购杂货送货上门,还是使用 AI 总结大量长篇文章,链接现在都是通往无限可能性的门户。

这也是我们许多人喜爱网络的原因。为了帮助您吸引全球更多用户,我们一直在为所有 Web 开发者推出新工具,无论您是前端开发者还是全栈开发者,是新手还是专业人士。

欢迎查看我们的 2024 年创新功能汇总,了解如何以更少的精力打造更具想象力的 Web 体验。

Chrome 中的内置 AI 可帮助开发者通过 Gemini 提供强大的功能

在 2024 年 Google I/O 大会上,我们宣布了如何利用 AI 通过直接内置在 Chrome 中的 Gemini Nano 来强化 Web。截至目前,已有超过 13,000 位用户加入了抢先试用计划,帮助我们塑造 Web 的未来。我们非常感谢您的贡献,也迫不及待想看到您打造的各种创新 AI 体验。

为了帮助您充分利用 AI,我们已在源试用中推出了多项内置 API,例如实验性的 Prompt APITranslator APISummarizer APILanguage Detector API。所有这些功能都可让您在浏览器中运行 AI 赋能的任务,而无需进行服务器调用,并且无需管理和部署自己的 AI 模型。超过 8,600 名开发者报名参加了 Google Chrome 内置 AI 挑战赛,以使用这些 API 构建 Web 应用或 Chrome 扩展程序。我们将在 1 月中旬公布获奖者名单,敬请期待。

PolicyBazaar 使用 Language Detector API 来检测客户在对话期间切换的语言。

WebAssembly (Wasm) 和 WebGPU 增强功能可提升设备端 AI 的性能

我们认为,Web 是构建 AI 赋能型应用的理想运行时,可让您的应用触达每位用户。为了补充我们在内置 AI API 方面所做的工作,我们还改进了两项技术,让您能够将自己的 AI 模型引入 Web 并快速运行:WebGPU 和 Wasm。

我们在 WebGPU 中引入了 16 位浮点值打包的整数点积,从而通过计算着色器更灵活地使用设备的 GPU。我们计划在未来对 WebGPU 进行改进,包括添加子群组和子群组矩阵。借助这些功能,应用可以在 GPU 线程之间快速通信,并充分利用固定大小的矩阵乘法。我们还将在 2025 年向 Wasm 引入 Memory64,以便在内存中处理更大的 AI 模型。

来自 Transformers.js 的基准图表。
Transformers.js 中的 WebGPU 基准测试表明,WebGPU 比 Wasm 快 32.51 倍。

借助 View Transition API,网站可实现顺畅的导航,让用户感觉网站之间的联系比以往更紧密

借助跨文档视图过渡等新功能,您可以跨多个页面创建流畅的无缝导航体验。只需几行 CSS 代码,即可摆脱这些恼人的重新加载“闪烁”。由此带来的流畅、原生般的导航有助于您提供更具沉浸感的体验,同时保留多页架构的优势。

视图过渡效果可实现流畅的跨页面导航。查看视图过渡演示。

CSS 弹出式窗口和锚点定位功能可实现无需 JavaScript 的互动式叠加层

现在,您可以使用 popover 创建提示、菜单和其他叠加层,并使用 CSS Anchor Positioning API 将它们直观地连接到触发元素。您只需使用一些 CSS 和 HTML,即可确保叠加层保持锚定状态,即使在用户滚动或调整窗口大小时也能保持可见。您的用户可以获得更可靠、更动态的 Web 体验,而您无需再进行 z-index 管理和复杂的 JavaScript 定位计算。这是一种双赢方案!

Speculation Rules API 通过预渲染网页实现近乎即时的导航

今年,借助 Speculation Rules API,网页加载时间从快速变为近乎即时。此 API 只需几行 JSON 即可实现,可让网页在后台完全预渲染,以便在用户需要时随时可用。

web.dev 在不进行预渲染的情况下需要 1.6 秒才能加载,而在进行预渲染的情况下只需要 0.2 秒。

Interaction to Next Paint (INP) 成为核心 Web 指标

INP 已于 3 月取代 First Input Delay 成为 Core Web Vitals 指标,可帮助您更全面地衡量页面响应速度,而不仅仅是首次用户输入。自那时以来,移动设备上具有“良好”INP 的网站数量增加了 9%,这意味着整个网络的用户体验更快、更令人愉悦。

借助自动填充功能,让用户享受更顺畅的在线结账体验

启用自动填充功能后,浏览器可使用用户保存的信息自动填充表单字段,从而鼓励用户完成表单提交。Chrome 团队分析了数千个在线表单的匿名汇总数据,发现使用自动填充功能后,表单放弃率平均降低了 75%。虽然许多因素都有助于打造良好的结账体验,但数据表明,自动填充功能可以发挥有益的作用。

自动填充功能对于电子商务结账流程尤其有用。在 Shopify,与不使用自动填充的访客结账流程相比,使用自动填充的访客结账流程的结账转化率高 45%。

Chrome 开发者工具通过 AI 赋能的解决方案实现升级

您可能还记得,我们为 Chrome 开发者工具引入了 Gemini,并提供了控制台数据分析功能,让您能够使用 AI 助力的调试功能,更高效地排查问题。 自 2024 年 Google I/O 大会以来,此功能已在全球范围内推出。

我们还推出了 AI 辅助面板,该面板使用 Gemini 帮助您了解网页的技术细节,例如样式、网络请求、来源和性能。

控制台数据分析和 AI 辅助面板。
控制台数据分析和 AI 辅助工具面板是 2024 年开发者工具的众多改进之一。

您可能也注意到,今年“性能”面板也进行了多项改进,包括能够实时监控 Core Web Vitals添加注释。此外,我们还通过性能数据分析将 Lighthouse 的强大功能引入了“性能”面板。

借助这些 AI 增强功能、性能面板改进以及数十项实用更新(例如滚动徽章),Chrome DevTools 比以往更加实用。我们还将在 2025 年推出更多改进,例如通过新的 Gemini 2.0 模型提升性能。

Baseline 2024 为开发者带来了新的跨浏览器 Web 功能

从梯度插值到注册的自定义属性,Baseline 2024 目前已包含 39 项新的跨浏览器 Web 功能。如果某项功能已纳入 Baseline 至少 30 个月,您就不必担心互操作性问题。不过,如果您想确定使用新功能是否值得冒着可能会损失部分覆盖面的风险,不妨查看 Akamai 的 RUM Archive Insights,了解每个基准版本的各项功能和全球用户份额。

今年我们最喜欢的 Baseline 公告是 Web 平台状态信息中心,其中列出了所有 Web 功能及其跨浏览器支持级别。更令人兴奋的是,为 Web 平台状态信息中心提供支持的数据是开放且可供使用的,您可以将其集成到自己的工具中。基准横幅就是一个很好的例子。

主流浏览器通过 Interop 2024 使更多功能成为基准

为了帮助 Baseline 获得更多功能,我们再次与合作伙伴合作,推出了 Interop 2024。今年的目标功能包括弹出式窗口、CSS 嵌套、font-size-adjust 和相对颜色语法。

Interop 还概述了实验版和稳定版浏览器版本的得分。稳定版浏览器的总体 Interop 得分目前为 87,而 Chrome 稳定版在接近年底时得分为 98。您可以访问 Interop 信息中心,了解浏览器在互操作性方面的进展。 我们已在规划 Interop 2025,并将在 2 月份公布相关信息。

在新的一年里,共同塑造网络发展

尽管我们在 2024 年取得了令人兴奋的进展,但我们知道未来会更加光明。而这一切都归功于我们开发者社区的共同热情、反馈和创新。在世界各地的活动中,从 BrazilJS ConferenceDevFest ParisGoogle I/O 2024首届 Web AI Summit,我们一次又一次地清楚认识到:你们和我们一样,都坚信 Web 的强大力量和巨大潜力。

您比以往任何时候都更有创意。我们致力于帮助您将它们变为现实。因此,请在 XYouTubeLinkedIn 上关注我们,及时了解最新动态,让我们一起重新构想 Web 的强大功能