ArkWeb process

#harmonyosnext

ArkWeb Multi-Process Model and Practical Usage

ArkWeb Process Model Overview

ArkWeb operates on a multi-process model, which includes the following processes:

Application Process: The main process that contains threads for networking, video, audio, and I/O operations. It handles northbound interfaces and callbacks for Web components, as well as interactions with other system services for network requests and media services.
Web Rendering Process: Responsible for running the Web rendering engine (HTML parsing, layout, drawing, and rendering) and the ArkWeb execution engine (JavaScript and WebAssembly). It provides options for applications to choose whether multiple Web instances share the same rendering process, balancing security, stability, and memory usage.
Web GPU Process: Manages rasterization, compositing, and interactions with GPU and RenderService. It enhances the stability and security of the application process.
Web Incubation Process: Executes the incubation of Web rendering and Web GPU processes, handling security sandboxing, preloading dynamic libraries, and other performance optimizations.
Foundation Process: Manages the binding relationships between application processes and Web rendering processes, and handles requests for incubating processes.

Key Features and Practical Usage

Memory Management

The Web kernel does not have explicit memory size constraints. It can theoretically grow until resource management intervenes.

Process-Specific Features

Application Process: Contains unique threads for network, video, audio, and I/O operations.
Foundation Process: System-wide unique process for managing incubation requests and process bindings.
Web Incubation Process: System-wide unique process for executing the incubation of Web rendering and Web GPU processes.
Web Rendering Process: Can be shared or independent across multiple Web instances, based on application requirements.
Web GPU Process: Unique to each application for GPU-related operations.

Practical Code Examples

Setting and Getting Render Process Mode

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('Get Render Process Mode')
        .onClick(() => {
          let mode = webview.WebviewController.getRenderProcessMode();
          console.log("Render Process Mode: " + mode);
        })
      Button('Set Render Process Mode')
        .onClick(() => {
          try {
            webview.WebviewController.setRenderProcessMode(webview.RenderProcessMode.MULTIPLE);
          } catch (error) {
            console.error(`Error Code: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'https://www.example.com', controller: this.controller })
    }
  }
}

Terminating the Render Process

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('Terminate Render Process')
        .onClick(() => {
          let result = this.controller.terminateRenderProcess();
          console.log("Terminate Render Process Result: " + result);
        })
      Web({ src: 'https://www.example.com', controller: this.controller })
    }
  }
}

Listening for Render Process Exit Events

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com', controller: this.controller })
        .onRenderExited((event) => {
          if (event) {
            console.log('Render Exit Reason: ' + event.renderExitReason);
          }
        })
    }
  }
}

Monitoring Render Process Responsiveness

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com', controller: this.controller })
        .onRenderProcessNotResponding((data) => {
          console.log("Render Process Not Responding: JS Stack = " + data.jsStack +
            ", Process ID = " + data.pid + ", Reason = " + data.reason);
        })
        .onRenderProcessResponding(() => {
          console.log("Render Process Responding Again");
        })
    }
  }
}

Using Shared Render Process Tokens

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com', controller: this.controller, sharedRenderProcessToken: "111" })
      Web({ src: 'https://www.w3.org', controller: this.controller, sharedRenderProcessToken: "111" })
    }
  }
}

DEV Community