1# Web组件渲染模式
2
3Web组件支持两种渲染模式。
4
5**异步渲染模式（默认）**
6
7` renderMode: RenderMode.ASYNC_RENDER`
8
9异步渲染模式下，Web组件作为图形surface节点，独立送显。建议在仅由Web组件构成的应用页面中使用此模式，有更好的性能和更低的功耗表现。
10
11**同步渲染模式**
12
13` renderMode: RenderMode.SYNC_RENDER`
14
15同步渲染模式下，Web组件作为图形canvas节点，Web渲染跟随系统组件一起送显。可以渲染更长Web组件内容，但会消耗更多的性能资源。
16
17> **说明：**
18>
19> 接口枚举值定义请查看[RenderMode枚举说明](../reference/apis-arkweb/ts-basic-components-web.md#rendermode12枚举说明)。
20
21## 规格与约束
22
23**异步渲染模式**
24
25- Web组件的宽高最大规格不超过7,680px（物理像素），超过则会导致白屏。
26- 不支持动态切换模式。
27
28**同步渲染模式**
29
30- Web组件的宽高最大规格不超过500,000px（物理像素），超过则会导致白屏。
31- 不支持DSS合成。
32- 不支持动态切换模式。
33
34## 使用场景
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 // 设置渲染模式
51         })
52     }
53  }
54}
55```
56
57![web-render-mode](figures/web-render-mode.png)
58
59
60