harmony 鸿蒙Rendering Modes of the Web Component
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.
})
}
}
}
你可能感兴趣的鸿蒙文章
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
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦