CS架构
Web具有非常强大且友好的开发生态，在CS架构的窗口程序中嵌入浏览器，有哪些好处呢？
1，能够极大丰富程序的表现形式
2，能够充分地利用web的跨平台特性
3，能够使用web更现代更丰富的UI表现形式
4，网页可以更好的利用 系统功能。
那么非常关键的一点是，如何让嵌入浏览器的表现尽量地接近原生浏览器呢？
本文对谷歌原生浏览器、和在C#中 4 种方式嵌入浏览器，一共 5 种方式，进行兼容性、性能、和高级特性 三大方面的表现来进行比对。
主机参数
测试主机的参数如下：
处理器 Intel(R) Core(TM) i9-14900HX 2.20 GHz
机带 RAM 32.0 GB (31.7 GB 可用)
系统类型 64 位操作系统, 基于 x64 的处理器
笔和触控 没有可用于此显示器的笔或触控输入版本 Windows 11 家庭中文版
版本号 24H2
操作系统版本 26100.3775
体验 Windows 功能体验包 1000.26100.66.0
5 种方式
5 种方式使用浏览器，分别为：
1. 谷歌原生浏览器，版本：127.0.6533.73（正式版本）
2. WinUI3 + WebView2，框架：.NET 8.0
3. WPF + WebView2，框架：NET462
Nuget包：Microsoft.Web.WebView2 （版本：1.0.3240.44）
4. WPF + ChromiumWebBrowser，框架：NET462
Nuget包：CefSharp.Wpf（版本：135.0.220）
5. WPF + WebBrowser，框架：NET462
接下来，详细介绍不同的测试表现。
测试：兼容性 - 标准支持
HTML5标准支持测试（https://html5test.com/），打开网页后，会显示浏览器的评分，总分：555
5 个浏览器的表现：
毫无疑问：谷歌浏览器无疑是兼容性最好的
有点意外：WPF+ChromiumWebBrowser 评分竟然与谷歌相同，有点对Cef 刮目相看了
意料之中：WinUI3+WebView2和WPF+WebView2 表现一致，都略逊于谷歌原生浏览器；
波澜不惊：WPF+WebBrowser作为被淘汰的浏览器，一如既往地让人失望，这评分我都喜出望外
结论：从 “HTML5标准支持测试” 单项标准看，除了 WPF+WebBrowser这种古老的方式，其他基本都安全可用。
测试：兼容性- 百度新闻
百度新闻（https://www.baidu.com/）
作为最常见的综合性网页，前4种都能正确地打开、查看网页内容，但是在窗口加载时有些细微的差异：
毫无疑问：谷歌浏览器是反应最快的，网页打开的很直接，没有窗口变换效果，网页内容加载时快速闪现了一下白屏；
有点意外：WPF+WebView2弹出的网页，竟然带有透明渐变和跳跃蹦出的窗口变换效果，这很符合Windows系统内置的一些风格，略带“优雅感”
仍然意外：.NET 8.0框架下的WinUI3程序中内置的WebView2，与NET462框架下的WPF+WebView2表现很接近，但是竟然能感觉出来速度略慢一点，很疑惑.NET8.0没有充分发挥出来框架优势吗？NET462下的竟然表现略胜一筹，这有点意外。
更加意外：前面的 “HTML5标准支持测试”中，Cef在WPF+ChromiumWebBrowser表现相当棒，与谷歌原生浏览器持平，但是这里竟然表现有点“糟糕”，竟然会出现黑色闪屏，页面切换时非常明显的卡顿，甚至有掉帧的感觉，页面加载时的白屏也非常的明显，与前面3者相比，简直缓慢和卡顿。
不想提它：WPF+WebBrowser仍然弹框报错，每次出现的报错框熟悉的不能再熟悉了，再多出现几次，我都能手绘出来了，后面对它进行的所有测试都是相同的报错提示。
结论：Cef的WPF+ChromiumWebBrowser出现的闪黑屏，其实对功能的使用并没有什么影响，网页显示速度略微慢点也有限，都是可接受的范围。所以，如果软件业务是偏向于功能性的，那么前 4 者都可用；但是如果软件业务中需要流畅的UI效果，偏向于体验性，那么就要慎重选择Cef了。
附：下图是 WPF+WebBrowser 的经常报错弹框： 
测试：兼容性 - 音频
音频（https://webaudioapi.com/samples/）
皆大欢喜：前4者都能正常使用。
测试：性能
对性能的测试，进行了 2 个动画播放的帧率监控测试，
第一个动画是：WebGL/3D图形（https://threejs.org/examples/#webgl_animation_keyframes），第二个动画是：WebGL 2.0 （https://webglsamples.org/aquarium/aquarium.html），其中分别对动画中进行了2个不同参数的测试，分别测试 30000 条鱼 和 500 条鱼 渲染时的不同表现。
测试：性能 - 单模型动画
动画：WebGL/3D图形（https://threejs.org/examples/#webgl_animation_keyframes）
上图：这是一个3D模型人行走的动画，在页面顶部
可以看到页面渲染的帧率范围，下图指标中的数字是帧率范围的上限。
不负众望：前三者的表现一如既往的好；
意料之外：WPF+WebView2的性能表现毫不逊色于谷歌原生浏览器，甚至有略胜一筹的迹象；
十分错愕：Cef的ChromiumWebBrowser竟然只能达到30FPS，虽然是一个视觉流畅的帧率，但是与前三者相比，明显是一个不折不扣的差学生，而且差异竟然如此之大。
结论：从这一组的性能表现来看，前4个对于侧重功能性的应用来说，能够胜任，但是是对于要求高帧率动画、要求更优用户体验的应用来说，我们要谨慎考虑Cef.
测试：性能 - 30000 条鱼
动画：WebGL 2.0（WebGL Aquarium）渲染 30000 条鱼
这个页面的左侧设置了渲染鱼的数量为30000条，左上角显示渲染的实时帧率，5个浏览器的表现如下：
意料之中：谷歌原生浏览器表现一如既往的稳定，高性能；
喜出望外：WPF+WebView2，在如此高强度的渲染压力下，它的表现又一次超过了谷歌原生浏览器，这真的非常让人意外；
不可思议：WinUI3+WebView2 在上面单一模型动画测试中表现出来的帧率属于顶级的，但是对当前的高负荷的渲染压力下，帧率是极差的，这说明它的适用场景是：低压、轻便的环境。
仍然好奇：Cef下的ChromiumWebBrowser，竟然以完全稳定的帧率在运行，不管当前的渲染压力是大是小，都以一个固定的帧率水平均匀发挥，这一特点让它极度适应各类的功能性软件的开发，具有非常好的兼容性和适应性，始终发挥稳定。
测试：性能 - 500 条鱼
动画：WebGL 2.0（WebGL Aquarium）渲染 500 条鱼
这个页面的左侧设置了渲染鱼的数量为 500 条，左上角显示渲染的实时帧率，5个浏览器的表现如下：
意料之中：谷歌原生浏览器表现一如既往的稳定，高性能；
再次惊喜： WPF+WebView2，无论在低强度渲染，还是在高强度渲染，它的表现均超过了原生浏览器，这真的非常让人意外和惊喜；
原来如此：WinUI3+WebView2 在中强度的渲染压力下, 表现也是居中的水平, 完全够用，但是距离顶级的帧率有巨大的差异，这更加地说明了：它的确是非常的适合低压渲染的场景，并且性能的表现具有一定的弹性，即使渲染压力稍微增大一点点，也仍然具有不错的表现。
始终坚守：Cef下的ChromiumWebBrowser 真的是以完全稳定的帧率在渲染，同时我也尝试选择渲染 1 条鱼，它也仍然是稳定的30帧，看来这是它的内部机制，它的目标就是稳定渲染，它的定位就是良好的兼容性、和稳定性。
测试：高级特性
高级css特性（https://keithclark.co.uk/articles/pure-css-parallax-websites/）
打开网页后，点击顶部的Email链接, 弹出邮件发送的页面，5个浏览器的表现分别是：
不负所望：前三个都可以正常跳转到邮件发送页面。
大失所望：Cef+ChromiumWebBrowser 在前面表现出了极好的稳定性和兼容性，但是在这项新特性的测试中，页面却无法正常打开。这说明，它的兼容性和稳定性是同时伴随着守旧的特性。因此，我们的应用中如果具有很多新潮的体验，要慎重选择Cef , 下面是它打开失败时的页面：
总结
整齐最优：整体表现最优的毫无疑问是谷歌原生浏览器。
嵌入最优：嵌入浏览器，表现最优的是 WPF+WebView2（来自 Microsoft.Web.WebView2 ）
从以上方面的评测结果来看，基本上可以总结出来 不同的嵌入浏览器的适用场景：
WPF+WebView2：适应所有场景，各方面都表现极好，在开发web应用时，无论是复杂的业务功能，还是绚丽的动画效果，无论是整体的稳定性，还是对新特性的支持，全都表现非常棒，是任何情况下都非常理想的一个选择。
WinUI3+WebView2：仅仅在低强度UI渲染的场景下表现出色，适合开发轻量、便捷、高性能、炫酷的web应用；
WPF+ChromiumWebBrowser：它是一个朴实无华的、稳定发挥的守旧派，如果web应用偏传统，并且以功能性为主，选择它是完全没有问题的。
WPF+WebBrowser：死路一条。
其他的尝试：还尝试了minibink，但是总缺东少西的报错，放弃了。而且在很久之前用过它，它在兼容性上比较差，还会偶尔出现崩溃。因此暂时不考虑它。
经过以上的测试，基本可以根据应用类型，来选择匹配的嵌入浏览器方式了。具体的嵌入使用方式，等待下篇再验证，也有可能会推翻本文对已有结果的好评，毕竟，表现与易用可能是不同的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
