Descubra cómo usar SharedArrayBuffer en JavaScript

Aprende a aprovechar la funcionalidad de SharedArrayBuffer para mejorar el rendimiento y la comunicación entre hilos en tus proyectos de JavaScript.

La función SharedArrayBuffer es una herramienta poderosa en JavaScript que permite a los desarrolladores compartir memoria entre diferentes hilos o procesos. Esta capacidad es especialmente útil para mejorar el rendimiento y la comunicación en aplicaciones de alto volumen de datos o con múltiples hilos.

Ejemplo 1: Suma de elementos en un array utilizando SharedArrayBuffer()

const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
const int32Array = new Int32Array(sharedArray);

// Llenar el array con valores aleatorios
for (let i = 0; i < 10; i++) {
  int32Array[i] = Math.floor(Math.random() * 100);
}

// Suma de elementos en paralelo utilizando SharedArrayBuffer()
const suma = new Promise((resolve) => {
  const worker = new Worker('worker.js', {
    args: [sharedArray],
  });

  worker.postMessage({
    type: 'sumar',
    data: int32Array,
  });

  worker.onmessage = (event) => {
    resolve(event.data);
    worker.terminate();
  };
});

// Mostrar el resultado de la suma
console.log('La suma es:', await suma);

Ejemplo 2: Transferencia de datos entre trabajadores utilizando SharedArrayBuffer()

// Worker.js
self.importScripts('postMessage.worker');

const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
const int32Array = new Int32Array(sharedArray);

const sourceData = postMessage.getData();
for (let i = 0; i < sourceData.length; i++) {
  int32Array[i] = sourceData[i];
}

postMessage({
  type: 'transferido',
  data: int32Array,
});

// main.js
const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
const int32Array = new Int32Array(sharedArray);

// Llenar el array con valores aleatorios
for (let i = 0; i < 10; i++) {
  int32Array[i] = Math.floor(Math.random() * 100);
}

const worker = new Worker('worker.js', {
  args: [sharedArray],
});

worker.postMessage({
  type: 'transferir',
  data: int32Array,
});

worker.onmessage = (event) => {
  console.log('Datos transferidos con éxito:', event.data);
  worker.terminate();
};

Ejemplo 3: Comunicación entre trabajadores utilizando SharedArrayBuffer()

// Worker1.js
self.importScripts('postMessage.worker');

const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
const int32Array = new Int32Array(sharedArray);

const sourceData = postMessage.getData();
for (let i = 0; i < sourceData.length; i++) {
  int32Array[i] = sourceData[i];
}

postMessage({
  type: 'datos',
  data: int32Array,
});

// Worker2.js
self.importScripts('postMessage.worker');

const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
const int32Array = new Int32Array(sharedArray);

const sourceData = postMessage.getData();
for (let i = 0; i < sourceData.length; i++) {
  int32Array[i] = sourceData[i];
}

postMessage({
  type: 'datos',
  data: int32Array,
});

// main.js
const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
const worker1 = new Worker('worker1.js', {
  args: [sharedArray],
});

const worker2 = new Worker('worker2.js', {
  args: [sharedArray],
});

worker1.onmessage = (event) => {
  console.log('Datos de Worker1:', event.data);
};

worker2.onmessage = (event) => {
  console.log('Datos de Worker2:', event.data);
};

Ejemplo 4: Algoritmo de ordenación de burbuja utilizando SharedArrayBuffer()

const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * array.length);
const int32Array = new Int32Array(sharedArray);

// Copiar el array original en el SharedArrayBuffer
for (let i = 0; i < array.length; i++) {
  int32Array[i] = array[i];
}

const ordenarBurbujas = new Promise((resolve) => {
  const worker = new Worker('ordenacionBurbuja.js', {
    args: [sharedArray],
  });

  worker.postMessage({
    type: 'iniciarOrdenamiento',
    data: int32Array,
  });

  worker.onmessage = (event) => {
    resolve(event.data);
    worker.terminate();
  };
});

ordenarBurbujas.then((resultado) => {
  console.log('Array ordenado:', resultado);
});

// ordenacionBurbuja.js
self.importScripts('postMessage.worker');

const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * args[0]);
const int32Array = new Int32Array(sharedArray);

// Copiar el array original en el SharedArrayBuffer
for (let i = 0; i < args[0].length; i++) {
  int32Array[i] = args[0][i];
}

const tamanioArray = int32Array.length;

for (let i = 0; i < tamanioArray - 1; i++) {
  for (let j = 0; j < tamanioArray - i - 1; j++) {
    if (int32Array[j] > int32Array[j + 1]) {
      const temp = int32Array[j];
      int32Array[j] = int32Array[j + 1];
      int32Array[j + 1] = temp;
    }
  }
}

postMessage({
  type: 'ordenamientoFinalizado',
  data: int32Array,
});

Ejemplo 5: Calculadora de pi utilizando SharedArrayBuffer()

const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
const int32Array = new Int32Array(sharedArray);

// Llenar el array con valores aleatorios
for (let i = 0; i < 10; i++) {
  int32Array[i] = Math.floor(Math.random() * 100);
}

const calcularPi = new Promise((resolve) => {
  const worker = new Worker('calculadoraPi.js', {
    args: [sharedArray],
  });

  worker.postMessage({
    type: 'iniciarCalculo',
    data: int32Array,
  });

  worker.onmessage = (event) => {
    resolve(event.data);
    worker.terminate();
  };
});

calcularPi.then((resultado) => {
  console.log('Pi calculado:', resultado);
});

// calculadoraPi.js
self.importScripts('postMessage.worker');

const sharedArray = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * args[0]);
const int32Array = new Int32Array(sharedArray);

// Copiar el array original en el SharedArrayBuffer
for (let i = 0; i < args[0].length; i++) {
  int32Array[i] = args[0][i];
}

const PI_CONSTANTE = Math.PI;
const TOTAL_ITERACIONES = 1000000;
let iteracionesRealizadas = 0;
let acumulador = 0;

while (iteracionesRealizadas < TOTAL_ITERACIONES) {
  const x = Math.random() * 2 - 1;
  const y = Math.random() * 2 - 1;
  const distanciaCuadrada = x * x + y * y;

  if (distanciaCuadrada < 1) {
    acumulador += 4;
  }

  iteracionesRealizadas++;
}

const pi = (acumulador / TOTAL_ITERACIONES) * 0.25;

postMessage({
  type: 'calculoFinalizado',
  data: pi,
});

Conclusión

Utilizar SharedArrayBuffer en tus proyectos puede mejorar significativamente el rendimiento y la eficiencia de la memoria. Asegúrate de entender su funcionamiento correctamente y aplicarlo de manera adecuada en situaciones donde sea necesario. Con la ayuda de esta herramienta, podrás crear aplicaciones más escalables y resistentes a problemas de rendimiento.