What is Int8Array in JavaScript

Introduction to shared memory in JavaScript

Shared memory is an advanced function of JavaScript that threads (parts of a process that are running at the same time) can use. Sharing the storage means no trouble passing updated data between threads and all threads can access and update the same data in shared memory.

Doesn't that sound good? Almost. In this post we shall see How to use shared memory in JavaScript and how you decide if you really want that.

Advantages and disadvantages of shared memory

We use Web workers to Create threads in JavaScript. With the Web Workers API we can create worker threads that can be used Run code in the background so that the main thread can continue running, potentially processing UI events, and ensuring that the UI does not freeze.

Worker threads run concurrently with the main thread and with each other. Such simultaneous execution of different parts of a task saves time. They finish faster, but they also have their own problems.

Make sure every thread calls up the necessary resources and communicates with each other promptly is a task in itself where an incident can lead to a surprising outcome. Or when One thread changes data and another reads it at the same timeWhat do you think the other thread will see? The updated or the old data?

However, web workers are not that easy to screw up. While communicating through messages, they use the data that they send to each other not original, but a copy'That means they don't share the same dates. you Passing copies of data to each other if needed.

Sharing is important, however, and multiple threads may need to access and modify the same data at the same time. So, Prohibition of parts is a big no. This is where the object comes into the picture. It will allow us Share binary data between multiple threads.

The object

Instead of passing the copies of data between threads, we have to Copies of the object. An object points to the memory in which the data is stored.

So even with the copies of are passed between threads All still point to the same memory where the original data is stored. So the threads can View and update the data in the same memory.

Web workers without shared memory

To see how a web worker works without using shared memory, we have Create a worker thread and Pass data.

The file contains the Main script in one day as you can see below:

const w = new worker ('worker.js'); var n = 9; w.postMessage (n);

The file carries the Worker script:

onmessage = (e) => console.group ('[worker]'); console.log ('Received data from main thread:% i', e.data); console.groupEnd ();

With the code above, we get the following Output in the console:

[Worker] Received data from main thread: 9

You can read my above post on Web Workers for the full code explanation for the snippets above.

For now, just remember that this is data back and forth between threads Using the method. The data are on the other hand from the event handler, as the value of the event property.

Well if we Change the dates does it appear updated on the receiving side? Just take a look:

const w = new worker ('worker.js'); var n = 9; w.postMessage (n); n = 1;

As expected Have data Not has been updated:

[Worker] Received data from main thread: 9

Why should it be like that at all? It is Only a clone from the main script sent to the worker.

Web workers With shared memory

Now we will use the object in the same example. We can create a new example of Using the keyword. The constructor has one parameter. a Length value in bytes, Specification of the size of the buffer.

const w = new worker ('worker.js'); buff = new SharedArrayBuffer (1); var arr = new Int8Array (Buff); / * Setting data * / arr [0] = 9; / * Sending the buffer (copy) to worker * / w.postMessage (Buff);

Notice that a object represents only a shared memory area. To see and change the binary data, We need to use an appropriate data structure (a or an object).

In the file above, a new one will only be one byte long. Then a new one, which is a type of object, is used to Set the data to “9” in the byte area provided.

onmessage = (e) => var arr = new Int8Array (e.data); console.group ('[worker]'); console.log ('Received data from main thread:% i', arr [0]); console.groupEnd ();

is also used in the worker to display the data in the buffer.

The The expected value is displayed in the console from the worker thread, that's exactly what we wanted:

[Worker] Received data from main thread: 9

Now let's Update the data on the main thread to see if the change is reflected in the worker.

const w = new Worker ('worker.js'), buff = new SharedArrayBuffer (1); var arr = new Int8Array (Buff); / * Setting data * / arr [0] = 9; / * Sending the buffer (copy) to worker * / w.postMessage (Buff); / * Change the data * / arr [0] = 1;

And as you can see below, the update reflected inside the worker!

[Worker] To get data from the main thread: 1

But so is the code must work the other way around: If the value in the worker changes first, then also needs to be updated when it is printed from the main thread.

In this case our code looks like this:

onmessage = (e) => var arr = new Int8Array (e.data); console.group ('[worker]'); console.log ('Received data from main thread:% i', arr [0]); console.groupEnd (); / * Change the data * / arr [0] = 7; / * Contribution to the main thread * / postMessage (");

The Data is changed in the worker and a A blank message is sent to the main thread signals that the data in the buffer has been changed and is ready for output by the main thread.

const w = new Worker ('worker.js'), buff = new SharedArrayBuffer (1); var arr = new Int8Array (Buff); / * Setting data * / arr [0] = 9; / * Sending the buffer (copy) to worker * / w.postMessage (Buff); / * Change the data * / arr [0] = 1; / * Print the data after the employee has changed it * / w.onmessage = (e) => console.group ('[main]'); console.log ('Got updated data from worker thread:% i', arr [0]); console.groupEnd ();

And that works too! The data in the buffer is the same as the data in the worker.

[Worker] Received data from main thread: 1 [Main] Updated data from worker thread: 7

The value appears updated in both cases; Both the main and worker threads see and change the same data.

last words

As mentioned earlier, you use shared memory in JavaScript is not without its drawbacks. It is up to the developers to ensure that the Execution proceeds as predicted and no two threads are fighting over the same dates because no one knows who will take the trophy.

If you are interested in shared memory, see the documentation for the object. The Atomics objects can help you with some difficulties, by reducing the unpredictable nature of reading / writing from shared memory.