Heim > Web-Frontend > js-Tutorial > Hauptteil

Tipps zur Verbesserung der Leistung von JavaScript-Anwendungen mithilfe von GPU.js

青灯夜游
Freigeben: 2021-02-04 15:23:27
nach vorne
1947 Leute haben es durchsucht

Tipps zur Verbesserung der Leistung von JavaScript-Anwendungen mithilfe von GPU.js

Verwandte Empfehlungen: „Javascript-Video-Tutorial

Haben Sie schon einmal versucht, eine komplexe Berechnung durchzuführen, nur um festzustellen, dass dies lange dauert und Ihren Prozess verlangsamt?

Es gibt viele Möglichkeiten, dieses Problem zu lösen, z. B. die Verwendung von Web-Workern oder Hintergrundthreads. Die GPU reduziert die Verarbeitungslast der CPU und gibt der CPU mehr Platz für andere Prozesse. Währenddessen läuft der Web-Worker immer noch auf der CPU, jedoch in einem anderen Thread.

In diesem Leitfaden für Einsteiger zeigen wir, wie Sie mit GPU.js komplexe mathematische Berechnungen durchführen und die Leistung Ihrer JavaScript-Anwendungen verbessern.

Was ist GPU.js?

GPU.js ist eine JavaScript-Beschleunigungsbibliothek, die für das Web und Node.js für die allgemeine Programmierung auf Grafikverarbeitungseinheiten (GPGPU) entwickelt wurde und es Ihnen ermöglicht, komplexe und zeitaufwändige Berechnungen auf die GPU statt auf die CPU auszulagern, z schnellere Berechnungen und Operationen. Es gibt auch eine Fallback-Option: Ohne eine GPU im System laufen diese Funktionen weiterhin auf der regulären JavaScript-Engine.

Wenn Sie komplexe Berechnungen durchführen möchten, verlagern Sie diese Belastung im Wesentlichen auf die GPU des Systems statt auf die CPU, wodurch sich die Verarbeitungsgeschwindigkeit und -zeit erhöht.

Hochleistungsrechnen ist einer der Hauptvorteile der Verwendung von GPU.js. Wenn Sie paralleles Rechnen im Browser durchführen möchten und WebGL nicht kennen, dann ist GPU.js eine Bibliothek für Sie.

Warum GPU.js verwenden?

Es gibt unzählige Gründe, warum Sie GPUs verwenden sollten, um komplexe Berechnungen durchzuführen, zu viele, um sie in einem Artikel zu behandeln. Hier sind einige der bemerkenswertesten Vorteile der Verwendung einer GPU.

  • GPU kann verwendet werden, um massiv parallele GPGPU-Berechnungen durchzuführen. Dies ist die Art von Berechnung, die asynchron durchgeführt werden muss
  • Sie greift elegant auf JavaScript zurück, wenn keine GPU im System vorhanden ist
  • GPU läuft derzeit im Browser und Node.js, perfekt zum Beschleunigen von Websites mit umfangreichen Berechnungen
  • GPU.js wurde mit Blick auf JavaScript entwickelt, daher verwenden diese Funktionen alle die legale JavaScript-Syntax.

Wenn Sie glauben, dass Ihr Prozessor die Aufgabe erledigen kann, benötigen Sie GPU.js nicht. Sehen Sie sich diese GPU- und CPU-Laufberechnungen an unten stehendes Ergebnis.

Tipps zur Verbesserung der Leistung von JavaScript-Anwendungen mithilfe von GPU.js

Wie Sie sehen können, ist die GPU 22,97-mal schneller als die CPU.

So funktioniert GPU.js

Angesichts dieser Geschwindigkeit ist es, als hätte das JavaScript-Ökosystem eine Rakete zum Fahren. GPUs können dazu beitragen, dass Websites schneller geladen werden, insbesondere solche, die komplexe Berechnungen auf der Homepage durchführen müssen. Sie müssen sich keine Gedanken mehr über die Verwendung von Hintergrundthreads und Loadern machen, da die GPU Berechnungen 22,97-mal schneller ausführen kann als eine normale CPU.

gpu.createKernel-Methode erstellt einen GPU-beschleunigten Kernel, der von einer JavaScript-Funktion portiert wird. gpu.createKernel 方法创建了一个从JavaScript函数移植过来的GPU加速内核。

与GPU并行运行内核函数会导致更快的计算速度——快1-15倍,这取决于你的硬件。

GPU.js入门

为了展示如何使用GPU.js更快地计算复杂的计算,让我们快速启动一个实际的演示。

安装

sudo apt install mesa-common-dev libxi-dev  // using Linux
Nach dem Login kopieren

npm

npm install gpu.js --save
// OR
yarn add gpu.js
Nach dem Login kopieren

在你的Node项目中要导入GPU.js。

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

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

const gpu = new GPU();
Nach dem Login kopieren

乘法演示

在下面的示例中,计算是在GPU上并行完成的。

首先,生成大量数据。

const getArrayValues = () => {

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

  // 将值插入第一个数组
  for (let y = 0; y <p>创建内核(运行在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>使用矩阵作为参数调用内核。</p><pre class="brush:php;toolbar:false">const largeArray = getArrayValues()
const out = multiplyLargeValues(largeArray[0], largeArray[1])
Nach dem Login kopieren

输出

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

运行GPU基准测试

你可以按照GitHub上指定的步骤运行基准测试。

npm install @gpujs/benchmark

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

const benchmarks = benchmark.benchmark(options);
Nach dem Login kopieren

options

Das parallele Ausführen von Kernelfunktionen mit der GPU führt zu schnelleren Berechnungen – 1-15x schneller, abhängig von Ihrer Hardware.

Erste Schritte mit GPU.js

Um zu zeigen, wie Sie mit GPU.js komplexe Berechnungen schneller berechnen können, starten wir schnell eine praktische Demo.

Installieren
rrreee

npm

rrreee

Importieren Sie GPU.js in Ihr Node-Projekt.

rrreee

Multiplikationsdemonstration

Im folgenden Beispiel werden die Berechnungen parallel auf der GPU durchgeführt.

Generieren Sie zunächst viele Daten.

rrreeeErstellen Sie einen Kernel (ein anderes Wort für eine Funktion, die auf der GPU ausgeführt wird). rrreee

Rufen Sie den Kernel mit einer Matrix als Argument auf. 🎜rrreee🎜Ausgabe🎜rrreee🎜Führen Sie den GPU-Benchmark aus🎜🎜Sie können den Anweisungen auf GitHub folgen🎜 Schritte zum Ausführen des Benchmarks. 🎜rrreee🎜 Das options-Objekt enthält verschiedene Konfigurationen, die an den Benchmark übergeben werden können. 🎜🎜Besuchen Sie die offizielle GPU.js-Website, um die vollständigen Computing-Benchmarks anzuzeigen, die Ihnen helfen zu verstehen, wie viel Geschwindigkeit Sie für komplexe Berechnungen mit GPU.js erreichen können. 🎜🎜Das Ende🎜🎜In diesem Tutorial haben wir GPU.js im Detail untersucht, seine Funktionsweise analysiert und gezeigt, wie man paralleles Rechnen durchführt. Wir haben auch gezeigt, wie Sie GPU.js in Ihrer Node.js-Anwendung einrichten. 🎜🎜🎜Englische Originaladresse: https://blog.logrocket.com/improving-javascript-performance-with-gpu-js/🎜🎜Autor: Solomon Eseme🎜🎜Nachdruckadresse: https://blog.zhangbing.site/ 30.11.2020/improving-javascript-performance-with-gpu-js/🎜🎜🎜Weitere Kenntnisse zum Thema Computerprogrammierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonTipps zur Verbesserung der Leistung von JavaScript-Anwendungen mithilfe von GPU.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:zhangbing
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!