1# Rendering Modes of the Web Component
2
3The **Web** component supports two rendering modes.
4
5**Asynchronous Rendering Mode (Default)**
6
7` renderMode: RenderMode.ASYNC_RENDER`
8
9Displays 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.
10
11**Synchronous Rendering Mode**
12
13` renderMode: RenderMode.SYNC_RENDER`
14
15Displays 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.
16
17> **NOTE**
18>
19> For details about the enumerated values, see [RenderMode](../reference/apis-arkweb/ts-basic-components-web.md#rendermode12).
20
21## Specifications and Constraints
22
23**Asynchronous Rendering Mode**
24
25- The maximum width and height of a **Web** component cannot exceed 7,680 pixels (physical pixels). Otherwise, a white screen is displayed.
26- Dynamic mode switching is not supported.
27
28**Synchronous Rendering Mode**
29
30- The maximum width and height of a **Web** component cannot exceed 500,000 pixels (physical pixels). Otherwise, a white screen is displayed.
31- Direct Digital Synthesis (DSS) is not supported.
32- Dynamic mode switching is not supported.
33
34## When to Use
35
36```typescript
37// renderMode.ets
38import { webview } from '@kit.ArkWeb';
39
40@Entry
41@Component
42struct WebHeightPage {
43  private webviewController: WebviewController = new webview.WebviewController()
44
45  build() {
46     Column() {
47         Web({
48             src: "https://www.example.com/",
49             controller: this.webviewController,
50             renderMode: RenderMode.ASYNC_RENDER // Set the rendering mode.
51         })
52     }
53  }
54}
55```
56
57![web-render-mode](figures/web-render-mode.png)
58