同层渲染方案比较

发表于 更新于 本文字数： 727 阅读时长 ≈ 1 分钟

定义

同层渲染：通过一定技术把原生组件直接渲染在 WebView 层级中，原生组件直接挂载在 WebView 节点。

解决什么问题

  • 原生组件层级问题

微信小程序

iOS

原理

iOS 中，当在一个 DOM 节点设置 CSS 属性：

overflow: scroll;
-webkit-overflow-scrolling: touch;

时，WKWebView 会为其生成一个 WKChildScrollView，与 DOM 节点存在映射关系，这是一个 UIScrollView 的子类，WebView 里的滚动是由原生的滚动组件来承载的。

实现

  1. 创建能够生成 WKChildScrollView 的 DOM 节点
  2. 通知客户端找到 WKChildScrollView 组件
  3. 将原生组件挂载到 WKChildScrollView 下

Android

原理

Chromium 支持 WebPlugin 机制，可以用 WebPlugin 解析和描述 embed 标签。

<embed id="web-plugin" type="plugin/video" width="300" height="300" />
实现
  1. 创建 embed DOM 节点并指定组件类型
  2. Chromium 创建 WebPlugin 实例，生成一个 RenderLayer
  3. 客户端初始化对应的原生组件
  4. 将原生组件绘制到 RenderLayer 所绑定的 SurfaceTexture 上
  5. 通知 Chromium 内核渲染 RenderLayer
  6. Chromium 渲染 embed 节点并上屏

参考