I'm developing an Android app using ".NET for Android," and my UI is implemented with a WebView displaying a simple CSS animation. However, I'm experiencing high CPU (20%) and GPU (13%) usage even with trivial animations.
Here are the details and the code I'm using:
using Android.Webkit;
namespace AndroidApp3;
[Activity(Label = "@string/app_name", MainLauncher = true)]
public class MainActivity : Activity
{
private WebView? WebView { get; set; }
protected override void OnCreate(Bundle? savedInstanceState)
{
base.OnCreate(savedInstanceState);
WebView = new WebView(this);
WebView.LoadUrl("file:///android_asset/index.html");
SetContentView(WebView);
}
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
.flasher {
animation: pulseOpacity 1s infinite;
}
@keyframes pulseOpacity {
0% {opacity: 0.90;}
50% {opacity: 0.4;}
100% {opacity: 0.90;}
}
</style>
</head>
<body>
<h1 class="flasher" style="color:blue;">Test</h1>
</body>
</html>
AndroidManifest.xml
.WebView.SetLayerType(LayerType.Software, null);
131.0.6778.200
How can I reduce the CPU and GPU usage caused by simple CSS animations in my WebView? Are there specific settings or optimizations for WebView that I might be missing? Any advice or suggestions for improving performance would be greatly appreciated.