如何使用gpu.js改善JavaScript的性能


Posted in Javascript onDecember 01, 2020

你是否曾经尝试过运行复杂的计算,却发现它需要花费很长时间,并且拖慢了你的进程?

有很多方法可以解决这个问题,例如使用 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.js改善JavaScript的性能

如你所见,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 +=
    aaaaaaaaaaaaaaaa\[this.thread.yyyyyyyyyyyyyyyy\][
     i
    ] *
    bbbbbbbbbbbbbbbb\[iiiiiiiiiiiiiiii\][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。

以上就是如何使用gpu.js改善JavaScript的性能的详细内容,更多关于改善JavaScript性能的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 #jQuery
jQuery实现查看图片功能
Dec 01 #jQuery
vue实现表格合并功能
Dec 01 #Vue.js
vue element实现表格合并行数据
Nov 30 #Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 #Vue.js
微信小程序实现电影App导航和轮播
Nov 30 #Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 #Vue.js
You might like
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python文件和目录操作函数小结
2014/07/11 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
怎么写有吸引力的自荐信
2013/11/17 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
《争吵》教学反思
2014/02/15 职场文书
户外活动策划方案
2014/03/12 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
会议欢迎词
2015/01/23 职场文书
财务总监岗位职责
2015/02/03 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
各种货币符号快捷输入
2022/02/17 杂记