从 React 到 HTML 优先：Microsoft Edge 推出 “WebUI 2.0”

React WebUI| 2024-06-08

作者 | Richard MacManus

译者 | Sambodhi

策划 | Tina

导读：随着新的浏览器技术崭露头角，微软 Edge 浏览器的最新升级正向我们展示了一个全新的网页开发方向。这不仅是一次技术层面的升级，更可能是一场网页开发领域的革命性变革。本文深入探讨了 Edge 团队如何摒弃传统的 JavaScript 框架，转向更加轻量、快速的 HTML 优先方案。这一转变不仅技术意义深远，更可能引领未来网页开发的新潮流。若你对网页开发的未来充满好奇，渴望了解这一变革的详细信息和潜在影响，请继续阅读本文。

二十年前，基于浏览器的应用程序——也就是 Web 应用——在功能方面取得了长足的进步。2004 年 4 月，谷歌推出了首批能够像本地应用程序一样运行的 Web 应用之一，即 Gmail。其背后的技术是一种后来被称为“Ajax”（异步 JavaScript 和 XML）的 JavaScript 技术，这项技术使得 Web 应用程序能够异步地与服务器进行数据交换，从而无需用户手动刷新页面。

2004 年的互联网因此变得更加互动。Gmail 利用 Ajax 技术实现了邮件的即时加载和实时搜索，其他 Web 应用如 Flickr、Bloglines 和 Basecamp 也迅速跟进。随后，Facebook 也采用了 Ajax 技术，实现了评论和点赞的异步提交和接收，这些操作可以即时在页面上更新，无需刷新整个页面。这一技术的应用如同魔法一般，推动了“ Web 即平台”（即 Web 2.0）在接下来的十年里蓬勃发展。

深入探讨 JavaScript 的双刃剑效应

然而，随后的发展却颇为有趣。自 2014 年起至今，开发者们对 JavaScript 的青睐与日俱增——好东西自然是多多益善，对吧？因此， Web 应用变得越来越复杂，尤其是在 React（2013 年推出）和相关框架如 Next.js（2016 年）问世之后。尽管这确实有助于 Web 应用的扩展，并在用户界面上实现了更多令人惊艳的功能，但同时也增加了用户设备需要处理的 JavaScript 代码量，并加重了开发者的维护负担。

JavaScript 生态系统变得过于庞大，以至于 Web 社区中的一些知名人士开始呼吁回归 Web 平台的基础。过去几年里，我一直在报道这种趋势，但直到现在，我还没有看到哪款大规模 Web 应用真正代表了“回归基础”的潮流。

或许现在我找到了这个答案，那就是微软最新升级的 Web 浏览器——基于 Chromium 的 Edge。这周它引起了我的注意，原因有二。首先，它减少了对 React 的依赖；其次，它增加了对 Web 组件的使用，这是一种以 HTML 为主的 Web 开发方法。

“……从 React 转向现代 Web 组件和 HTML 优先的架构，为用户带来了极大的便利和优势。”

——Alex Russell，Edge 产品经理合伙人

Edge 是如何减少 React 代码的？

微软的博客文章介绍了新版 Edge（122 版），但并未直接提及 React。相反，文章着重强调了用户体验的改进——更快的浏览速度。公司表示：

“从 Edge 122 开始，浏览器的基础用户界面现在响应更为迅速。对于 Edge 用户，UI 的速度提升了 42%，而对于那些没有 SSD 或内存少于 8GB 的设备用户，速度则提升了高达 76%！”

但微软的 Alex Russell，Edge 的合作产品经理（同时他也是 Web 组件的创始人之一），在 Mastodon 上透露了开发细节：

“我们现在使用 Web 技术来构建浏览器的许多部分（例如书签、历史记录、下载、设置、新标签页等），从 React 转向现代的 Web 组件 + 以 HTML 为主的架构，这对用户，特别是使用低端硬件的用户来说，具有巨大的好处。”

实际上，这意味着 Edge 中使用 JavaScript 代码渲染的用户界面减少了。更少的 JavaScript 意味着更小的资源占用，从而为用户提供了更快的 Web 浏览体验。微软还制作了一个简短的视频来展示这种速度差异。

视频：https://youtu.be/avJmgfGpoJA

“WebUI 2.0”是 Edge 浏览器全新推出的 UI 机制，在演示中其速度表现尤为突出。

需要注意的是，目前只有 Edge UI 的部分组件进行了这项改进。在回答一位 Mastodon 用户的提问时，Russell 确认这是“一项持续进行的工作”，Edge 团队正在“逐个界面地转换，目前已完成约 15%”。

你可能会好奇为什么浏览器最初会选择使用 React。实际上，许多浏览器的 UI 本身就是以网页形式存在的。而且，在过去十年里，主流浏览器似乎都走上了使用 React 的道路，和其他开发者一样。所以，像是“浏览器基础”界面（视频中展示的）或者你的浏览器收藏夹——这些实际上都是以网页形式渲染的。微软表示，其他 Edge 功能，如“历史记录、下载、钱包等”，也将在未来几个月内逐步转换为“WebUI 2.0”。

WebUI 2.0 的起源

在微软 Edge 团队的博客文章中，他们承认现代 JavaScript 框架在某些方面确实有其优势，特别是在提升开发人员的工作效率方面。然而，经过深入研究，他们发现这种开发体验是以牺牲用户浏览器速度为代价的。这不禁让人联想到近年的 Web 开发趋势：

“我们的大量代码使用了依赖 JavaScript 来渲染 UI 的框架。这种客户端渲染的方式在过去十年中备受 Web 开发者的青睐，因为它不仅提高了开发人员的工作效率，还实现了更为动态的 UI 体验。

于是，Edge 团队提出了疑问：‘如果我们去掉这些框架，仅使用 Web 平台来构建 UI，浏览器的速度能提升多少呢？’”

“我们期待更多网站能够向以标记语言为主、拥有小型代码包和更少 UI 渲染 JavaScript 代码的方向发展。”

——微软 Edge 团队

这一思考催生了 WebUI 2.0，这是一种全新的以标记语言为主的架构，它最大限度地减少了代码包的大小和在 UI 初始化过程中运行的 JavaScript 代码量。

这种新架构更加模块化，它依赖于“一个为现代 Web 引擎优化的 Web 组件库”。

团队进一步补充说：“我们期待更多网站能够朝着这种以标记语言为主、拥有小型代码包和更少 UI 渲染 JavaScript 代码的方向发展。”

2024 年的“Gmail 时刻”？

我承认，将 Edge 的最新版本与 2004 年的 Gmail 相提并论可能稍显夸张。但考虑到 Edge 拥有庞大的潜在用户群——所有 Windows PC 都推荐使用 Edge（尽管根据过往的法律判决，它不能成为默认浏览器），这一变化可能具有深远的影响。

如果 Edge 采用的新 HTML 优先方法能够激励其他公司和初创企业跟进类似的项目，那么我们可能会见证一个全新的 Web 开发运动拉开序幕。对于许多 Web 开发人员社区的成员来说，这种以标记语言为主、JavaScript 为辅的转变无疑将受到热烈欢迎。

作者简介

Richard MacManus，《The New Stack》的高级编辑，他撰写的文章涵盖了 Web 和应用开发的最新趋势。早在 2003 年，他便创立了 ReadWriteWeb，并将其发展成为全球颇具影响力的科技新闻网站之一。从博客、社交媒体和 Ajax 等颠覆性互联网工具的早期兴起，到当下的人工智能、元宇宙、JavaScript 框架等技术热潮，多年来，MacManus 一直被公认为技术领域的领军人物，尤其擅长洞察并解读即将到来的技术趋势及其背后的深远意义。

本文文字及图片出自 InfoQ