【鸿蒙OH实战开发】APP开发之使用同层渲染在Web组件上渲染原生组件

---

📚往期笔录记录✏️：

✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✏️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✏️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✏️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✏️ 记录一场鸿蒙开发岗位面试经历~

✏️ 持续更新中……

---

概述

在使用Web组件加载H5页面时，经常会有输入框、视频的场景，这些场景在H5中的组件性能体验欠佳。想要更加流畅的体验，必须要将原生组件放到Web组件上。在什么场景下应该在Web组件上使用原生组件：

• 需要高性能，流畅体验。
• 需要使用原生组件功能。
• 原生组件已经实现，复用以减少开发成本。

目前要实现在Web组件上使用原生组件有两种方案：

方案一：直接使用Stack将组件堆叠到H5页面上。

方案二：使用同层渲染，使用Web组件和原生组件交互的方式，将原生组件替代Web组件中部分组件，提升交互体验和性能。

以上两种方案经过性能对比后，同层渲染比非同层渲染的性能要更好。

什么是同层渲染

同层渲染是一种优化技术，用于提高Web组件页面的渲染性能。同层渲染会将位于同一个图层的元素一起渲染，以减少重绘和重排的次数，从而提高页面的渲染效率。

同层渲染和非同层渲染的区别如下：

• 非同层渲染：通过Z轴的层级关系堆叠在Web组件页面上。此方式实现方式简单，用于原生组件大小位置固定场景。
• 同层渲染：通过同层渲染的方式直接渲染到H5页面Embed标签区域上。此方式实现相对复杂，用于原生组件大小位置需要跟随Web组件页面变化场景。

图1 同层渲染和非同层渲染区别

场景示例

以下分别采用非同层渲染和同层渲染的两种方式，加载相同的商城组件到相同的H5页面上，并抓取Trace对比两者之间的区别，页面效果与场景实例源码的核心部分如下：

图2 页面效果图

提供承载的H5页面代码如下：

<div>
    <div id="bodyId">
        <!-- 在H5界面上通过embed标签标识同层元素，在应用侧将原生组件渲染到H5页面embed标签所在位置-->
        <embed id="nativeSearch" type = "native/component" width="100%" height="100%" src="view"/>
    </div>
</div>

商品数据代码如下：

export const PRODUCT_DATA: Array<ProductDataModel> = [
  new ProductDataModel(0, $r('app.media.nativeembed_product000'), $r('app.string.nativeembed_product_title000'),
    $r("app.string.nativeembed_product_price000")),
  new ProductDataModel(1, $r('app.media.nativeembed_product001'), $r('app.string.nativeembed_product_title001'),
    $r('app.string.nativeembed_product_price001')),
  new ProductDataModel(2, $r('app.media.nativeembed_product002'), $r('app.string.nativeembed_product_title002'),
    $r('app.string.nativeembed_product_price002')),
  new ProductDataModel(4, $r('app.media.nativeembed_product003'), $r('app.string.nativeembed_product_title004'),
    $r('app.string.nativeembed_product_price004')),
  new ProductDataModel(0, $r('app.media.nativeembed_product000'), $r('app.string.nativeembed_product_title000'),
    $r("app.string.nativeembed_product_price000")),
  new ProductDataModel(1, $r('app.media.nativeembed_product001'), $r('app.string.nativeembed_product_title001'),
    $r('app.string.nativeembed_product_price001')),
  new ProductDataModel(2, $r('app.media.nativeembed_product002'), $r('app.string.nativeembed_product_title002'),
    $r('app.string.nativeembed_product_price002')),
  new ProductDataModel(4, $r('app.media.nativeembed_product003'), $r('app.string.nativeembed_product_title004'),
    $r(