Atomics - Guide rapide

Atomique

L'Atomics est un objet en JavaScript qui fournit des opérations atomiques à effectuer en tant que méthodes statiques. Tout comme les méthodes de l'objet Math, les méthodes et les propriétés d'Atomics sont également statiques. Atomics sont utilisés avec les objets SharedArrayBuffer.

Les opérations Atomic sont installées sur un module Atomics. Contrairement à d'autres objets globaux, Atomics n'est pas un constructeur. Atomics ne peut pas être utilisé avec un nouvel opérateur ou peut être appelé en tant que fonction.

Opérations atomiques

Les opérations atomiques sont ininterrompues.

Lorsque la mémoire est partagée, plusieurs threads peuvent lire ou écrire des données existantes dans la mémoire. Donc, si des données sont modifiées, il y aura une perte de données. Les opérations atomiques s'assurent que les valeurs prédites (données) sont écrites et lues avec précision. Les opérations atomiques ne démarreront pas tant que l'opération en cours ne sera pas terminée, il n'y a donc aucun moyen de modifier une donnée existante.

Exemple

Voici le code démontrant l'utilisation de JavaScript Atomics Operation -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

Atomique

Opérations atomiques

Les opérations atomiques sont ininterrompues.

Exemple

Voici le code démontrant l'utilisation de JavaScript Atomics Operation -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

addajoute une valeur fournie à une position donnée dans le tableau. Il renvoie l'ancienne valeur à cette position. Cette opération atomique garantit qu'aucune autre écriture ne peut avoir lieu tant que la valeur modifiée n'est pas réécrite.

Syntaxe

Atomics.add(typedArray, index, value)

Paramètres

typedArray est le tableau typé entier.
index est la position dans le tableau de types.
value être ajouté.

Revenir

Renvoie l'ancienne valeur à une position donnée.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

andcalcule le ET au niveau du bit avec une valeur fournie à une position donnée dans le tableau. Il renvoie l'ancienne valeur à cette position. Cette opération atomique garantit qu'aucune autre écriture ne peut avoir lieu tant que la valeur modifiée n'est pas réécrite.

Syntaxe

Atomics.and(typedArray, index, value)

Paramètres

typedArray est le tableau typé entier.
index est la position dans le tableau de types.
value avec quel ET au niveau du bit à calculer.

Revenir

Renvoie l'ancienne valeur à une position donnée.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.and(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            //6 & 2 = 110 & 010 = 010 = 2
            container.innerHTML = Atomics.and(arr, 0, 2) + '<br/>'+ Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

compareExchangeLa méthode compare et échange une valeur de remplacement si la valeur donnée n'est pas la même que l'ancienne valeur. Il renvoie l'ancienne valeur à cette position. Cette opération atomique garantit qu'aucune autre écriture ne peut avoir lieu tant que la valeur modifiée n'est pas réécrite.

Syntaxe

Atomics.compareExchange(typedArray, index, expectedValue, replacementValue)

Paramètres

typedArray est le tableau typé entier.
index est la position dans le tableau de types.
expectedValue pour vérifier l'égalité.
replacementValue échanger.

Revenir

Renvoie l'ancienne valeur à une position donnée.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.compareExchange(arr, 0, 6, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.compareExchange(arr, 0, 6, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

exchangeLa méthode échange une valeur donnée à une position donnée d'un tableau. Il renvoie l'ancienne valeur à cette position. Cette opération atomique garantit qu'aucune autre écriture ne peut avoir lieu tant que la valeur modifiée n'est pas réécrite.

Syntaxe

Atomics.exchange(typedArray, index, value)

Paramètres

typedArray est le tableau typé entier.
index est la position dans le tableau de types.
value échanger.

Revenir

Renvoie l'ancienne valeur à une position donnée.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.exchange(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.exchange(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

isLockFreeest utilisée pour déterminer si les verrous doivent être utilisés ou non pour les opérations atomiques. Si la taille donnée est l'une des propriétés TypedArray.BYTES_PER_ELEMENT des types entiers TypedArray, elle renvoie true. TypedArray.BYTES_PER_ELEMENT représente la taille en octets de chaque élément d'un tableau typé.

Syntaxe

Atomics.isLockFree(size)

Paramètres

size à archiver en octets.

Revenir

Renvoie true si l'opération est sans verrouillage comme false.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.isLockFree(1)</p>
      <p>Atomics.isLockFree(3)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            // Int8Array.BYTES_PER_ELEMENT = 1
            container.innerHTML = Atomics.isLockFree(Int8Array.BYTES_PER_ELEMENT) + '<br/>' + Atomics.isLockFree(3);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

load La méthode renvoie une valeur à une position donnée dans le tableau.

Syntaxe

Atomics.load(typedArray, index)

Paramètres

typedArray est le tableau typé entier.
index est la position dans le tableau de types.

Revenir

Renvoie la valeur à une position donnée.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

notifyLa méthode avertit l'agent en attente de se réveiller. notifier ne peut fonctionner qu'avec Int32Array créé à l'aide de SharedArrayBuffer. Il renvoie 0 en cas d'utilisation d'un objet ArrayBuffer non partagé.

Syntaxe

Atomics.notify(typedArray, index, count)

Paramètres

typedArray est un Int32Array partagé.
index est la position sur laquelle se réveiller dans le tableau de types.
count est le nombre d'agents dormants à notifier.

Revenir

Renvoie le nombre d'agents réveillés.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.store(arr, 0, 5)</p>
      <p>Atomics.notify(arr, 0, 1)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(16);
            var arr = new Int32Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;            
            container.innerHTML = Atomics.store(arr, 0, 5) + '<br>' + Atomics.notify(arr, 0, 1);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

orcalcule le OU au niveau du bit avec une valeur fournie à une position donnée dans le tableau. Il renvoie l'ancienne valeur à cette position. Cette opération atomique garantit qu'aucune autre écriture ne peut avoir lieu tant que la valeur modifiée n'est pas réécrite.

Syntaxe

Atomics.or(typedArray, index, value)

Paramètres

typedArray est le tableau typé entier.
index est la position dans le tableau de types.
value avec quel OU au niveau du bit à calculer.

Revenir

Renvoie l'ancienne valeur à une position donnée.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.or(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            //6 | 2 = 110 | 010 = 110 = 6
            container.innerHTML = Atomics.or(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

storeLa méthode stocke une valeur à l'emplacement fourni dans un tableau et la renvoie. Cette opération atomique garantit qu'aucune autre écriture ne peut avoir lieu tant que la valeur modifiée n'est pas réécrite.

Syntaxe

Atomics.store(typedArray, index, value)

Paramètres

typedArray est le tableau typé entier.
index est la position dans le tableau de types où la valeur à stocker.
value à stocker.

Revenir

Renvoie la valeur stockée à une position donnée.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.store(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;           
            container.innerHTML = Atomics.store(arr, 0, 2) + '<br/>'
            + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

subLa méthode soustrait une valeur fournie à une position donnée dans le tableau. Il renvoie l'ancienne valeur à cette position. Cette opération atomique garantit qu'aucune autre écriture ne peut avoir lieu tant que la valeur modifiée n'est pas réécrite.

Syntaxe

Atomics.sub(typedArray, index, value)

Paramètres

typedArray est le tableau typé entier.
index est la position dans le tableau de types.
value à soustraire.

Revenir

Renvoie l'ancienne valeur à une position donnée.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.sub(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            //6 - 2 = 4
            container.innerHTML = Atomics.sub(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.

xorcalcule le XOR au niveau du bit avec une valeur fournie à une position donnée dans le tableau. Il renvoie l'ancienne valeur à cette position. Cette opération atomique garantit qu'aucune autre écriture ne peut avoir lieu tant que la valeur modifiée n'est pas réécrite.

Syntaxe

Atomics.xor(typedArray, index, value)

Paramètres

typedArray est le tableau typé entier.
index est la position dans le tableau de types.
value avec quel XOR au niveau du bit à calculer.

Revenir

Renvoie l'ancienne valeur à une position donnée.

Des exceptions

TypeError dans le cas où le tableau passé n'est pas un tableau de type entier.
RangeError si l'index passé est hors limite dans le tableau typé.

Exemple

Voici le code pour implémenter JavaScript Atomics -

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.xor(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            //6 xor 2 = 110 xor 010 = 100 = 4
            container.innerHTML = Atomics.xor(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

Production

Vérifiez le résultat.