WebView 与 Android View 体系深度对比：绘制、事件与渲染机制

3.2 WebView 绘制流程

ViewRootImpl.performTraversals() │ ├─> WebView.onMeasure() │ └─> WebViewProvider.ViewDelegate.onMeasure() │ └─> [跨进程] → Chromium 计算内容大小 │ └─> setMeasuredDimension() │ ├─> WebView.onLayout() │ └─> WebViewProvider.ViewDelegate.requestLayout() │ └─> [跨进程] → Chromium 布局引擎 │ └─> WebView.onDraw(Canvas) └─> WebViewProvider.ViewDelegate.onDraw(Canvas) └─> [跨进程] → Chromium Compositor │ ├─> Blink 渲染引擎 │ ├─> DOM 树构建 │ ├─> 样式计算 │ ├─> 布局 (Layout) │ ├─> 绘制 (Paint) │ └─> 合成 (Composite) │ └─> 回调 Android: WebViewFunctor ├─> draw_gl() [OpenGL] ├─> draw_vk() [Vulkan] └─> draw_sw() [软件绘制] 

关键点：

• UI 线程触发，Renderer 进程执行
• 使用 Chromium 渲染管线（Blink + Skia）
• 通过 Functor 回调绘制到 Android Surface
• 支持 GPU 加速合成

3.3 绘制对比表

四、事件处理对比

4.1 普通 View 事件分发

// ViewGroup 事件分发
public boolean dispatchTouchEvent(MotionEvent ev) {
    boolean handled = false;
    // 1. 事件拦截检查
    if (onInterceptTouchEvent(ev)) {
        // 自己处理 handled = onTouchEvent(ev);
    } else {
        // 2. 分发给子 View
        for (int i = childrenCount - 1; i >= 0; i--) {
            View child = children[i];
            if (dispatchTransformedTouchEvent(ev, child)) { 
                handled = true; 
                break; 
            }
        }
        // 3. 子 View 都不处理，自己处理
        if (!handled) { 
            handled = onTouchEvent(ev); 
        }
    }
    return handled;
}

特点：

• 单进程内部分发
• 从 ViewGroup 到子 View 层层传递
• 支持拦截和消费
• 同步执行

4.2 WebView 事件处理

// WebView.onTouchEvent
@Override
public boolean onTouchEvent(MotionEvent event) {
    // 代理给 Provider
    return mProvider.getViewDelegate().onTouchEvent(event);
}

// WebViewProvider 处理
class AwViewMethods implements WebViewProvider.ViewDelegate {
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 1. 预处理（缩放、滚动检测等）
        if (mZoomControls.onTouchEvent(event)) {
            return true;
        }
        // 2. 转换坐标
        MotionEvent transformedEvent = transformEvent(event);
        // 3. 发送到 Renderer 进程
        boolean consumed = sendTouchEventToRenderer(transformedEvent);
        return consumed;
    }
}

// Renderer 进程处理
void ChromiumWebContentsDelegateAndroid::HandleTouchEvent(MotionEvent event) {
    // 1. 转换为 Blink 事件
    blink::WebTouchEvent web_event = ConvertToWebTouchEvent(event);
    // 2. 命中测试
    blink::WebInputEventResult result = web_contents_->GetRenderWidgetHostView()->ProcessTouchEvent(web_event);
    // 3. JavaScript 事件
    if (result == blink::WebInputEventResult::kNotHandled) {
        DispatchDOMTouchEvent(web_event);
    }
    // 4. 返回结果到 Browser 进程
    SendTouchEventResult(result);
}

事件流程：

用户触摸屏幕 │ └─> ViewRootImpl.deliverPointerEvent() │ └─> WebView.dispatchTouchEvent() │ ├─> [Browser 进程] WebViewProvider 处理 │ ├─> 缩放控制 │ └─> 滚动检测 │ ├─> [IPC] 发送到 Renderer 进程 │ ├─> [Renderer 进程] Chromium 事件处理 │ ├─> 命中测试 │ ├─> JavaScript 事件 (touchstart 等) │ └─> 滚动/缩放处理 │ └─> [IPC] 返回处理结果 └─> 更新 Android View 状态 

4.3 事件对比表

五、渲染管线对比

5.1 Android View 渲染管线

App 进程 (UI 线程) │ ├─> View.invalidate() │ └─> ViewRootImpl.scheduleTraversals() │ └─> Choreographer.postCallback(CALLBACK_TRAVERSAL) │ └─> [VSYNC 信号] │ └─> performTraversals() ├─> measure() ├─> layout() └─> draw() │ ├─> [软件绘制] Canvas.drawXXX() → Surface │ └─> [硬件加速] ├─> buildDisplayList() │ └─> RenderNode │ └─> RenderThread ├─> syncFrameState() ├─> draw() │ └─> OpenGL/Vulkan └─> eglSwapBuffers() └─> SurfaceFlinger 合成 

5.2 WebView 渲染管线

App 进程 (Browser 进程) │ └─> WebView.invalidate() │ └─> [IPC] 通知 Renderer 进程 │ Renderer 进程 │ │ │ ├─< [IPC] <───┘ │ ├─> Blink 渲染引擎 │ ├─1. DOM 树构建 │ │ └─> HTMLParser │ │ │ ├─2. 样式计算 (Style) │ │ └─> CSS 解析 + 级联 │ │ │ ├─3. 布局 (Layout) │ │ └─> LayoutTree 计算位置 │ │ │ ├─4. 分层 (Layer) │ │ └─> CompositingLayers │ │ │ ├─5. 绘制 (Paint) │ │ └─> PaintChunks (Skia 指令) │ │ │ └─6. 合成 (Composite) │ └─> Compositor 线程 │ └─> Compositor 线程 ├─> Tile Manager │ └─> 栅格化 (Raster) │ └─> Skia GPU 加速 │ ├─> Layer 树合成 │ └─> [IPC] 返回 GraphicBuffer │ └─> [Functor 回调] │ App 进程 │ │ │ └─< draw_gl() <────┘ │ └─> 绘制到 Android Surface └─> SurfaceFlinger 合成 

5.3 渲染对比表

六、线程模型对比

6.1 Android View 线程模型

App 进程 ├─> UI 线程 (Main Thread) │ ├─> 事件处理 │ ├─> View 树遍历 │ ├─> measure/layout │ └─> draw (构建 DisplayList) │ └─> RenderThread (硬件加速) ├─> DisplayList → OpenGL/Vulkan ├─> GPU 命令提交 └─> eglSwapBuffers() 

6.2 WebView 线程模型

App 进程 (Browser 进程) ├─> UI 线程 │ ├─> WebView API 调用 │ ├─> JavaScript Bridge │ └─> IPC 通信 │ ├─> IO 线程 │ └─> 网络请求 │ └─> RenderThread └─> 绘制 Functor 结果 ─────────────────────────────── Renderer 进程 (独立沙箱) ├─> Main 线程 (Blink) │ ├─> JavaScript 执行 (V8) │ ├─> DOM 操作 │ ├─> 样式计算 │ └─> 布局计算 │ ├─> Compositor 线程 │ ├─> Layer 合成 │ ├─> 滚动/缩放 │ ├─> 动画 │ └─> Raster 任务调度 │ └─> Raster 线程池 └─> Tile 栅格化 (Skia GPU) ─────────────────────────────── GPU 进程 (可选) └─> GPU 命令处理 └─> OpenGL/Vulkan 渲染 

6.3 线程对比表

七、内存管理对比

7.1 Android View 内存管理

// View 的内存主要包括：
class View {
    // 1. View 自身对象 (~200 bytes)
    int mPrivateFlags;
    AttachInfo mAttachInfo;
    ViewParent mParent;
    
    // 2. 绘制缓存 (DisplayList)
    RenderNode mRenderNode; // ~few KB
    
    // 3. 背景/前景 Drawable
    Drawable mBackground;
    Drawable mForeground;
    
    // 4. Padding/Margin
    int mPaddingLeft, mPaddingTop, mPaddingRight, mPaddingBottom;
    
    // 总内存：通常 < 10KB/View
}

7.2 WebView 内存管理

WebView 实例内存占用： ├─> Java 对象 │ ├─> WebView 本身 (~1KB) │ └─> Provider 实例 (~few KB) │ ├─> Browser 进程 │ ├─> V8 Heap (JavaScript 对象) │ ├─> DOM 树 (C++ objects) │ ├─> CSS 样式 │ ├─> 图片解码缓存 │ └─> 网络缓存 │ 总计：20-50MB │ ├─> Renderer 进程 │ ├─> Blink 内部结构 │ ├─> Layout 对象 │ ├─> Paint 缓存 │ ├─> Tile 缓存 (GPU 纹理) │ └─> Skia 资源 │ 总计：30-100MB │ └─> GPU 进程 (共享) └─> OpenGL 资源 总计：10-30MB 总计：60-180MB (取决于页面复杂度) 

7.3 内存对比表

八、性能对比

8.1 启动性能

8.2 渲染性能

8.3 交互响应

九、共同点

9.1 继承自 View 体系

1. 生命周期管理：onAttachedToWindow / onDetachedFromWindow
2. 可见性控制：setVisibility() / getVisibility()
3. 焦点管理：requestFocus() / clearFocus()
4. 可访问性：AccessibilityNodeProvider

9.2 支持硬件加速

1. GPU 渲染：都支持 OpenGL/Vulkan 加速
2. Layer 合成：都使用分层技术
3. 优化技术：脏区域优化、视口裁剪

9.3 事件处理

1. 触摸事件：都继承 dispatchTouchEvent / onTouchEvent
2. 键盘事件：dispatchKeyEvent
3. 焦点事件：onFocusChanged

十、关键差异总结

十一、使用场景建议

11.1 适合使用普通 View

• ✅ 固定 UI 布局
• ✅ 性能要求高（60fps）
• ✅ 内存受限
• ✅ 无需加载网页内容
• ✅ 离线应用

11.2 适合使用 WebView

• ✅ 需要展示 HTML 内容
• ✅ 需要动态更新 UI (H5 页面)
• ✅ 跨平台需求 (H5 复用)
• ✅ 富文本编辑
• ✅ 需要 JavaScript 交互

十二、总结

WebView 虽然继承自 AbsoluteLayout，但实际上是一个完全不同的渲染系统：

1. 本质差异：View 是轻量级 UI 组件，WebView 是完整的浏览器引擎
2. 架构复杂度：View 是单进程单线程，WebView 是多进程多线程
3. 性能权衡：View 追求极致性能，WebView 追求功能完整性
4. 使用场景：View 适合固定 UI，WebView 适合动态网页

理解这些差异，才能在实际开发中做出正确的技术选型。