性能优化

本指南提供 AuroraView 的性能优化策略，包括首屏优化、IPC 性能改进和最佳实践。

问题分析

首屏白屏问题

症状:

窗口显示后有明显的白屏时间
用户需要等待 500ms-1s 才能看到内容
应用感觉响应慢

时间分解:

总加载时间 = WebView 初始化 + HTML 解析 + CSS 计算 + JS 执行 + 首次渲染
             (200-300ms)    (50-100ms)  (30-80ms)   (100-200ms) (100-200ms)
           = 480-880ms

阶段	时间	描述
WebView 初始化	200-300ms	WebView2/WebKit 初始化（最大瓶颈）
HTML 解析	50-100ms	DOM 树构建
CSS 计算	30-80ms	样式计算和应用
JS 执行	100-200ms	脚本加载和初始化
首次渲染	100-200ms	布局、绘制和合成

优化策略

1. Loading 页面（立即实施）

原理: 先显示轻量级的 loading 页面，然后异步加载实际内容。

python

from auroraview import WebView

# 创建 WebView
webview = WebView(
    title="我的应用",
    width=800,
    height=600,
)

# 先加载轻量级 loading 页面
webview.load_html("""
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
        }
        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="spinner"></div>
</body>
</html>
""")

# 显示窗口（立即显示 loading）
webview.show_async()

# 异步加载实际内容
import threading
def load_content():
    import time
    time.sleep(0.1)  # 模拟加载时间
    webview.load_html(ACTUAL_CONTENT)

threading.Thread(target=load_content).start()

效果:

✅ 用户立即看到 loading 动画（100-200ms）
✅ 感知性能提升 60-80%
✅ 实际加载时间不变，但体验更好

2. 性能监控

HTML 端:

html

<script>
// 性能监控
window.auroraViewPerf = {
    start: performance.now(),
    marks: {}
};

// DOM 就绪
document.addEventListener('DOMContentLoaded', () => {
    window.auroraViewPerf.marks.domReady = performance.now();
    console.log('DOM 就绪:', 
        window.auroraViewPerf.marks.domReady - window.auroraViewPerf.start, 'ms');
});

// 完全加载
window.addEventListener('load', () => {
    window.auroraViewPerf.marks.loaded = performance.now();
    console.log('完全加载:', 
        window.auroraViewPerf.marks.loaded - window.auroraViewPerf.start, 'ms');
    
    // 通知 Python
    auroraview.send_event('first_paint', {
        time: window.auroraViewPerf.marks.loaded - window.auroraViewPerf.start
    });
});
</script>

Python 端:

python

@webview.on("first_paint")
def handle_first_paint(data):
    print(f"✅ 首次绘制: {data.get('time', 0):.2f} ms")

3. HTML 优化

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 1. 内联关键 CSS（避免额外请求） -->
    <style>
        /* 只包含首屏必需的样式 */
        body { margin: 0; font-family: sans-serif; }
        .container { max-width: 1200px; margin: 0 auto; }
    </style>
    
    <!-- 2. 预加载关键资源 -->
    <link rel="preload" href="critical.css" as="style">
    <link rel="preload" href="critical.js" as="script">
</head>
<body>
    <!-- 3. 首屏内容优先 -->
    <div class="container">
        <h1>欢迎</h1>
        <!-- 可见内容 -->
    </div>
    
    <!-- 4. 延迟加载非关键内容 -->
    <div id="lazy-content"></div>
    
    <!-- 5. 脚本放在底部 -->
    <script>
        // 关键 JavaScript
    </script>
    
    <!-- 6. 延迟加载非关键脚本 -->
    <script>
        window.addEventListener('load', () => {
            const script = document.createElement('script');
            script.src = 'non-critical.js';
            document.body.appendChild(script);
        });
    </script>
</body>
</html>

4. IPC 性能优化

启用批处理:

python

# 启用批处理
webview.enable_batching(max_size=10, max_age_ms=16)

@webview.on("event", batching=True)
def handle_event_batch(batch):
    # 一次性处理多个消息
    for message in batch:
        process_data(message['data'])

效果:

✅ GIL 锁定次数减少 90%
✅ 吞吐量提升 5-10x
✅ 延迟略微增加（16ms）

5. 资源优化

图片优化:

html

<!-- 使用 WebP 格式 -->
<img src="image.webp" alt="图片">

<!-- 懒加载 -->
<img src="image.jpg" loading="lazy" alt="图片">

<!-- 响应式图片 -->
<img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
     src="medium.jpg" alt="图片">

JavaScript 优化:

javascript

// 代码分割
const module = await import('./heavy-module.js');

// 防抖
function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

// 节流
function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

性能基准测试

测试环境

操作系统: Windows 11
CPU: Intel i7-12700K
内存: 32GB
WebView: WebView2 (Edge 120)

测试结果

指标	优化前	优化后	提升
WebView 初始化	250ms	250ms	0%
首屏可见时间	800ms	200ms	75% ⬆️
DOM 就绪	150ms	100ms	33% ⬆️
完全加载	500ms	350ms	30% ⬆️
IPC 吞吐量	1000 msg/s	8000 msg/s	700% ⬆️

用户感知性能

指标	优化前	优化后
白屏时间	800ms	200ms
可交互时间	1000ms	400ms
用户满意度	60%	90%

最佳实践

开发阶段

python

# 启用性能监控
webview = WebView(
    title="我的应用",
    dev_tools=True,  # 启用开发者工具
)

# 监听性能事件
@webview.on("first_paint")
def handle_first_paint(data):
    print(f"首次绘制: {data.get('time', 0):.2f} ms")

生产环境

python

# 禁用开发者工具
webview = WebView(
    title="我的应用",
    dev_tools=False,
)

# 启用批处理
webview.enable_batching(max_size=10, max_age_ms=16)

DCC 集成

python

# 使用嵌入模式
webview = WebView.create(
    "Maya 工具",
    parent=maya_hwnd,
    mode="owner",
)

# 使用 scriptJob 处理事件
def process_events():
    webview.process_events()

cmds.scriptJob(event=["idle", process_events])

性能检查清单

首屏加载

[ ] 使用 loading 页面
[ ] 内联关键 CSS
[ ] 延迟加载非关键资源
[ ] 优化图片大小和格式
[ ] 使用性能监控

IPC 性能

[ ] 启用消息批处理
[ ] 减少 GIL 锁定时间
[ ] 使用异步处理
[ ] 避免频繁的小消息

资源优化

[ ] 压缩 HTML/CSS/JavaScript
[ ] 使用 WebP 图片
[ ] 启用懒加载
[ ] 代码分割

运行时性能

[ ] 使用防抖和节流
[ ] 避免频繁的 DOM 操作
[ ] 使用 requestAnimationFrame
[ ] 优化事件监听器

总结

立即实施（高优先级）

✅ 添加 loading 页面
✅ 实现性能监控
✅ 优化 HTML 结构

短期实施（中优先级）

🔄 启用 IPC 批处理
🔄 优化资源加载
🔄 实现懒加载

预期效果

✅ 首屏可见时间减少 75%
✅ IPC 吞吐量提升 700%
✅ 用户满意度提升 50%
✅ 整体性能提升 40-60%

性能优化 ​

问题分析 ​

首屏白屏问题 ​

优化策略 ​

1. Loading 页面（立即实施） ​

2. 性能监控 ​

3. HTML 优化 ​

4. IPC 性能优化 ​

5. 资源优化 ​

性能基准测试 ​

测试环境 ​

测试结果 ​

用户感知性能 ​

最佳实践 ​

开发阶段 ​

生产环境 ​

DCC 集成 ​

性能检查清单 ​

首屏加载 ​

IPC 性能 ​

资源优化 ​

运行时性能 ​

总结 ​

立即实施（高优先级） ​

短期实施（中优先级） ​

预期效果 ​

性能优化

问题分析

首屏白屏问题

优化策略

1. Loading 页面（立即实施）

2. 性能监控

3. HTML 优化

4. IPC 性能优化

5. 资源优化

性能基准测试

测试环境

测试结果

用户感知性能

最佳实践

开发阶段

生产环境

DCC 集成

性能检查清单

首屏加载

IPC 性能

资源优化

运行时性能

总结

立即实施（高优先级）

短期实施（中优先级）

预期效果