Heim > Web-Frontend > js-Tutorial > Hauptteil

Erfahren Sie, wie Sie die JavaScript-Leistung mit GPU.js verbessern

coldplay.xixi
Freigeben: 2020-12-16 09:39:58
nach vorne
2567 Leute haben es durchsucht

Tutorial zum Javascript-LernenIn der Spalte wird die Verwendung von GPU.js zur Verbesserung der JavaScript-Leistung vorgestellt Es dauert lange und verlangsamt Ihren Fortschritt?

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.

Erfahren Sie, wie Sie die JavaScript-Leistung mit GPU.js verbessernIn diesem Einsteigerleitfaden zeigen wir, wie Sie GPU.js verwenden, um komplexe mathematische Berechnungen durchzuführen und die Leistung Ihrer JavaScript-Anwendungen zu 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.
  • 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.

Erfahren Sie, wie Sie die JavaScript-Leistung mit GPU.js verbessernDas 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

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

npmgpu.createKernel 方法创建了一个从JavaScript函数移植过来的GPU加速内核。

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

GPU.js入门

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

安装

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

npm

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

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

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

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

const getArrayValues = () => {

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

  // 将值插入第一个数组
  for (let y = 0; y <h3>乘法演示</h3><p>在下面的示例中,计算是在GPU上并行完成的。</p><p>首先,生成大量数据。</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>创建内核(运行在GPU上的函数的另一个词)。</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

输出

npm install @gpujs/benchmark

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

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

运行GPU基准测试

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

rrreee

optionsrrreee

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.

rrreee

Erstellen 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. rrreeeAusgabe
rrreee

GPU-Benchmark ausführen
🎜Sie können den Benchmark ausführen, indem Sie die auf GitHub angegebenen Schritte befolgen. 🎜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. 🎜🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜php-Programmierung🎜 (Video) 🎜🎜🎜

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie die JavaScript-Leistung mit GPU.js verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
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!