1# ArkWeb Process 2 3ArkWeb is a multi-process model, which consists of the application process, Web rendering process, Web GPU process, Web incubation process, and Foundation process. 4 5> **NOTE** 6> 7> The Web kernel does not limit the allocated memory size. Theoretically, the memory size can be infinite until it is released by the resource management module. 8 9**Figure 1** ArkWeb process model 10 11 12 13- Web-related threads in the application process (unique for the application) 14 15 - The application process is the main process, which includes the network thread, video thread, audio thread, and I/O thread. 16 17 - Processes application APIs and callbacks of the **Web** component, and provides functionalities that require interaction with other system services, such as network requests and media services. 18 19- Foundation process (unique in the system) 20 21 Receives requests from the application process to incubate processes and manages the binding relationship between the application process and Web rendering process. 22 23- Web incubation process (unique in the system) 24 25 - Receives requests from the Foundation process and incubates the Web rendering and Web GPU processes. 26 27 - Processes privilege dropping using security sandbox and pre-loads dynamic libraries after incubation to improve performance. 28 29- Web rendering process (shared or independent processes can be specified for multiple **Web** instances) 30 31 - Runs the Web rendering process engine, which implements HTML parsing, typesetting, drawing, and rendering. 32 33 - Runs the ArkWeb execution engine, which executes JavaScript and Web Assembly. 34 35 - Provides APIs for applications to choose whether to share rendering processes among multiple **Web** instances, meeting requirements on security, stability, and memory usage in different scenarios. 36 37 - Default policy: Share rendering processes on mobile devices to save memory, and use independent rendering processes on 2-in-1 devices to improve security and stability. 38 39- Web GPU process (unique for an application) 40 41 Responsible for interaction with GPU and RenderService, such as rasterization and composition for display. Improves the stability and security of the application process. 42 431. You can use [setRenderProcessMode](../reference/apis-arkweb/js-apis-webview.md#setrenderprocessmode12) to set the rendering process mode to single-process or multi-process. 44 45 By default, a mobile device uses single-process rendering, and a 2-in-1 device uses multi-process rendering. You can call [getRenderProcessMode](../reference/apis-arkweb/js-apis-webview.md#getrenderprocessmode12) to obtain the current rendering process mode. The value **0** means the single-process rendering, and the value **1** means the multi-process rendering. If the obtained value is not included in the enumerated values of [RenderProcessMode](../reference/apis-arkweb/js-apis-webview.md#renderprocessmode12), the multi-process rendering mode is used by default. 46 47 ```ts 48 // xxx.ets 49 import { webview } from '@kit.ArkWeb'; 50 import { BusinessError } from '@kit.BasicServicesKit'; 51 52 @Entry 53 @Component 54 struct WebComponent { 55 controller: webview.WebviewController = new webview.WebviewController(); 56 57 build() { 58 Column() { 59 Button('getRenderProcessMode') 60 .onClick(() => { 61 let mode = webview.WebviewController.getRenderProcessMode(); 62 console.log("getRenderProcessMode: " + mode); 63 }) 64 Button('setRenderProcessMode') 65 .onClick(() => { 66 try { 67 webview.WebviewController.setRenderProcessMode(webview.RenderProcessMode.MULTIPLE); 68 } catch (error) { 69 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 70 } 71 }) 72 Web({ src: 'www.example.com', controller: this.controller }) 73 } 74 } 75 } 76 ``` 77 782. You can use [terminateRenderProcess](../reference/apis-arkweb/js-apis-webview.md#terminaterenderprocess12) to stop the rendering process. If a rendering process is not started or has been destroyed, this operation does not have any impact. However, destroying a rendering process affects all other instances associated with it. 79 80 ```ts 81 // xxx.ets 82 import { webview } from '@kit.ArkWeb'; 83 import { BusinessError } from '@kit.BasicServicesKit'; 84 85 @Entry 86 @Component 87 struct WebComponent { 88 controller: webview.WebviewController = new webview.WebviewController(); 89 90 build() { 91 Column() { 92 Button('terminateRenderProcess') 93 .onClick(() => { 94 let result = this.controller.terminateRenderProcess(); 95 console.log("terminateRenderProcess result: " + result); 96 }) 97 Web({ src: 'www.example.com', controller: this.controller }) 98 } 99 } 100 } 101 ``` 102 1033. You can use [onRenderExited](../reference/apis-arkweb/ts-basic-components-web.md#onrenderexited9) to listen for the exit event of the rendering process to obtain the specific exit cause (such as OOM, crash, or normal exit). Multiple **Web** components may share the same rendering process. Therefore, each time the rendering process exits, each affected **Web** component triggers a corresponding callback. 104 105 ```ts 106 // xxx.ets 107 import { webview } from '@kit.ArkWeb'; 108 109 @Entry 110 @Component 111 struct WebComponent { 112 controller: webview.WebviewController = new webview.WebviewController(); 113 114 build() { 115 Column() { 116 Web({ src: 'chrome://crash/', controller: this.controller }) 117 .onRenderExited((event) => { 118 if (event) { 119 console.log('reason:' + event.renderExitReason); 120 } 121 }) 122 } 123 } 124 } 125 ``` 126 1274. You can use [onRenderProcessNotResponding](../reference/apis-arkweb/ts-basic-components-web.md#onrenderprocessnotresponding12) and [onRenderProcessResponding](../reference/apis-arkweb/ts-basic-components-web.md#onrenderprocessresponding12) to listen for the unresponsive state of a rendering process. 128 129 When a **Web** component cannot process an input event or fails to navigate to a new URL within the expected time, the system determines that the web page process does not respond and triggers the **onRenderProcessNotResponding** callback. When a web page process does not respond for a long time, this callback may be triggered repeatedly until the process is restored to the normal running state. In this case, the **onRenderProcessResponding** callback is triggered. 130 131 ```ts 132 // xxx.ets 133 import { webview } from '@kit.ArkWeb'; 134 135 @Entry 136 @Component 137 struct WebComponent { 138 controller: webview.WebviewController = new webview.WebviewController(); 139 140 build() { 141 Column() { 142 Web({ src: 'www.example.com', controller: this.controller }) 143 .onRenderProcessNotResponding((data) => { 144 console.log("onRenderProcessNotResponding: [jsStack]= " + data.jsStack + 145 ", [process]=" + data.pid + ", [reason]=" + data.reason); 146 }) 147 } 148 } 149 } 150 ``` 151 152 ```ts 153 // xxx.ets 154 import { webview } from '@kit.ArkWeb'; 155 156 @Entry 157 @Component 158 struct WebComponent { 159 controller: webview.WebviewController = new webview.WebviewController(); 160 161 build() { 162 Column() { 163 Web({ src: 'www.example.com', controller: this.controller }) 164 .onRenderProcessResponding(() => { 165 console.log("onRenderProcessResponding again"); 166 }) 167 } 168 } 169 } 170 ``` 171 1725. Parameters of the [Web component](../reference/apis-arkweb/ts-basic-components-web.md#web) cover the use of the multi-process model. **sharedRenderProcessToken** identifies the token of a shared rendering process specified by the current **Web** component. In multi-rendering process mode, **Web** components with the same token preferentially attempt to reuse the rendering process bound to the token. The token and the rendering process are bound in the initialization phase of the rendering process. Once a rendering process is no longer associated with any **Web** component, its binding to the token is removed. 173 174 ```ts 175 // xxx.ets 176 import { webview } from '@kit.ArkWeb'; 177 178 @Entry 179 @Component 180 struct WebComponent { 181 controller: webview.WebviewController = new webview.WebviewController(); 182 183 build() { 184 Column() { 185 Web({ src: 'www.example.com', controller: this.controller, sharedRenderProcessToken: "111" }) 186 Web({ src: 'www.w3.org', controller: this.controller, sharedRenderProcessToken: "111" }) 187 } 188 } 189 } 190 ``` 191