使用以下做法优化 WebView2 的启动时间、内存、CPU 和网络使用情况。 使用这些工具和工作流对性能进行故障排除。
在 Windows 应用中嵌入Microsoft Edge WebView2 可实现新式 Web 功能。 WebView2 使用 Edge 的多进程体系结构,因此每个控件都会启动多个浏览器引擎进程,从而增加内存和启动开销。
详细内容:
- 确定性能瓶颈的类型
- 使用 Evergreen 运行时
- 优化启动性能
- 内存使用情况和进程管理
- CPU 和呈现性能
- 网络和加载性能
- WebView2 控件与主机应用之间的通信
- 遥测和分析工具
- 排查工作流的性能问题
- 另请参阅
确定性能瓶颈的类型
观察性能缓慢的症状,以确定问题是否为:
启动延迟。 请参阅下面的 优化启动性能。
内存使用率高。 请参阅下面的 内存使用情况和进程管理。
持续 CPU 负载。 请参阅下面的 CPU 和渲染性能。
页面加载缓慢。 请参阅下面的 网络和加载性能。
使用 Evergreen 运行时
尽可能使用 Evergreen WebView2 运行时部署应用。 Evergreen Runtime 自动更新,以获取最新的性能改进和安全修补程序。 保持 WebView2 运行时常青 (,即) 更新,以面向未来的应用。 使用固定版本可能会错过最近的优化。
如果出于脱机或兼容性原因必须使用固定运行时,请在测试新版本后定期更新它。
使用最新的 WebView2 预览频道 (Beta 版、开发人员版或 Canary) 测试你的应用,以便为即将发生的更改做好准备。 许多过去的性能问题(如内存泄漏和高 CPU 使用率)已在较新版本的 WebView2 运行时中得到解决。
如果Microsoft Edge 和 WebView2 版本匹配,并且Microsoft Edge 正在运行,则所需的 WebView2 二进制文件已在内存中,从而提高启动性能。
另请参阅:
- 分发应用和 WebView2运行时中的 Evergreen Runtime 分发模式。
优化启动性能
冷启动 (冷启动)
常见的性能瓶颈是首次创建 WebView2 控件并导航到网页的时间。 在冷启动时,WebView2 必须启动其进程和磁盘缓存,这可能会引入明显的延迟 (可能会因硬件和内容复杂性) 而异。
若要优化启动,请使用以下最佳做法。
不要将 WebView2 用于初始 UI
若要呈现初始屏幕或简单对话框,请使用轻型 XAML 或 Win32 屏幕,而不是 WebView2。
由于启动成本和资源争用,避免使用 WebView2 呈现初始屏幕或简单对话。 仅在显示实际 Web 内容时初始化 WebView2。
另请参阅:
优化用户数据文件夹 (UDF) 位置
为了提高性能,请将 UDF 保留在默认的本地应用数据文件夹中。 请参阅 管理用户数据文件夹。
避免慢速驱动器或网络共享;将数据放在更快的物理磁盘上。
避免冗余的 WebView2 实例
规划 UI,以便不会创建超出所需内容的 WebView2 控件。
例如,如果在多个网页之间导航,则重用单个 WebView2 并简单地将其导航到新 URL 可能会更快,而不是销毁并重新创建 WebView2 控件。
另请参阅:
内存使用情况和进程管理
每个 WebView2 控件创建自己的进程集,例如浏览器、呈现器和 GPU。 随着创建更多 WebView2 实例,每个实例运行自己的浏览器进程集,资源使用量通常会增加。
WebView2 实例根据 Web 内容的复杂性及其创建的浏览器进程使用内存。 运行 WebView2 控件的许多实例可能会造成系统内存紧张。
下面是管理和减少内存占用的最佳做法。
共享 WebView2 环境
若要节省内存,请在应用中的所有 WebView2 控件之间使用一个
CoreWebView2Environment控件,确保共享参数一致。在选项卡式接口中重复使用相同的环境,而不是创建多个环境。
另请参阅:
使用应用级进程共享
如果可行,请使用应用级进程共享。
多个应用可以使用相同的用户数据文件夹 和
CoreWebView2EnvironmentOptions共享浏览器进程。 这可以减少内存使用量,但由于可能存在跨应用干扰,因此需要仔细管理和彻底测试配置文件。请记住, (UDF) 共享用户数据文件夹时,基础数据 ((如 cookie、缓存和数据库) )正在不同应用程序之间共享。
另请参阅:
避免大范围主机对象
如果使用 AddHostObjectToScript 向 Web 公开 .NET 对象,请注意这些对象在内存中保存的内容。 只要脚本上下文继续运行,就可以有效地引用整个对象,这可以防止在 .NET 端垃圾回收该对象。
如果编写脚本只需要一小部分,请不要公开非常大的对象图。 首选创建狭窄的、特定于目的的主机对象,而不是传递完整的应用程序模型。 例如:
仅公开页面实际需要的作和数据。 例如,公开对象
FileService,而不是整个AppContext。将复杂对象包装在小型外观后面,以避免无意中公开深层对象层次结构。
对于集合,请提供筛选或分页结果,而不是公开完整的数据结构。
当需要对象的页面消失时,调用 CoreWebView2.RemoveHostObjectFromScript 以释放对象图。 例如,如果导航离开使用宿主对象的页面,请删除该对象,以避免在后台使其保持活动状态。
另请参阅:
- WebView2 API 概述中的主机/Web 对象共享。
防止内存泄漏
在释放 WebView2 对象之前删除本机事件处理程序,以避免引用周期和泄漏。
避免强引用 WebView2 的关闭;必要时使用弱引用。
调用
WebView2.Dispose()以在不再需要 WebView2 对象时发布它们。
另请参阅:
- WebView2.Dispose (布尔) 方法 - WPF。
- WebView2.Dispose (布尔) 方法 - WinForms。
- 修复内存问题
使用内存管理 API
在非活动 Web 视图上设置
MemoryUsageTargetLevel = CoreWebView2MemoryUsageTargetLevel.Low以减少内存使用量,这可能会提示浏览器引擎删除缓存的数据或将内存交换到磁盘。 当 WebView2 实例再次处于活动状态时,将目标级别还原到Normal,以获取完整的性能。 请参阅 WebView2 API 概述中的内存使用情况目标。如果 WebView2 实例在一段时间内未使用,请调用
CoreWebView2.TrySuspendAsync()以暂停呈现器进程,这会暂停脚本并进一步减少资源使用。 在需要时使用Resume()恢复。 这些Try作是尽力而为。 请参阅 WebView2 API 概述中的性能和调试。
优化 Web 内容
- 优化呈现的 Web 内容。 观察 JavaScript 堆中是否使用了过多的内存。 使用 Microsoft Edge DevTools(例如 内存工具) 监视各种 Web 内容对内存资源的使用情况。 请参阅使用内存工具记录堆快照 (“堆快照”分析类型) 。
定期刷新 WebView2
定期刷新 WebView2 实例。 在页面生命周期自然累积状态(如长时间运行的网页)的情况下,刷新 WebView2 实例有助于将 WebView2 进程返回到干净的基线。
某些长时间运行的页面可能会随着时间的推移保留资源,具体取决于 Web 内容和应用程序设计。 如果内存使用量意外增加,请使用 DevTools 检查以下内容:
JavaScript 堆使用情况。 请参阅:
事件侦听器。 请参阅:
- 使用“分析窗体上的键盘支持”中的“事件侦听器”选项卡,分析“元素”工具中的“事件侦听器”选项卡缺乏键盘支持。
- 在使用性能监视器工具测量页面的运行时性能中选择要监视的性能指标,有关 JS 事件侦听器指标。
DOM 保留期。 请参阅:
CPU 和呈现性能
WebView2 将 Web 内容呈现卸载到 Edge 使用的浏览器引擎,因此性能特征类似于在 Edge 中运行网站。
以下做法可确保高效 CPU 使用率和平滑呈现。
启用硬件加速
请勿禁止 WebView2 使用 GPU 来通过
disable-gpu标志) 呈现 (,但排除故障时除外。默认情况下,WebView2 使用 GPU 进行呈现。 WebView2 使用 GPU 对于性能至关重要。 必须分配 GPU 驱动程序和其他缓冲区,这需要额外的内存。
另请参阅
-
WebView2 浏览器标志 -
disable-gpu
简化 Web 内容
使用以下技术优化页面:
限制繁重的 JavaScript。
取消启动或限制任务。
对动画使用 CSS (而不是 JavaScript) 。
拆分长脚本以保持 UI 响应。
使用 Microsoft Edge DevTools 识别瓶颈。
使用典型的 Web 优化:避免过度布局转换,其中脚本在读取和写入 DOM 属性之间交替,导致多个重排。
另请参阅:
减少不必要的通信
减少主机应用程序与 WebView2 中托管的 Web 内容之间的不必要的通信。 这可以避免过多的进程间通信,以及随之而来的开销。 请参阅 本机代码和 Web 代码的互作。
尽可能批处理消息,因为频繁传递消息会增加 CPU 使用率。
管理流程优先级
- 如果应用具有繁重的本机工作负载,请仔细分配线程优先级,以避免导致 WebView2 线程不足。 WebView2 创建单独的呈现器进程。
另请参阅:
测试实际方案
- 使用 Microsoft Edge DevTools 在目标硬件上测试实际内容,以查找和优化性能问题。
另请参阅:
网络和加载性能
网络延迟和带宽有限可能会导致用户感知到的性能问题,尤其是在 WebView2 控件中加载 Web 内容时。
以下最佳做法与常规 Web 开发重叠。
利用缓存和服务辅助角色
WebView2 支持浏览器缓存。
使用缓存和服务辅助角色。
提供适当的缓存标头,以便重复的资源请求使用缓存版本。
请考虑使用服务辅助角色预先缓存静态文件,以便进行脱机访问;但监视缓存大小。
另请参阅:
检查网络瓶颈
使用 DevTools 网络 工具识别 WebView2 中的慢速资源;请参阅 检查网络活动。
根据需要优化或异步加载慢速第三方脚本或 API。
减少初始有效负载
提高感知速度:
使初始有效负载保持轻型。 最初倾向于发送静态 HTML,因为它通常比 JavaScript 更快地加载、分析和呈现。 在最初使用 JavaScript 和单页应用框架时要谨慎;此类框架通常在启动时加载大量代码,这可能会延迟 Web 内容的初始呈现。
HTML 加载、分析和呈现的速度非常快,比 JavaScript 生成相同 UI 所花费的时间要快。 对于某些单页应用 JS 框架,即使框架的初始 HTML 很小,也必须下载、分析和运行整个框架代码,然后才能显示任何内容。
延迟繁重的组件。
初始 UI 出现后延迟加载图像或脚本。
另请参阅:
- 在使用 Lighthouse 优化网站速度中消除呈现阻塞资源。
WebView2 控件与主机应用之间的通信
选择正确的信道
WebView2 提供各种 Web 到主机和主机到 Web 通信选项。
尝试使用 Web 消息,而不是宿主对象。 由于内存使用量和时间,Web 消息的简单性和可靠性,Web 消息往往比主机对象快。
仅当需要 Web 消息无法轻松表达的功能时,才使用主机对象,例如:
要直接向 JavaScript 公开的丰富类似对象的 API (方法、属性) 事件。
维护主机端上下文比来回传递结构化消息更简单的有状态交互。
大型或二进制数据流,其中重复字符串序列化有效负载到 Web 消息会变得效率低下。
主机对象具有以下缺点:
主机对象需要 COM 封送,如果对象图发生更改或未正确封送,可能会带来不稳定。
与单个批处理
WebMessage相比,主机对象对于聊天频繁的调用通常较慢,因为每个方法或属性访问都单独跨越边界。主机对象在 Web 和主机代码之间创建更紧密的耦合,从而降低可移植性。
另请参阅:
优化通信
实现异步批量通信,以最大程度地减少 IPC 通信并减少数据复制。
另请参阅:
- WebView2 API 概述中的 Web/本机互作。
- 本机代码和 Web 代码的互作
遥测和分析工具
收集数据是识别和修复性能问题的关键。
以下是 WebView2 的工具和遥测技术。
WebView2 ETW 跟踪
使用 Microsoft 的 WebView2.wprp (收集 ETW 跟踪) 配置文件与 Windows 性能记录器捕获和分析详细的 WebView2 事件,例如进程启动和导航计时。
可以使用 Windows (ETW) 的事件跟踪来记录 Edge/WebView2 提供程序事件;请参阅 收集 ETW 跟踪。
分析 Windows 性能分析器中 CPU、磁盘和内存数据的跟踪。
Microsoft Edge DevTools
使用 Microsoft Edge DevTools 监视 WebView2 内容和进程,以识别 CPU 使用率过高或内存泄漏等问题。
右键单击 WebView2 应用中的 WebView2 控件,然后选择“ 检查”。 例如,右键单击主应用 Win32 示例应用,然后单击“ 检查”。 DevTools 将在未停靠的专用浏览器窗口中打开。
在 DevTools 中,可以使用 内存 工具和 性能 工具等工具:
另请参阅:
使用 Edge 开发人员工具进行检查
使用 edge://inspect打开“ 使用 Edge 开发人员工具进行检查 ”选项卡的 ,以监视 WebView2 内容和进程,以识别 CPU 使用率过高或内存泄漏等问题:
若要详细了解如何使用 检查 WebView2 进程 edge://inspect,请参阅 远程调试桌面 WebView2 WinUI 2 (UWP) 应用。
浏览器任务管理器
使用浏览器任务管理器监视 WebView2 内容和进程,以识别 CPU 使用率过高或内存泄漏等问题。
请参阅 实时监视内存使用情况 (浏览器任务管理器) 。
排查工作流的性能问题
当 WebView2 应用中出现性能问题时,请根据以下策略使用结构化方法来进行故障排除。
使用简单内容进行测试
加载最小 HTML 页面。
如果简单内容的性能仍然很慢,请调查运行时初始化或主机应用因素。
如果通过简单内容提高性能,请专注于优化 Web 内容。
另请参阅:
验证 WebView2 运行时版本
请确保运行的是最新的 WebView2 运行时,而不是过时的版本或回退 Edge 安装。 根据需要更新 WebView2 运行时。
另请参阅:
- 在为 WebView2设置开发环境中更新 WebView2 运行时。
- 分发应用和 WebView2 运行时
监视内存使用情况
使用 Windows 任务管理器检查 WebView2 进程内存。
异常增长可能表示泄漏 - 使用 WPR 录制进一步调试此情况。
另请参阅:
将 WebView2 与 Microsoft Edge 进行比较
WebView2 使用与 Microsoft Edge 相同的核心浏览器引擎。 使用 Microsoft Edge 以及 WebView2 验证案例,以隔离问题。