harmony 鸿蒙Rendering Modes of the Web Component

  • 2025-06-12
  • 浏览 (6)

Rendering Modes of the Web Component

The Web component supports two rendering modes.

Asynchronous Rendering Mode (Default)

renderMode: RenderMode.ASYNC_RENDER

Displays a Web component as a graphics surface node independently in asynchronous rendering mode. You are advised to use this mode on application pages that consist of only Web components to achieve better performance and lower power consumption.

Synchronous Rendering Mode

renderMode: RenderMode.SYNC_RENDER

Displays a Web component as a canvas node with the system component in synchronous rendering mode. This mode renders longer Web component content but consumes more performance resources.

NOTE

For details about the enumerated values, see RenderMode.

Specifications and Constraints

Asynchronous Rendering Mode

  • The maximum width and height of a Web component cannot exceed 7,680 pixels (physical pixels). Otherwise, a white screen is displayed.
  • Dynamic mode switching is not supported.

Synchronous Rendering Mode

  • The maximum width and height of a Web component cannot exceed 500,000 pixels (physical pixels). Otherwise, a white screen is displayed.
  • Direct Digital Synthesis (DSS) is not supported.
  • Dynamic mode switching is not supported.

When to Use

// renderMode.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebHeightPage {
  private webviewController: WebviewController = new webview.WebviewController()

  build() {
     Column() {
         Web({
             src: "https://www.example.com/",
             controller: this.webviewController,
             renderMode: RenderMode.ASYNC_RENDER // Set the rendering mode.
         })
     }
  }
}

web-render-mode

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkWeb

harmony 鸿蒙Taking Over the Media Playback on Web Pages

harmony 鸿蒙Mutual Invoking Between the Application and the Frontend Page (C/C++)

harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page (C/C++)

harmony 鸿蒙Enabling Ads Blocking

harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page

harmony 鸿蒙Migrating Web Components Between Different Windows

harmony 鸿蒙Introduction to ArkWeb

harmony 鸿蒙Implementing Content Scrolling

harmony 鸿蒙Managing Cookies and Data Storage

0  赞