从 Edge 浏览器聊聊 Web 的过去和未来

业界 作者:微软科技 2022-07-15 01:13:27

(本文阅读时间:24分钟)

文章来源:InfoQ
作者:Tina 策划:蔡芳芳

对资深 Web 开发者来说,<!--[if IE 6]> 这行代码并不陌生。Internet Explorer 曾是 Web 2.0的源泉,是 Internet 创新驱动力,历经了兴起和衰落,而后成为了 Web 开发者的痛点。2022年6月15日,微软 IE 正式退役,在过去的27年里,IE 所经历的整个的生命周期其实也是互联网从萌芽到繁盛的历史。

接替 IE 的是2015年诞生的 Microsoft Edge,这是一款带有复兴使命的浏览器产品。微软将精力放在了将 Edge 打造为现代网络浏览器上。

在告别 IE 的特殊时期,InfoQ 有幸和 Edge 团队聚在一起聊了聊浏览器的发展历史,Edge 开发过程和产品理念,以及 Web 开发的过去以及未来。

受访嘉宾:

邢璟夏:微软(亚洲)互联网工程院浏览器与移动端应用部总经理,全球合伙人。

陈志宁:微软(亚洲)互联网工程院浏览器首席技术研发经理。


1


从 IE 到 Edge:

尊重 Web 的过去,

向往 Web 的未来

构建现代浏览器是一件相当复杂的工作。

浏览器本质上是一个操作系统,底层包含渲染引擎和执行引擎两大部分。在将要进入 Web3.0的时代,网站上的元素以及互动已经非常多、非常丰富,为了支持这么丰富的展现形式,同样还要兼顾效率,渲染引擎已经变得非常复杂。除了渲染引擎之外,还要去搭建整个浏览器的生态和众多功能。

无论是 Edge 还是其他浏览器,很多功能还都有跨屏幕跨设备同步的能力。我们每天在浏览器里做着各种操作,比如在电脑端将网页放到收藏夹里,在手机端也能看到同样的网页。这些操作看似点点手指头这么简单,背后其实能分解出很多工作,要用很多前端的能力去跟用户做交互,那么这就导致前端执行引擎逻辑同样不会简单。因此作为一个网络上供上亿人使用的交互应用,开发一个浏览器所涉及的代码量已达数千万行,跟桌面操作系统同属计算机领域最为复杂的工程之一。

经过了二三十年的发展,这个行业仍然处于竞争激烈创新不断的时期,我们常见的包括微软的 IE/Edge、苹果的 Safari、谷歌的 Chrome 等。其中 IE 曾是全球市场份额第一的浏览器,并在2003年迎来历史巅峰时刻,全球份额高达95%,远超现在领先的 Chrome、Safari 等浏览器的份额。

IE 引入了如 ActiveX 控件独有框架,在 IE 处于主导地位的时代,大量网站和其他传统应用程序选择只与 IE 浏览器完全兼容,其结果就是其中很多缺少更新的网站至今只支持 IE 浏览,如果换一个浏览器访问的话,网站的主要功能会无法运行。

曾经成为 Web 开发者的痛点,不兼容 macOS 系统,经历过被竞争,微软勇于从过程中学习,2022年6月15日,IE 正式退役,微软 Edge 浏览器为它的替代者

新一代的浏览器放弃了 IE 专有功能,但其双引擎形式能支持 IE 模式,且能兼容其它平台,拥抱全平台,将可用性扩展到了 macOS、Linux、Android 和 iOS 系统

作为微软最新的浏览器平台,Edge 有两大发展阶段。首先是于2015年发布的第一版本,当时使用的是微软自己的引擎 EdgeHTML,旨在与 Safari、Chrome 和其他浏览器使用的 WebKit 引擎完全兼容。基于自研引擎,微软还迭代了数次,于2017年发布了安卓跟 iOS 的版本。

其次是在2018年,微软做出了迁移到 Chromium 的大胆决定,将 Edge 的底层渲染引擎和 JavaScript 执行引擎迁移到了 Blink 和 V8,这相当于将整个代码做了一次脱胎换骨的全新升级。2019年,微软发布了基于新的 Chromium 浏览器的预览版本,同时在同年5月20号推出了 Mac 版本。

2020年10月份微软再次发布了 Edge for Linux,从此覆盖了大部分的主流操作系统,全面拥抱全平台,这也是跟 IE 之前一个很大的不一样。



亲历者的独到见解

浏览器发展至今,拥抱标准、提升体验已经是一种公认的趋势。

微软浏览器的发展有过无人能及的巅峰但也曾受到过质疑,尤其是在过去几年谷歌 Chrome 浏览器接管成为市场主导者之后。但无论是目睹浏览器逐渐稳定的开发者,还是参与浏览器产品的设计者,作为历史的见证者,都一定会有自己的体会以及对技术的独到见解,了解这些背后的故事才能够明白技术为何这样演变。

专有框架是 Web 开发史上最大的噩梦?

多年来,HTML 前端经历过很多阶段,IE 经历了多次重新设计。IE 的第一个版本产生于 Web 1.0时期。前端主要是完成渲染,用户能够被动接收并阅读页面内容,是一种单向的体验。

到了 Web 2.0时代,用户开始有了更多交互诉求,实现在页面上登录、购买、点赞、投票...... 网页不再是静态实体。作为这样所有页面的载体,浏览器也要保持与时俱进。在这个时期,IE 引入了支持异步的 AJAX、后来必不可少的 CSS 功能,以及现在广受诟病的 ActiveX 控件支持。

对于 IE 的技术,邢璟夏认为:“如果我们站在这个时间点,从上帝视角往回看的话,你现在可能会觉得 ActiveX 技术已经过时了,但回到那个时间点的话,ActiveX 是微软提出的在当时能够切实有效的解决问题的一种手段。只不过到了今天,有更好的实现方式了,它就不那么 fashion 了。”

为什么 IE 不兼容 macOS?

在苹果系统占据半壁江山的时候,IE 不支持 macOS 确实有些令人费解。但如果了解 2000年左右的一些历史背景,我们就会知道微软浏览器在当时是支持 macOS 的。在1997 年到2003年,MacOS 10时期,IE 是苹果默认绑定的浏览器

据 Wired《Apple Rescued -- by Microsoft》一文记载,在这个时间段,微软向苹果投资了1.5亿美元,作为与苹果签订的五年协议的一部分,微软一直在为 Mac 维护 IE。有老用户评价说,“那时,Mac 上的 IE 是当时该系统上最好的浏览器。相比其它浏览器,IE 快速、稳定,看起来很原生......”

五年过去后,苹果开发了自己的浏览器,于 2003年推出基于 WebKit 的 Safari 浏览器。微软随之停止了对于 macOS 的支持,专注于 Windows,并建议用户迁移到苹果自带的 Safari。更重要的是,苹果于2005年将 WebKit 开源,当谷歌开始开发自己的浏览器时,它转向了 WebKit,Chrome 的故事就开始了......

“这也是当时的一个技术氛围,当时业界的状态是各大科技公司有各自的系统,各占一方鳌头,不是像今天这样的业界,着重于共创共生跨平台的协作。”陈志宁讲到,“如今,微软的 Edge 浏览器也能够覆盖各种平台,不只是 Windows、macOS 以及 Linux,还有移动端的 iOS 跟安卓,还有各种类型的用户装置,包括桌面、移动、电视、微软的 Xbox 游戏平台,还有最新、最智能的混合现实的 Hololens,都能够支持使用 Edge 浏览器。”

为什么会采用开源内核?

谷歌于2008年发布了 Chrome 浏览器,并开源了 Chromium 内核源代码,最开始基于 WebKit 和 JavaScript 执行引擎 V8。后来,Chrome 开始研发自己的渲染引擎,形成了 Blink+V8 的引擎架构。

Chromium 完全由开源社区进行维护,生态开放且繁荣。微软浏览器于2018年转向开源内核后,Edge 团队就逐渐成为了全球第二大 Chromium 开发团队。Edge 基于 Chromium 底层做了很多性能优化,还引入了很多人工智能、Machine Learning 的技术。

微软将 Chromium 作为 Edge 引擎收到了业界褒贬不一的评价,有些人认为此举减少了整个 Web 浏览器市场的多样性。

邢璟夏认为,利用开源回馈开源是一方面原因,最重要的是“我们希望用户访问一个网站的时候,不管用什么浏览器,他都能得到一个高度一致的体验。而开发者在做这个网站时,不需要在 Edge 上适配一次,在 Chrome 上适配一次,在 Safari 上再适配一次。适配多次对开发者非常不友好。”



构建现代浏览器:

兼顾性能、功能和安全

互联网已经发生了翻天覆地的变化,重新构建的 Edge 浏览器也放弃了 IE 上的一些过时技术,但最重要的是得到了性能上的明显提升,启用速度快,也不怎么占内存

Edge 团队在日常中不断地去对底层的渲染引擎和 JavaScript 执行引擎做深度技术优化,比如像 PGO 算法、渲染引擎的 hot code paths 功能,让渲染速度跟 IE 相比有比较大的提升,其中 CPU 使用率优化了33%,内存使用率优化了32%

构建浏览器非常重要的一个点是页面的使用反应,不管是在滚动还是按键,在页面上做交互的时候,渲染速度和用户体验都是非常重要的。以前很多重度用户习惯打开几十个 Tab 页面,在页面元素比较复杂的情况下,打开多个页面的行为会导致浏览器明显卡顿,反馈很慢, 为此 Edge 的团队做了很多的深度的技术优化,放到现在,这样的使用方式对用户来说几乎没有什么影响。Edge 团队不断“一步一步地”做了很多小而美的优化来提升页面渲染速度,还通过 Smart Sleep 人工智能节能功能,判断不常用的页面并将内存先回收,直到再次点击的时候重新快速渲染,保证在打开很多页面的时候,整个系统的内存占用率不会是一个线性的提升

此外,虽然 Edge 跟 Chrome 都基于开源的 Chromium,但微软在此之上还做了很多差异化的能力。比如从 Edge 诞生就具备的沉浸式的阅读模式,收藏集锦功能,垂直标签栏功能,以及智能翻译和 Read Aloud(大声朗读)无障碍功能等等

背靠微软的综合研发能力,Edge 还引入了一些其它 AI 功能。像智能填充功能,使用浏览器时我们会在很多地方反复地输入一些高度重合的信息,比如购物时可能在京东输入完地址信息后,在天猫可能还要输入,Edge 提供了一个智能填充的功能,用机器学习训练一个模型,在保证用户隐私的情况下抽取字节段,填写时自动判断自动填充。另外 Edge 还能在打字的时候提供智能纠错,通过人工智能判断上下文的语境,对用词不对的地方给予提醒。除此之外,在购物体验上也有专门的创新功能,可以跨网站或 App 端比对多家的商品价格,做信息匹配和推荐,保障购物体验的同时还能帮用户省钱。

对于 Edge 来说安全也是一个非常重要的领域。微软团队做了很多增强安全保护的功能,保障 Edge 浏览器成为最安全的浏览器。比如 Smart Screen 的功能,为用户提供过滤机制,用机器学习智能过滤钓鱼网站、潜在有危险的网站。在企业侧 Edge 跟 Microsoft 365 整体的产品也有很强的联动机制,还能够基于 Azure Active Directory(AAD)、Access 设定来保障企业的机密数据。在企业版中提供远程浏览器访问,在服务端去渲染,再将 Picture、Video 形式的数据传到客户端,彻底的保护客户端的安全。


2


Edge 背后的中国团队

这个影响上亿万人的产品的背后,有一支中国开发团队参与产品的全球的创新。他们肩负了重振微软浏览器的品牌重任,让 Edge 跟上行业竞争的步伐,不断赢取更多的用户。中国团队负责了 Edge 浏览器移动端、部分桌面端,以及企业端功能开发。Edge 在中国的整个产业链非常大,而且涵盖了浏览器的方方面面。

为赢取用户的喜爱,Edge 非常用心在关注浏览器的用户体验和包容性。浏览器必须是可互操作的并符合一套全面的标准,所以 Edge 在带领 Web 业界技术方向的同时,也会参与 W3C 和 EcmaScript JavaScript 标准的制定。

此外,微软在中国也设有用户体验团队,为不同用户群体提供个性化服务,并针对不同场景测试和验证用户对 Edge 的各种功能的接受度和喜爱度。



企业文化

中国团队面向全球开发,跟印度团队和美国团队也有紧密合作,同时还会整合 AI 团队和安全团队的力量,比如 AI 能力的应用和安全上的补丁升级。大家跨团队跨国家协作,让这些前沿技术落地到不同的合适的场景中

微软在很多年前开始就是一个跨国开发公司,堪称是全球化企业的范例。在协作中,他们遇到过的问题也是现在中国出海全球化企业遇到的问题,比如虽然开会有时差。这种情况下,微软的经验是首先团队之间一定会做足沟通,相互协调,“开会会找一个大家都能接受的黄金时间”。另一个是在有文化差异的背景下,鼓励成长型思维,各国团队之间强调“相互欣赏,相互学习”,保障彼此之间的良好沟通,践行 OneMicrosoft 的价值观,让大家在相互尊重的情形下进行协同开发

在成熟的企业文化下,Edge 团队虽然是一支全球化的分布式团队,在不同地方跨地区协作,但无论是国内还是国外,远程在家还是在公司,“跟在一个地方没有区别。”邢璟夏说,“大家并不会考虑多地区而去单独设计我们的产品研发流程。但是我们会为了考虑到当地有文化的差异,大家作息时间时差的差异,会定向的做一些协同和沟通机制,通过流程及工具让人和地点相互解耦。”



工程文化

据网络上的最新数据显示,Edge 受欢迎程度不断攀升,今年4月占有率突破了 10% 的大关(约1.56亿用户),首次超过苹果 Safari,成为世界第二大浏览器。

上世纪八九十年代,市场需求较为稳定,瀑布式开发流程是首选。瀑布模型相当于半年开发、半年测试:前半年就是疯狂地写代码,后半年疯狂地解 Bug,然后上线。在现在的发展趋势下,很难预见到一年之后用户需要什么,所以瀑布模式肯定是不可取的。研发团队需要加快整体的开发速度,现在很多移动互联网产品都会采用小步快跑、快速迭代的方式。但到底是采用小步快跑,还是一次性做到位?这很难有一个确切的标准。在有激烈行业竞争的情况下,Edge 的产品会采用什么开发速度?微软也一直在前进,在进化,在“快”跟“好”之间去找一个平衡点。

由于整个业务非常复杂,微软会把权力下放到各个团队,让大家去选择自己合适的开发的步调、开发的方式去做事情。在 Edge 团队中,新浏览器的发布周期选择了跟 Chromium 保持一致。Chromium 开发者社区是一个全球顶尖的开源社区,开发者们在不停地贡献自己的代码和力量。跟社区周期保持一致的好处是能第一时间更新,杜绝安全隐患,并及时将最新版本送到用户手上。

在定好时间周期的基础上,Edge 追求的是技术稳定性、技术健康度,和功能开发之间的平衡。上线一个算法,不会是要求时间优先,比如下个月就要看到,这种方式就算能上线了,也会导致优化指标达不到最初的效果。所以,在做项目管理和排期时,Edge 团队会先保证更好的工程体验,持续在基础的性能、内存优化、启动速度上投入,保证有非常大的数量的技术人力在做整体的稳定性、健康度优化的工作。

在互联网模式的冲击下,减少测试步骤、快速进行试错已成为部分企业的常见打法,这一切不断冲击着传统软件测试中赖以生存的“流程”“规范”等优势,但在微软,还是有非常严格的产品交付流程

由于 Edge 的用户体量已经过亿,交付到用户和开发者手上的必须是一个高质量产品。因为在用户体量非常大的情况下,小问题很容易被放大,假设比例是万分之一的话,10万人产品只影响10个用户,如果产品用户的体量不大,那么可以走快速发布、快速迭代路线。但微软 Edge 已经有了上亿用户,如果产品中存在一个 Bug,发布之后影响的可能起码是10万名用户。“在问题产生之前先把它找出来、解决掉,而不是事后再去防范。”

在一个完整的研发流程上,微软在测试上的投入非常大,会给开发留足够的时间去做自动化测试。相对手工测试用例,自动化测试是一种更高效的做法,相当节省时间的方式。并设有专门的测试团队去保障每一个 feature 的质量,负责测试产品的功能、性能、体验,保障给到用户的时候是最好的状态。因为微软所有的产品都是 for global 的,所以每个产品都是多语言的,这给测试带来的挑战也是非常大的,所以在 Edge 开发流程中,从产品经理到开发,到测试团队,都要对“测试”的事情负责。


3


Web 技术的发展:

幸福的繁荣

如果说 IE 曾是开发者的痛点,但 Web 开发社区显然表现出对 Microsoft Edge 的喜爱。

开发人员和 QA 测试人员都知道为 Web 构建的功能可以在一个浏览器中运行,并不意味着它可以在每个浏览器中运行。但 Web 的兼容性又是极其重要的,是开发一个好的 Web App 的必备关键,迁移到 Chromium 意味着 Edge 的框架功能更加一致。Microsoft Edge 中的内置开发者工具也具备了 Chrome 中提供的工具,包含 Extension、DevTools,以及 F12。另外,Edge 还提供了 WebView2 和 PWA(渐进式网络应用程序)平台。

WebView2 能够让开发者在他们的原生应用里嵌入 WebView,来渲染已有的 Web 内容和 Web 前端模块。WebView2 本身基于 Microsoft Edge 渲染引擎,是一个基于 Chromium 的 Hybrid App 开发平台,但又独立于 Edge 浏览器,不需要用户安装 Edge 浏览器来运行。Web 开发团队可以利用它做到一套 Web 代码,跨不同平台使用。

而 PWA 则能帮助前端开发工程师适配原生应用,用户能够将已有的 Web 应用直接安装成 native Apps,并支持离线访问、service worker。与 WebView2 相比,各有不同的适用场景,PWA 使用场景更为广泛。

微软的 Teams 会议应用,在 Windows 平台上面已经开始用 WebView2 来代替 Electron,主要原因是平台性能的支持和内存使用优化。WebView2 能让 native object 和 Web 结合来使用例如 Video 直播流等原生高性能 C++ 模块,适合 Teams 这种需要处理大量音频与视频内容的并对时延要求很高的场景。Outlook、Office、Visual Studio 等都已经逐渐使用 WebView2 场景来渲染它的 Web 模块。”陈志宁介绍。

现如今,在 Web 跟 native 交互的应用场景下,Web 跟 App 的边界越来越模糊,移动端、桌面端也慢慢有了整合的趋势。对于 Hybrid App 开发来说,WebView2 平台已经成为 Windows 操作系统上面,已经大量在使用渲染的模块。跨平台开发是一个非常显著的趋势,WebView2 和 PWA 是很好的支持跨平台快速创新和迭代的方式。Edge 浏览器作为一个底层技术支撑平台,在开发层面上抹平了各平台之间的差异



主流框架开始走向趋同,

未来能否 Web 打天下?

可以看出,Web 开发发展到现在,不仅仅是开发一个“网站”那么简单,涉及的技术框架层出不穷,无论是 WebView2、Electron、PWA 还是 React,常常让开发者在选择时陷入困境。

设计框架如此繁荣的背后,也跟 Web 的发展有很大关系。

最开始的时候,Web1.0 时期,主要是提供单向的阅读功能,对前端 JavaScript 语言本身不会有太高的要求。后来 AJAX 出现了,网站可以异步跟服务端去交互了,这也对 JavaScript 提出了更高的要求。然而 JavaScript 最初是只花了14天设计出来的语言,在设计的时候做了局部的优化,但是整体的优化考虑不够。于是语言本身也需要并且在不停的迭代,从 JavaScript 5 进化到 JavaScript 6,ES6 到 ES7,再到微软推的 TypeScript。

语言进化也给框架的性能提出了越来越高的要求。最早的时候做任何的页面可能就是几百个元素,可能一两屏,这时用 JQuery 就够了。到后来页面越来越复杂,有若干屏,还有各种跑马灯、反转等各种动画效果,同时有了更多需要跟用户交互的地方,开发者就会发现自己的代码越写越慢,新的框架就应运而生了。像 React 刚开始推出的时候,最具有吸引力的就是虚拟 DOM 树,用 diffing 的方式去修改 DOM,从而节省了非常多的渲染时间。这也就是说随着 Web 的发展,开发者不断地需要更得心应手的框架语言来让开发如虎添翼。

现在前端框架百花齐放、百家争鸣,因为大家都可以进来贡献,这也就是 Web 生态繁荣的原因。“所以我更愿意称这个为幸福的繁荣。”邢璟夏表示。

但另一方面,不同的设计框架之间也开始越来越趋同了。很多主流框架之间已经开始相互借鉴,相互学习。这也是一种必然趋势。

过去一二十年,Web 的发展像过山车一样,有着像陡、平缓、陡、平缓这样的轨迹曲线,中间不断的有新的场景爆发,倒推着框架去做升级。比如在 AJAX 出来之前很长一段时间,前端的发展都是比较平缓的。AJAX 技术出现后,大家发现 Web 有了很多新的玩法。为了配合新的场景,这些框架势必是要去做一个大的升级。但最近几年,用户场景本质上没有什么变化,更多的是在优化框架的编程效率、开发效率、运行效率。

因为没有新的用户场景,大家会发现不同框架之间的优化方法最后基本上都是类似的,目的都是在维护以及提供更好的用户体验。这种情况下,很多新性能会相互之间借鉴。但用户可见的性能还有很大的提升空间,所以在可见的未来,Web 开发还是会非常有生命力的。假设再加上 Web3.0 创造的可能性,未来五到十年的 Web 开发是非常值得看好的。“再过十年回头看,很有可能你的开发框架就换了,这一点都不让人觉得意外”。

“再以后,前端开发是不是可以一个 Web 打天下,其实这也是一个很有意思的话题。”

在 Web 开发中,主要使用的 JavaScript 语言,它的缺陷是作为一种类执行语言是有性能天花板的。现在,我们有了 WebAssembly,它解决的就是最根本的性能问题,并且目前 WebAssembly 也取得了一定的发展,打破了 JavaScript 语言的天花板。

另外 WebAssembly 也不局限于使用 JavaScript,开发者可以用 C++、Go、Rust 各种语言来编写代码,最后能转变成 WebAssembly 在端上运行即可。一旦 WebAssembly 能够普及起来的话,很多之前在浏览器里不能做的事情,会通过这种技术在浏览器里实现得更加的丝滑,从而创造出更多的可能的业务形态




写在最后

从1992年在北京开设第一间办公室起,微软作为一家全球化技术企业开始扎根中国,今年刚好是其落户中国的第三十个年头

在全程见证并参与了中国信息产业发展壮大的同时,微软在中国的团队规模也不断扩大,给中国带来了不少科技人才。当代年轻人面临职业选择时,微软作为一家老牌技术企业,有哪些值得称道的地方?

对于这个问题,邢璟夏是这么回复 InfoQ 的:“可以从两个方面来看。第一个方面可以看商业模式,微软的股价在过去8、9年里应该是翻了有10倍,这一点的话其实在科技公司里头,而且是已经有了这么多年生命的科技公司来说其实是非常非常少的。微软其实一直是在持续地创新、持续地改进,每一步可能让人觉得步调不是很大,但每一步走得都非常结实,而且时至今日,微软在创新上还是有非常强大的生命力的,这点的话不管是通过云或别的技术,其实是能够看得见的。

第二个方面,微软整个的文化非常强调新鲜东西的输入,微软里有很多同事非常的谦虚,他有可能在微软工作了非常多年,但他的求知欲一直很强,很愿意去学习。因为本质上还是因为微软的成长型思维文化,已经从下到上贯穿到公司当中,在言谈举止之间将成长型思维融入到我们的工作当中了。这种学习的方法、这种态度,对大家来说也都是能够受益匪浅的。”

延伸阅读

关注公众号:拾黑(shiheibook)了解更多

赞助链接:

关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

公众号 关注网络尖刀微信公众号
随时掌握互联网精彩
赞助链接