• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ArkWeb进程
2<!--Kit: ArkWeb-->
3<!--Subsystem: Web-->
4<!--Owner: @weixin_41848015-->
5<!--Designer: @libing23232323-->
6<!--Tester: @ghiker-->
7<!--Adviser: @HelloCrease-->
8
9ArkWeb是多进程模型，分为应用进程、Web渲染进程、Web GPU进程、Web孵化进程和Foundation进程。
10
11> **说明：**
12>
13> Web内核对内存大小的申请没有限制约束。
14
15**图1** ArkWeb进程模型图
16
17![web-component-process](figures/arkweb_component_process.png)
18
19- 应用进程中Web相关线程（应用唯一）
20
21  - 应用进程为主进程。包含网络线程、Video线程、Audio线程和IO线程等。
22
23  - 负责Web组件的对外接口与回调处理，网络请求、媒体服务等需要与其他系统服务交互的功能。
24
25- Foundation进程（系统唯一）
26
27  负责接收应用进程进行孵化进程的请求，管理应用进程和Web渲染进程的绑定关系。
28
29- Web孵化进程（系统唯一）
30
31  - 负责接收Foundation进程的请求，执行孵化Web渲染进程与Web GPU进程。
32
33  - 执行孵化后处理安全沙箱降权、预加载动态库，以提升性能。
34
35- Web渲染进程（应用可指定多Web实例间共享或独立进程）
36
37  - 负责运行Web渲染进程引擎（HTML解析、排版、绘制、渲染）。
38
39  - 负责运行ArkWeb执行引擎（JavaScript、Web Assembly）。
40
41  - 提供接口供应用选择多Web实例间是否共享渲染进程，满足不同场景对安全性、稳定性、内存占用的诉求。
42
43  - 默认策略：移动设备上共享渲染进程以节省内存，2in1设备上独立渲染进程提升安全与稳定性。
44
45- Web GPU进程（应用唯一）
46
47  负责光栅化、合成送显等与GPU、RenderService交互功能。提升应用进程稳定性、安全性。
48
491. 可通过[setRenderProcessMode](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#setrenderprocessmode12)设置渲染子进程的模式，从而控制渲染过程的单进程或多进程状态。
50
51   移动设备默认为单进程渲染，而2in1设备则默认采用多进程渲染。通过调用[getRenderProcessMode](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#getrenderprocessmode12)可查询当前的渲染子进程模式，其中枚举值0表示单进程模式，枚举值1对应多进程模式。若获取的值不在[RenderProcessMode](../reference/apis-arkweb/arkts-apis-webview-e.md#renderprocessmode12)枚举值范围内，则系统将自动采用多进程渲染模式作为默认设置。
52
53   ```ts
54   // xxx.ets
55   import { webview } from '@kit.ArkWeb';
56   import { BusinessError } from '@kit.BasicServicesKit';
57
58   @Entry
59   @Component
60   struct WebComponent {
61     controller: webview.WebviewController = new webview.WebviewController();
62
63     build() {
64       Column() {
65         Button('getRenderProcessMode')
66           .onClick(() => {
67             let mode = webview.WebviewController.getRenderProcessMode();
68             console.log("getRenderProcessMode: " + mode);
69           })
70         Button('setRenderProcessMode')
71           .onClick(() => {
72             try {
73               webview.WebviewController.setRenderProcessMode(webview.RenderProcessMode.MULTIPLE);
74             } catch (error) {
75               console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as     BusinessError).message}`);
76             }
77           })
78         Web({ src: 'www.example.com', controller: this.controller })
79       }
80     }
81   }
82   ```
83
842. 可通过[terminateRenderProcess](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#terminaterenderprocess12)来主动关闭渲染进程。若渲染进程尚未启动或已销毁，此操作将不会产生任何影响。此外，销毁渲染进程将同时影响所有与之关联的其他实例。
85
86   ```ts
87   // xxx.ets
88   import { webview } from '@kit.ArkWeb';
89
90   @Entry
91   @Component
92   struct WebComponent {
93     controller: webview.WebviewController = new webview.WebviewController();
94
95     build() {
96       Column() {
97         Button('terminateRenderProcess')
98         .onClick(() => {
99           let result = this.controller.terminateRenderProcess();
100           console.log("terminateRenderProcess result: " + result);
101         })
102         Web({ src: 'www.example.com', controller: this.controller })
103       }
104     }
105   }
106   ```
107
1083. 可通过[onRenderExited](../reference/apis-arkweb/arkts-basic-components-web-events.md#onrenderexited9)来监听渲染进程的退出事件，从而获知退出的具体原因（如内存OOM、crash或正常退出等）。由于多个Web组件可能共用同一个渲染进程，因此，每当渲染进程退出时，每个受此影响的Web组件均会触发相应的回调。
109
110   ```ts
111   // xxx.ets
112   import { webview } from '@kit.ArkWeb';
113
114   @Entry
115   @Component
116   struct WebComponent {
117     controller: webview.WebviewController = new webview.WebviewController();
118
119     build() {
120       Column() {
121         Web({ src: 'chrome://crash/', controller: this.controller })
122           .onRenderExited((event) => {
123             if (event) {
124               console.log('reason:' + event.renderExitReason);
125             }
126           })
127       }
128     }
129   }
130   ```
131
1324. 可通过[onRenderProcessNotResponding](../reference/apis-arkweb/arkts-basic-components-web-events.md#onrenderprocessnotresponding12)、[onRenderProcessResponding](../reference/apis-arkweb/arkts-basic-components-web-events.md#onrenderprocessresponding12)来监听渲染进程的无响应状态。
133
134   当Web组件无法处理输入事件，或未能在预期时间内导航至新URL时，系统会判定网页进程为无响应状态，并触发onRenderProcessNotResponding回调。在网页进程持续无响应期间，该回调可能反复触发，直至进程恢复至正常运行状态，此时将触发onRenderProcessResponding回调。
135
136   ```ts
137   // xxx.ets
138   import { webview } from '@kit.ArkWeb';
139
140   @Entry
141   @Component
142   struct WebComponent {
143     controller: webview.WebviewController = new webview.WebviewController();
144
145     build() {
146       Column() {
147         Web({ src: 'www.example.com', controller: this.controller })
148           .onRenderProcessNotResponding((data) => {
149             console.log("onRenderProcessNotResponding: [jsStack]= " + data.jsStack +
150               ", [process]=" + data.pid + ", [reason]=" + data.reason);
151           })
152       }
153     }
154   }
155   ```
156
157   ```ts
158   // xxx.ets
159   import { webview } from '@kit.ArkWeb';
160
161   @Entry
162   @Component
163   struct WebComponent {
164     controller: webview.WebviewController = new webview.WebviewController();
165
166     build() {
167       Column() {
168         Web({ src: 'www.example.com', controller: this.controller })
169           .onRenderProcessResponding(() => {
170             console.log("onRenderProcessResponding again");
171           })
172       }
173     }
174   }
175   ```
176
1775. [Web组件](../reference/apis-arkweb/arkts-basic-components-web.md)创建参数涵盖了多进程模型的运用。其中，sharedRenderProcessToken标识了当前Web组件所指定的共享渲染进程的token。在多渲染进程模式下，拥有相同token的Web组件将优先尝试重用与该token绑定的渲染进程。token与渲染进程的绑定关系，在渲染进程的初始化阶段形成。一旦渲染进程不再关联任何Web组件，它与token的绑定关系将被解除。
178
179   ```ts
180   // xxx.ets
181   import { webview } from '@kit.ArkWeb';
182
183   @Entry
184   @Component
185   struct WebComponent {
186     controller1: webview.WebviewController = new webview.WebviewController();
187     controller2: webview.WebviewController = new webview.WebviewController();
188
189     build() {
190       Column() {
191         Web({ src: 'www.example.com', controller: this.controller1, sharedRenderProcessToken: "111" })
192         Web({ src: 'www.w3.org', controller: this.controller2, sharedRenderProcessToken: "111" })
193       }
194     }
195   }
196   ```