使用GPU.js改善JavaScript性能

2021-01-18 IT大咖說

https://gpu.rocks

你是否曾經嘗試過運行複雜的計算,卻發現它需要花費很長時間,並且拖慢了你的進程?

有很多方法可以解決這個問題,例如使用web worker或後臺線程。GPU減輕了CPU的處理負荷,給了CPU更多的空間來處理其他進程。同時,web worker仍然運行在CPU上,但是運行在不同的線程上。

在該初學者指南中,我們將演示如何使用GPU.js執行複雜的數學計算並提高JavaScript應用的性能。

什麼是GPU.js?

GPU.js是一個針對Web和Node.js構建的JavaScript加速庫,用於在圖形處理單元(GPGPU)上進行通用編程,它使你可以將複雜且耗時的計算移交給GPU而不是CPU,以實現更快的計算和操作。還有一個備用選項:在系統上沒有GPU的情況下,這些功能仍將在常規JavaScript引擎上運行。

當你要執行複雜的計算時,實質上是將這種負擔轉移給系統的GPU而不是CPU,從而增加了處理速度和時間。

高性能計算是使用GPU.js的主要優勢之一。如果你想在瀏覽器中進行並行計算,而不了解WebGL,那麼GPU.js是一個適合你的庫。

為什麼要使用GPU.js

為什麼要使用GPU執行複雜的計算的原因不勝枚舉,有太多的原因無法在一篇文章中探討。以下是使用GPU的一些最值得注意的好處。

GPU可用於執行大規模並行GPGPU計算。這是需要異步完成的計算類型

當系統中沒有GPU時,它會優雅地退回到JavaScript

GPU當前在瀏覽器和Node.js上運行,非常適合通過大量計算來加速網站

GPU.js是在考慮JavaScript的情況下構建的,因此這些功能均使用合法的JavaScript語法

如果你認為你的處理器可以勝任,你不需要GPU.js,看看下面這個GPU和CPU運行計算的結果。


如你所見,GPU比CPU快22.97倍。

GPU.js的工作方式

考慮到這種速度水平,JavaScript生態系統仿佛得到了一個可以乘坐的火箭。GPU可以幫助網站更快地加載,特別是必須在首頁上執行複雜計算的網站。你不再需要擔心使用後臺線程和加載器,因為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 < 600; y++){
values[0].push([])
values[1].push([])

// 將值插入第二個數組
for (let x = 0; x < 600; x++){
values\[0\][y].push(Math.random())
values\[1\][y].push(Math.random())
}
}

// 返回填充數組
return values
}

創建內核(運行在GPU上的函數的另一個詞)。

const gpu = new GPU();

// 使用 `createKernel()` 方法將數組相乘
const multiplyLargeValues = gpu.createKernel(function(a, b) {
let sum = 0;
for (let i = 0; i < 600; i++) {
sum += a\[this.thread.y\][i] * b\[i\][this.thread.x];
}
return sum;
}).setOutput([600, 600])

使用矩陣作為參數調用內核。

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官方網站查看完整的計算基準,這將幫助你了解使用GPU.js進行複雜計算可以獲得多少速度。

結束

在本教程中,我們詳細探討了GPU.js,分析了它的工作原理,並演示了如何進行並行計算。我們還演示了如何在你的Node.js應用中設置GPU.js。




來源:

https://www.toutiao.com/i6906390310486868487/

「IT大咖說」歡迎廣大技術人員投稿,投稿郵箱:aliang@itdks.com






 IT大咖說  |  關於版權 

由「IT大咖說(ID:itdakashuo)」原創的文章,轉載時請註明作者、出處及微信公眾號。投稿、約稿、轉載請加微信:ITDKS10(備註:投稿),茉莉小姐姐會及時與您聯繫!

感謝您對IT大咖說的熱心支持!




相關焦點

  • 與moment.js整合使用的javascript日期選擇期 - Pikaday
    與moment.js整合使用的javascript日期選擇期 - Pikaday 在線演示Pikaday是一款超輕量級的javascript日期選擇器,並且支持模塊化的
  • 網頁性能之html css javascript
    js文件之後domComplete時間又被延後了,結合上面的renderTree,由於javascript代碼可能會更改css屬性或者是dom結構,所以在形成renderTree之前必須等待javascript解析完成才能接著構建renderTree。
  • 不容忽視:MongoDB的JavaScript性能
    【IT168 技術】mongodb使用javascript做shell, mongodb的db.eval可以提供給數據驅動與這種javascript shell類似的js接口。
  • GPU.js一款可以用GPU為jsdon動畫加速插件
    簡介GPU.js是一個JavaScript加速庫,用於Web和Node的JavaScript中的GPGPU(GPU上的通用計算)。GPU.js會自動將簡單的JavaScript函數轉換為著色器語言,並對其進行編譯,使其在您的GPU上運行。 如果沒有GPU,則這些功能仍將在常規JavaScript中運行。
  • 盤點:GPU加速的神經網絡與JavaScript的交叉
    使用load函數,可以解析npy文件的內容並作為張量使用。在瀏覽器環境中,PropelJS使用了deeplearn.js中的WebGL功能。對於節點的GPU加速,項目使用了TensorFlow的C API。gpu.js雖然筆者常用的是CUDA而不是WebGL,但可以證明GPU編程的耗時性。因此,當筆者遇到gpu.js時,感到非常驚喜。
  • 基於TensorFlow.js的JavaScript機器學習
    Credits: aijs.rocks雖然python或r程式語言有一個相對容易的學習曲線,但是Web開發人員更喜歡在他們舒適的javascript區域內做事情。目前來看,node.js已經開始向每個領域應用javascript,在這一大趨勢下我們需要理解並使用JS進行機器學習。由於可用的軟體包數量眾多,python變得流行起來,但是JS社區也緊隨其後。
  • three.js為何如此奇妙
    WebGL是在瀏覽器中實現三維效果的一套規範,而最初使用WebGL原生的API來寫3D程序是一件非常痛苦的事情,在辛苦的付出下WebGL開源框架出現了,其中three.js就是非常優秀的一個,它掩蓋了很多麻煩的細節,那麼,就讓我們一起來看看,什麼是three.js吧!
  • 用戶體驗超棒且功能強大使用簡單的javascript表單驗證 - Parsley.js
    用戶體驗超棒且功能強大使用簡單的javascript表單驗證 - Parsley.js 大家還記得我們曾經介紹過的表單驗證jquery插件jquery.validationEngine
  • THINKPHP6.0使用RESPONSE調用VIEW輸出JS代碼
    最近春燕網絡小哥哥在研究ThinkPHP6.0.0,小哥哥遇到如下的問題,在ThinkPHP6.0.0中,無法設置輸出頭信息,也就是說直接使用header函數,結果沒效果。在ThinkPHP6.0.0中,下面的代碼是無效的。
  • JavaScript判斷設備是手機端還是PC端,並加載不同的css/js文件
    今天做一個項目,需要實現的效果是:判斷用戶當前訪問是用手機還是電腦,如果用電腦就加載index.min.css和index.min.js.如果是用手機端就訪問phone.min.js和phone.min.css.
  • 七天學會javascript第一天javascript介紹
    javascript介紹javascript數據類型javascript運算符javascript對象javascript Date對象javascript String對象JavaScript常用於實現一些前端效果。前些年流行的flash已經慢慢的被淘汰,js盛行起來。javascript :客戶端編程。javascript是由客戶端去解釋運行的。
  • 同構 javascript 應用開發的最佳實踐(2)
    那些公司在使用同構 javascript如果對性能要求不高,也無需支持 SEO 需求,可以選擇使用 SPA 。同構 javascript 帶來的麻煩似乎要大於收益。同構的本質就是代碼復用。整個項目管理使用 gulp 工具進行管理,由於在服務端使用 nodejs 對模塊管理使用 CommonJS。而在瀏覽器端不是天生支持 CommonJS 模塊管理在 es6 中引入更優雅的模塊管理。
  • JavaScript入門,為什麼要學習JavaScript?
    JavaScript是一種基於對象和事件驅動的、並具有安全性能的腳本語言JavaScript特點向HTML頁面中添加交互行為腳本語言,語法和Java類似解釋性語言,邊執行邊解釋JavaScript的組成:ECMAScriptDOMBOM1、如何引入js?
  • JavaScript入門
    JavaScript技術除了JavaScript語法外,還包括HTML DOM技術,以及jQuery、Angular JS、React、Node.js、Vue.js等衍生技術,目前在前端開發中,建議掌握JavaScript語法、HTML DOM和Vue.js技術。本文主要講解一些JavaScript的入門知識。
  • javascript的簡介與初學
    1.javascript和java是完全不同的語言,不論是概念還是設計。2.script標記中的使用   script–<script>javascript程序</script>   位置–<head>標記中/<body>標記中【最後】<!
  • 初識javascript,JS的歷史_騰訊新聞
    javascript和H5的關關係 什麼是HTML5? javascript的應用範圍 1.PC端web開發(網站) 2.移動端開發(webApp、混合App)服務端開發(NodeJs) 3.遊戲開發(unity3D-TypeScript,網頁遊戲)在線演示:忍者水果
  • 同構 javascript 應用開發的最佳實踐(1)
    進行開發,最終也將會用 javascript。在 Ilya Grigorik 在 《Web 性能權威指南為什麼需要同構 javascript現在單頁應用框架泛濫,也佔據主導地位。 本來想用業餘時間也  寫一個類似 vue 的框架(竟說大話)。
  • Backbone.js 1.2.1 發布,JavaScript 的 MVC 框架
    Backbone.js 1.2.1 發布,此版本更新內容如下:Collection#add now avoids
  • 還有什麼是JavaScript不能做的
    網頁開發css,javascript,html作為網頁開發三劍客,是每個人都必須要掌握的,而作為web2.0動態交互的主力軍,JavaScript受到越來越多的人重視,無數的框架層出不窮,從早期的dojo,prototype,jquery,到現在的vue,angular,react,人們對於js框架的開發從未停止腳步,我相信未來還會有更多的框架誕生
  • JavaScript圖表庫ECharts使用
    首先引入最新js依賴echarts.min.js<script type="text/javascript" src="../../js/jquery-1.12.4.min.js"></script><script src=".