Xamarin Forms WebView UWP性能问题求助：加载邮件HTML过慢

我之前做邮件客户端项目时，也踩过Xamarin Forms WebView在UWP上的性能大坑——同样的HTML内容，Android秒开，UWP要等好几秒甚至十几秒，卡顿到用户都要投诉了。结合自己的踩坑经验和社区里的解决方案，给你几个可行的方向：

1. 先给HTML内容“瘦个身” #

邮件HTML往往自带大量冗余代码：重复的内联CSS、空标签、不必要的注释，甚至是为了兼容旧邮箱的冗余样式。这些都会让UWP的WebView解析起来慢很多。你可以：

• 用代码或者第三方库（比如HtmlAgilityPack）移除空标签、重复样式和注释
• 压缩HTML内容：去掉多余的空格、换行，把多行CSS合并成一行
• 把邮件里的远程图片缓存到本地，再替换HTML里的图片链接——UWP WebView加载远程资源的开销比Android大很多，本地缓存能省不少时间

2. 换掉默认WebView，用WebView2（最有效！） #

Xamarin Forms默认的UWP WebView用的是旧的EdgeHTML内核，性能远不如基于Chromium的WebView2。很多开发者切换到WebView2后，加载速度直接提升了好几倍。具体步骤：

第一步：在共享项目里创建自定义WebView控件 #

using Xamarin.Forms;

namespace YourAppName.Controls
{
    public class EnhancedWebView : WebView
    {
        public static readonly BindableProperty HtmlContentProperty =
            BindableProperty.Create(nameof(HtmlContent), typeof(string), typeof(EnhancedWebView), string.Empty);

        public string HtmlContent
        {
            get => (string)GetValue(HtmlContentProperty);
            set => SetValue(HtmlContentProperty, value);
        }
    }
}

第二步：在UWP项目里添加WebView2渲染器 #

首先要在UWP项目里安装Microsoft.Web.WebView2 NuGet包，然后创建渲染器：

using Microsoft.Web.WebView2.Core;
using YourAppName.Controls;
using YourAppName.UWP.Renderers;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(EnhancedWebView), typeof(EnhancedWebViewRenderer))]
namespace YourAppName.UWP.Renderers
{
    public class EnhancedWebViewRenderer : ViewRenderer<EnhancedWebView, Microsoft.UI.Xaml.Controls.WebView2>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<EnhancedWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var webView2 = new Microsoft.UI.Xaml.Controls.WebView2();
                // 预初始化CoreWebView2，避免首次加载等待
                webView2.CoreWebView2InitializationCompleted += WebView2_CoreWebView2InitializationCompleted;
                webView2.EnsureCoreWebView2Async();
                SetNativeControl(webView2);
            }

            if (e.NewElement != null)
            {
                LoadHtmlContent();
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == EnhancedWebView.HtmlContentProperty.PropertyName)
            {
                LoadHtmlContent();
            }
        }

        private void WebView2_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
        {
            LoadHtmlContent();
        }

        private void LoadHtmlContent()
        {
            if (Control?.CoreWebView2 != null && Element != null)
            {
                Control.CoreWebView2.NavigateToString(Element.HtmlContent);
            }
        }
    }
}

第三步：在XAML里使用自定义控件 #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourAppName.Controls"
             x:Class="YourAppName.Views.EmailDetailPage">
    <controls:EnhancedWebView HtmlContent="{Binding HtmlBody}" />
</ContentPage>

3. 优化UI线程和加载时机 #

• 在ViewModel里异步处理HTML内容：比如用Task.Run在后台线程完成压缩、缓存图片等操作，处理完再更新HtmlBody属性，避免阻塞UI线程
• 预加载WebView2：可以在App启动时就初始化WebView2的环境，这样打开邮件页面时就不用等CoreWebView2初始化的时间了

4. 开启UWP项目的编译优化 #

打开UWP项目的属性，在“生成”选项卡中：

• 勾选“优化代码”
• 选择“Release”模式时，开启.NET Native编译（这个对UWP性能提升很明显）

我当时把默认WebView换成WebView2，再加上HTML压缩，100多K的邮件内容加载时间从11秒降到了1秒左右，效果非常明显。你可以先试试WebView2的方案，这是社区里公认解决UWP WebView性能问题的最优解。

内容的提问来源于stack exchange，提问作者Slade