Parallelization Performance Optimization

Currently, most apps require performance optimization, and parallelization is an effective measure to optimize performance. Through proper design and reconstruction, parallelization enables tasks that are originally executed in serial in the main thread to be executed in parallel, improving app performance and processing efficiency. Multiple top apps have been reconstructed for parallelization, significantly improving performance.

Currently, there are two main implementation solutions for parallelization: One is to use TaskPool or Worker to create child threads and migrate time-consuming logic to the child threads for execution. The other is to use Sendable to accelerate data transfer and avoid time-consuming data copy between threads.

This topic describes the process and approach of parallelization reconstruction in actual scenarios, helping you optimize app performance.

As shown in the following figure, in the original scenario, the service logic has three main class structures, which hold each other. The LightArtUIComponent component can obtain the context description document and call the methods in the document. LightArtViewModel uses the @Observed decorator, which cannot be executed in the child thread. As a result, parallelization is difficult to implement.

The app service logic is as follows: First, the LightArtDocument object is generated, which is used as the context of the component tree and contains information such as the tree structure and methods. Then, a tree is recursively generated through the nodes and methods recorded in LightArtDocument, that is, data is filled in LightArtUIComponent to form a data model. Finally, LightArtViewModel is recursively generated. Therefore, mutual data holding and coupling between data and UI exist in the data structure.

To rectify the preceding three major structures, you need to migrate the data generation part to the child thread (download and parse the data, and encapsulate the data into sendable data in the child thread), and assemble the data to the UI for rendering in the main thread.

The following is the pseudocode for the modification:

// LightArt.ets
import { lang } from '@kit.ArkTS';

/*
 * The data to be shared is encapsulated into four Sendable classes: LightArtDataModel,
 * LightArtDataDocument, LightArtViewModel, and LightArtDataComponent.
 * UI data is encapsulated into the UI class.
 * The data of the Sendable class is generated in a child thread.
 */
@Sendable
class LightArtDataModel {}

@Sendable
class LightArtDataDocument {}

@Sendable
class LightArtViewModel {}

class UI {}

interface ISerializableType<T> extends lang.ISendable {}

@Sendable
class LightArtDataComponent {
  public dataModel?: LightArtDataModel;
  public document?: LightArtDataDocument;
  public parent?: LightArtDataComponent;
  public components?: LightArtDataComponent;
  // ...
  public fromJson(jsonObj: object) {
    // ...
  }

  public mergeFrom(jsonObj: object) {
    // ...
  }
}

/*
 * Assemble the Sendable class and the UI data class into LightArtUIComponent.
 * LightArtUIComponent assembles the data based on the data returned by the child thread.
 */
class LightArtUIComponent {
  public data?: LightArtDataComponent;
  public model?: LightArtViewModel;
  public parent?: LightArtUIComponent;
  public components?: LightArtUIComponent;
  // ...
  public uiData?: UI;
}

// Fill in the data to LightArtDataComponent.
@Sendable
export class LightArtDataComponentType implements ISerializableType<LightArtDataComponent> {
  public fromJson(jsonObj: object): LightArtDataComponent {
    let ans = new LightArtDataComponent();
    ans.mergeFrom(jsonObj);
    return ans;
  }  
  public static instance: LightArtDataComponentType = new LightArtDataComponentType();
}

Before the optimization, it takes more than 130 ms for data downloading and parsing and the Model class data generation.

After the optimization, the data downloading and parsing and Model data class generation are all performed in the child thread. The time consumed by the main thread is reduced to 40 ms, and the total time is reduced by more than 90 ms.

This case describes how to use global object information to call the network library to request network data in the child thread range 2. The following uses Axios (a promise-based network request library, which needs to be installed before use) as an example to describe how to perform parallelization reconstruction.

1. Extract and encapsulate the network library configuration into a Sendable class.

   // AxiosConfig.ets
   import { collections, lang } from '@kit.ArkTS';
   import { AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';
   
   // Transforming the Request Interceptor into a Sendable interface
   export interface IRequestInterceptor extends lang.ISendable {
     handle(data: InternalAxiosRequestConfig<object>): InternalAxiosRequestConfig<object> |
       Promise<InternalAxiosRequestConfig<object>>;
     handleError(error: object): object;
   }
   
   // Transforming the Response Interceptor into a Sendable interface
   export interface IResponseInterceptor extends lang.ISendable {
     handle(data: AxiosResponse<object, object>): AxiosResponse<object, object> |
       Promise<AxiosResponse<object, object>>;
     handleError(error: object): object;
   }
   
   // Transforming the Auth into a Sendable interface
   export interface IAuth extends lang.ISendable {
     username: string;
     password: string;
   }
   
   // Transforming the HttpProxy into a Sendable interface
   export interface IHttpProxy extends lang.ISendable {
     protocol: string;
     host: string;
     port: number;
     auth: IAuth;
     exclusionList: collections.Array<string>;
   }
   
   // Encapsulate Axios configuration, which needs to be initialized on the main thread
   @Sendable
   export class AxiosGlobalConfig {
     private constructor() {
       this.requestInterceptors = new collections.Array<IRequestInterceptor>();
       this.responseInterceptors = new collections.Array<IResponseInterceptor>();
       this.headers = new collections.Map<string, string>();
     }
   
     public baseURL?: string;
     public headers: collections.Map<string, string>;
     public timeout?: number;
     public proxy?: IHttpProxy;
     public xsrfCookieName?: string;
     public xsrfHeaderName?: string;
     public maxContentLength?: number;
     public maxBodyLength?: number;
     // ...
   
     public requestInterceptors: collections.Array<IRequestInterceptor>;
     public responseInterceptors: collections.Array<IResponseInterceptor>;
     public static instance: AxiosGlobalConfig = new AxiosGlobalConfig();
   }

2. Generates an Axios object based on the configuration class.

   // AxiosAdapter.ets
   import axios, { Axios, AxiosInstance, AxiosProxyConfig, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';
   import { AxiosGlobalConfig } from './AxiosConfig';
   
   // Initialize axios object according to configuration and return the object.
   export function getAxios(): Axios {
     let instance: AxiosInstance = axios.create();
     if (AxiosGlobalConfig.instance.baseURL) {
       instance.defaults.url = AxiosGlobalConfig.instance.baseURL;
     }
     for (let entry of AxiosGlobalConfig.instance.headers.entries()) {
       instance.defaults.headers[entry[0]] = entry[1];
     }
     if (AxiosGlobalConfig.instance.timeout) {
       instance.defaults.timeout = AxiosGlobalConfig.instance.timeout;
     }
     if (AxiosGlobalConfig.instance.proxy) {
       let config: AxiosProxyConfig = {
         host: AxiosGlobalConfig.instance.proxy.host,
         port: AxiosGlobalConfig.instance.proxy.port,
         exclusionList: []
       };
       instance.defaults.proxy = config;
     }
     for (let interceptor of AxiosGlobalConfig.instance.requestInterceptors.values()) {
       axios.interceptors.request.use((config: InternalAxiosRequestConfig<object>): InternalAxiosRequestConfig<object> |
         Promise<InternalAxiosRequestConfig<object>> => interceptor.handle(config),
         (error: object) => interceptor.handleError(error));
     }
     for (let interceptor of AxiosGlobalConfig.instance.responseInterceptors.values()) {
       axios.interceptors.response.use((response: AxiosResponse<object, object>): AxiosResponse<object, object> |
         Promise<AxiosResponse<object, object>> => interceptor.handle(response),
         (error: object) => interceptor.handleError(error));
     }
     return axios;
   }

3. Reconstruct the related classes to be sendable.

   // Interceptor.ets
   import { AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';
   import { IRequestInterceptor, IResponseInterceptor } from './AxiosConfig';
   
   // Request interceptor encapsulated as sendable
   @Sendable
   export class RequestInterceptor implements IRequestInterceptor {
     handle(data: InternalAxiosRequestConfig<object>): InternalAxiosRequestConfig<object> |
       Promise<InternalAxiosRequestConfig<object>> {
       return data;
     }
     handleError(error: object): object {
       return error;
     }
   }
   
   // Response interceptor encapsulated as sendable
   @Sendable
   export class ResponseInterceptor implements IResponseInterceptor {
     handle(data: AxiosResponse<object, object>): AxiosResponse<object, object> |
       Promise<AxiosResponse<object, object>> {
       return data;
     }
     handleError(error: object): object {
       return error;
     }
   }

4. Execute the related logic in the child thread.

   Use TaskPool to initialize Axios in the main thread and execute related logic in child threads.

   // Sample7.ets
   import { taskpool } from '@kit.ArkTS';
   import { AxiosError, AxiosResponse } from '@ohos/axios';
   import { getAxios } from './AxiosAdapter';
   import { AxiosGlobalConfig, IRequestInterceptor, IResponseInterceptor } from './AxiosConfig';
   import { RequestInterceptor, ResponseInterceptor } from './Interceptor';
   
   function initAxios(url: string): void {
     // init axios config
     AxiosGlobalConfig.instance.baseURL = url;
     let requestInterceptors: IRequestInterceptor = new RequestInterceptor();
     let responseInterceptors: IResponseInterceptor = new ResponseInterceptor();
     AxiosGlobalConfig.instance.requestInterceptors.push(requestInterceptors);
     AxiosGlobalConfig.instance.responseInterceptors.push(responseInterceptors);
     AxiosGlobalConfig.instance.timeout = 1000;
   }
   
   @Concurrent
   function testAxios(config: AxiosGlobalConfig) {
     // taskpool function
     AxiosGlobalConfig.instance = config;
     let adapter = getAxios();
     adapter.get(AxiosGlobalConfig.instance.baseURL).then((res: AxiosResponse) => {
       console.log('testAxios: ' + JSON.stringify(res.data));
     }).catch((error: AxiosError) => {
       console.error('error: ' + error.message);
     });
   }
   
   function demo() {
     let url = ''; // internet url
     initAxios(url);
     for (let i = 0; i < 5; i++) {
       // TaskPool thread use Axios
       let task: taskpool.Task = new taskpool.Task(testAxios, AxiosGlobalConfig.instance);
       taskpool.execute(task);
     }
   }
   
   @Entry
   @Component
   struct Sample7 {
     @State message: string = 'Hello World';
   
     build() {
       Row() {
         Column({ space: 12 }) {
           Button('test')
             .height(40)
             .width('100%')
             .onClick(() => {
               demo();
             })
         }
         .height('100%')
         .width('100%')
         .padding(16)
         .justifyContent(FlexAlign.Center)
       }
       .height('100%')
     }
   }