GPU.js を使用して JavaScript アプリケーションのパフォーマンスを向上させるためのヒント

関連する推奨事項: 「JavaScript ビデオ チュートリアル 」

複雑な計算を実行しようとして、時間がかかることに気付いたことがありますか?時間がかかり、プロセスが遅くなりますか?

この問題を解決するには、Web ワーカーやバックグラウンド スレッドの使用など、さまざまな方法があります。 GPU は CPU の処理負荷を軽減し、他のプロセスを処理するためのより多くのスペースを CPU に与えます。その間、Web ワーカーは引き続き CPU 上で実行されますが、別のスレッド上で実行されます。

この初心者ガイドでは、GPU.js を使用して複雑な数学的計算を実行し、JavaScript アプリケーションのパフォーマンスを向上させる方法を説明します。

GPU.js とは何ですか?

GPU.js は、Web 用に構築された JavaScript アクセラレーション ライブラリであり、グラフィックス プロセッシング ユニット (GPGPU) での汎用プログラミング用の Node.js です。これにより、複雑で時間のかかる計算を、GPU ではなく GPU にオフロードできます。より高速な計算と演算を実現する CPU。フォールバック オプションもあります。システムに GPU がなくても、これらの関数は通常の JavaScript エンジンで実行されます。

複雑な計算を実行する場合、基本的にこの負担を CPU ではなくシステムの GPU に移し、処理速度と時間を向上させます。

ハイ パフォーマンス コンピューティングは、GPU.js を使用する主な利点の 1 つです。ブラウザーで並列コンピューティングを実行したいが、WebGL については知らない場合は、GPU.js が最適なライブラリです。

GPU.js を使用する理由

複雑な計算を実行するために GPU を使用する必要がある理由は無数にあり、1 つの記事では説明しきれないほどです。 GPU を使用することの最も注目すべき利点をいくつか紹介します。

• GPU を使用すると、大規模な並列 GPGPU 計算を実行できます。これは、非同期で実行する必要があるタイプの計算です。
• システムに GPU がない場合は、JavaScript に正常にフォールバックします。
• 現在、GPU はブラウザと Node.js で実行されており、完璧です。ウェブサイトを高速化するために大量のコンピューティングを渡すための
• GPU.js は JavaScript を念頭に置いて構築されているため、これらの機能は合法的な JavaScript 構文を使用します

お使いのプロセッサーが次の条件に達していると思われる場合は、 GPU.js は必要ありません。以下の GPU と CPU の実行計算の結果を見てください。

ご覧のとおり、GPU は CPU より 22.97 倍高速です。

GPU.js の仕組み

このレベルの速度を考慮すると、JavaScript エコシステムはロケットに乗ることができたようです。 GPU は、Web サイト、特にホームページ上で複雑な計算を実行する必要がある Web サイトの読み込みを高速化するのに役立ちます。 GPU は通常の CPU より 22.97 倍高速に計算を実行できるため、バックグラウンド スレッドやローダーの使用について心配する必要はもうありません。

gpu.createKernel メソッドは、JavaScript 関数から移植された GPU 高速化カーネルを作成します。

カーネル関数を GPU と並行して実行すると、計算が高速化されます (ハードウェアに応じて 1 ～ 15 倍)。

GPU.js の入門

GPU.js を使用して複雑な計算をより速く計算する方法を示すために、すぐに実践的なデモを開始しましょう。

インストール

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

npm

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

NodeプロジェクトにGPU.jsをインポートします。

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

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

const gpu = new GPU();

乗算のデモ

以下の例では、計算は 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])

出力

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

GPU ベンチマークの実行

GitHub で指定されている手順に従ってベンチマークを実行できます。

npm install @gpujs/benchmark

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

const benchmarks = benchmark.benchmark(options);

options オブジェクトには、ベースラインに渡すことができるさまざまな設定が含まれています。

GPU.js 公式 Web サイトにアクセスして、完全なコンピューティング ベンチマークを表示します。これは、GPU.js を使用した複雑な計算でどの程度の速度が得られるかを理解するのに役立ちます。

終了

このチュートリアルでは、GPU.js を詳しく調べ、その仕組みを分析し、並列コンピューティングを実行する方法を示しました。 Node.js アプリケーションで GPU.js を設定する方法も示しました。

英語の元のアドレス: https://blog.logrocket.com/improving-javascript-performance-with-gpu-js/

著者: Solomon Eseme

転載アドレス: https://blog.zhangbing.site/2020/11/30/improving-javascript-performance-with-gpu-js/

コンピュータ プログラミング関連の知識については、次のサイトをご覧ください。 : プログラミング入門! ！

以上がGPU.js を使用して JavaScript アプリケーションのパフォーマンスを向上させるためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。