Conseils pour améliorer les performances des applications JavaScript à l'aide de GPU.js

Recommandations associées : "Tutoriel vidéo javascript"

Avez-vous déjà essayé d'exécuter un calcul complexe, pour constater que cela prend beaucoup de temps du temps ? et ralentir votre processus ?

Il existe de nombreuses façons de résoudre ce problème, par exemple en utilisant des Web Workers ou des threads en arrière-plan. Le GPU réduit la charge de traitement du processeur et lui donne plus d'espace pour gérer d'autres processus. Pendant ce temps, le Web Worker s'exécute toujours sur le processeur, mais sur un thread différent.

Dans ce guide du débutant, nous montrerons comment utiliser GPU.js pour effectuer des calculs mathématiques complexes et améliorer les performances de vos applications JavaScript.

Qu'est-ce que GPU.js ?

GPU.js est une bibliothèque d'accélération JavaScript conçue pour le Web et Node.js pour la programmation générale sur les unités de traitement graphique (GPGPU), qui vous permet de décharger des calculs complexes et fastidieux sur le GPU au lieu de CPU pour des calculs et des opérations plus rapides. Il existe également une option de secours : sans GPU sur le système, ces fonctions fonctionneront toujours sur le moteur JavaScript standard.

Lorsque vous souhaitez effectuer des calculs complexes, vous transférez essentiellement cette charge sur le GPU du système au lieu du CPU, augmentant ainsi la vitesse et le temps de traitement.

Le calcul haute performance est l'un des principaux avantages de l'utilisation de GPU.js. Si vous souhaitez effectuer du calcul parallèle dans le navigateur et ne connaissez pas WebGL, alors GPU.js est une bibliothèque faite pour vous.

Pourquoi utiliser GPU.js

Il existe d'innombrables raisons pour lesquelles vous devriez utiliser le GPU pour effectuer des calculs complexes, trop nombreuses pour être explorées dans un seul article. Voici quelques-uns des avantages les plus remarquables de l’utilisation d’un GPU.

• Le GPU peut être utilisé pour effectuer des calculs GPGPU massivement parallèles. C'est le type de calcul qui doit être effectué de manière asynchrone
• Lorsqu'il n'y a pas de GPU dans le système, il reviendra gracieusement à JavaScript
• GPU actuellement exécutés dans le navigateur et Node.js , parfait pour transmettre de grandes quantités de calcul afin d'accélérer les sites Web
• GPU.js a été conçu en pensant à JavaScript, ces fonctionnalités utilisent donc la syntaxe JavaScript légale

Si vous pensez que votre processeur est jusqu'à cela, vous n'avez pas besoin de GPU.js, jetez un œil aux résultats des calculs en cours d'exécution du GPU et du CPU ci-dessous.

Comme vous pouvez le constater, le GPU est 22,97 fois plus rapide que le CPU.

Comment fonctionne GPU.js

Compte tenu de ce niveau de vitesse, c'est comme si l'écosystème JavaScript avait reçu une fusée sur laquelle rouler. Les GPU peuvent aider les sites Web à se charger plus rapidement, en particulier ceux qui doivent effectuer des calculs complexes sur la page d'accueil. Vous n'avez plus à vous soucier de l'utilisation des threads et des chargeurs en arrière-plan, car le GPU peut exécuter des calculs 22,97 fois plus rapidement qu'un processeur classique. La méthode

gpu.createKernel crée un noyau accéléré par GPU porté à partir d'une fonction JavaScript.

L'exécution des fonctions du noyau en parallèle avec le GPU entraîne des calculs plus rapides - 1 à 15 fois plus rapides, selon votre matériel.

Premiers pas avec GPU.js

Pour montrer comment vous pouvez utiliser GPU.js pour calculer plus rapidement des calculs complexes, lançons rapidement une démonstration pratique.

Installer

sudo apt install mesa-common-dev libxi-dev  // using Linux

npm

npm install gpu.js --save
// OR
yarn add gpu.js

Importez GPU.js dans votre projet Node.

import { GPU } from ('gpu.js')

// OR
const { GPU } = require('gpu.js')

const gpu = new GPU();

Démonstration de multiplication

Dans l'exemple ci-dessous, les calculs sont effectués en parallèle sur le GPU.

Tout d’abord, générez beaucoup de données.

const getArrayValues = () => {

  // 在此处创建2D arrary
  const values = [[], []]

  // 将值插入第一个数组
  for (let y = 0; y <p>Crée un noyau (un autre mot pour une fonction qui s'exécute sur le GPU). </p><pre class="brush:php;toolbar:false">const gpu = new GPU();

// 使用 `createKernel()` 方法将数组相乘
const multiplyLargeValues = gpu.createKernel(function(a, b) {
  let sum = 0;
  for (let i = 0; i <p> Appelle le noyau avec une matrice comme argument. </p><pre class="brush:php;toolbar:false">const largeArray = getArrayValues()
const out = multiplyLargeValues(largeArray[0], largeArray[1])

Sortie

console.log(out\[y\][x]) // 将元素记录在数组的第x行和第y列
console.log(out\[10\][12]) // 记录输出数组第10行和第12列的元素

Exécuter le benchmark GPU

Vous pouvez exécuter le benchmark en suivant les étapes spécifiées sur GitHub. L'objet

npm install @gpujs/benchmark

const benchmark = require('@gpujs/benchmark')

const benchmarks = benchmark.benchmark(options);

options contient diverses configurations qui peuvent être transmises au benchmark.

Accédez au site Web officiel GPU.js pour consulter le test de calcul complet, qui vous aidera à comprendre la vitesse que vous pouvez obtenir pour des calculs complexes à l'aide de GPU.js.

Fin

Dans ce didacticiel, nous avons exploré GPU.js en détail, analysé son fonctionnement et démontré comment effectuer du calcul parallèle. Nous avons également montré comment configurer GPU.js dans votre application Node.js.

Adresse originale en anglais : https://blog.logrocket.com/improving-javascript-performance-with-gpu-js/

Auteur : Solomon Eseme

Adresse de réimpression : https://blog.zhangbing.site/2020/11/30/improving-javascript-performance-with-gpu-js/

Pour plus de connaissances liées à la programmation informatique, veuillez visiter :Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!