1# ArrayBuffer Object
2
3The ArrayBuffer contains a native memory. Similar to common objects, JS object shells need to be copied and transferred through serialization and deserialization. However, the native memory has two transmission modes: copy and transfer.
4
5If copy is used during transmission, deep copy (recursive traversal) is required. After transmission, the two threads can independently access the ArrayBuffer. The following figure shows the communication process.
6
7![copy_transfer](figures/copy_transfer.png)
8
9If the transfer mode is used, the original thread cannot use the ArrayBuffer object. In cross-thread scenarios, only the JS shell needs to be rebuilt, and the native memory does not need to be copied, improving efficiency. The following figure shows the communication process.
10
11![transfer](figures/transfer.png)
12
13ArrayBuffer can be used to represent resources such as images. During application development, image processing is required (for example, the brightness, saturation, and size of an image need to be adjusted). To avoid blocking the UI main thread, you can transfer the image to a subthread to perform these operations. The transfer mode has higher performance. However, the original thread cannot access the ArrayBuffer object. If both threads need to access the ArrayBuffer object, the copy mode must be used. Otherwise, the transfer mode is recommended to improve performance.
14
15The following describes how to transfer an image to a subthread by copying and transferring the image.
16
17## ArrayBuffer copy transfer mode
18
19In ArkTS, when the TaskPool transfers ArrayBuffer data, the transfer mode is used by default. You can call the setTransferList () API to specify the transfer mode as the transfer mode for some data and switch the copy mode for other data.
20
21First, implement an interface that needs to be executed in a task to process ArrayBuffer.
22
23Then, the ArrayBuffer data is transferred to the task in copy mode, and the ArrayBuffer is processed in the task.
24
25Finally, the UI main thread receives the ArrayBuffer data returned after the task is executed and combines the data for display.
26
27```ts
28// Index.ets
29import { taskpool } from '@kit.ArkTS';
30import { BusinessError } from '@kit.BasicServicesKit';
31
32@Concurrent
33function adjustImageValue(arrayBuffer: ArrayBuffer): ArrayBuffer {
34  // Perform operations on arrayBuffer.
35  return arrayBuffer; // The return value is transferred by default.
36}
37
38function createImageTask(arrayBuffer: ArrayBuffer, isParamsByTransfer: boolean): taskpool.Task {
39  let task: taskpool.Task = new taskpool.Task(adjustImageValue, arrayBuffer);
40  if (!isParamsByTransfer) {// Whether to use the transfer mode
41    // Transfer an empty array []. All arrayBuffer parameters are transferred in copy mode.
42    task.setTransferList([]);
43  }
44  return task;
45}
46
47@Entry
48@Component
49struct Index {
50  @State message: string = 'Hello World';
51
52  build() {
53    RelativeContainer() {
54      Text(this.message)
55        .id('HelloWorld')
56        .fontSize(50)
57        .fontWeight(FontWeight.Bold)
58        .alignRules({
59          center: { anchor: '__container__', align: VerticalAlign.Center },
60          middle: { anchor: '__container__', align: HorizontalAlign.Center }
61        })
62        .onClick(() => {
63          let taskNum = 4;
64          let arrayBuffer = new ArrayBuffer(1024 * 1024);
65          let taskPoolGroup = new taskpool.TaskGroup();
66          // Create a certain number of tasks based on the input taskNum.
67          for (let i: number = 0; i < taskNum; i++) {
68            let arrayBufferSlice: ArrayBuffer = arrayBuffer.slice(arrayBuffer.byteLength / taskNum * i, arrayBuffer.byteLength / taskNum * (i + 1));
69            // Use the copy method to transmit the ArrayBuffer object. Therefore, isParamsByTransfer is false.
70            taskPoolGroup.addTask(createImageTask(arrayBufferSlice, false));
71          }
72          // Execute the task.
73          taskpool.execute(taskPoolGroup).then((data) => {
74            // Return the result. Combine the arrays to obtain the final result.
75          }).catch((e: BusinessError) => {
76            console.error(e.message);
77          })
78        })
79    }
80    .height('100%')
81    .width('100%')
82  }
83}
84```
85
86## ArrayBuffer transfer mode
87
88In the TaskPool, the transfer mode is used by default when the ArrayBuffer data is transferred. The original thread cannot use the ArrayBuffer data transferred to the subthread. Therefore, based on the preceding example, you can remove the task.setTransferList interface, that is, set the second parameter of createImageTask to true.
89