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

2024-10-01 18:55:49

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

有很多方法可以解决这个问题，例如使用 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 +=
    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及页面注意事项

1.少用全局变量原因:因为作用域链是一个堆栈的结构,所以遵循先进先出的原则,而javascript引擎在解析代码的时候,将全局对象放在栈底,然后向上依次出现的是不同作用域的活动对象(这些活动对象除了闭包没有相互依赖的关系),所以在查找变量的时候会从该活动对象开始,然后是闭包它的活动对象,最后是全局对象,如果全局变量过多就会影响获得变量时的速度,所以不要过多使用全局变量. 2.尽量使用局部变量封装全局变量原因:正如前面所说,活动对象在栈的顶端,所以最先查找它的内容,当我们将document封装
javascript for循环性能测试示例

本文实例讲述了javascript for循环性能测试.分享给大家供大家参考,具体如下: for循环,如何使用效率更高,下面举例来说明: // 先定义一个测试数组 var arr = [0,1,2,3,4,5,6,7,8,9]; // 执行测试 test1(); test2(); test3(); function test1(){ console.time('test1'); for(var i = 0; i < arr.length; i ++) { } console.timeEnd('t
利用JavaScript的Map提升性能的方法详解

前言在ES6中引入JavaScript的新特性中,我们看到了Set和Map的介绍.与常规对象和Array不同的是,它们是"键控集合(keyed collections)".这就是说它们的行为有稍许不同,并且在特定的上下文中使用,它们可以提供相当大的性能优势. 在这篇文章中,我将剖析Map,它究竟有何不同,哪里可以派上用场,相比于常规对象有什么性能优势. Map与常规对象有什么不同 Map和常规对象主要有2个不同之处. 1.无限制的键(Key) 常规JavaScript对象的键必须是S
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)

nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架,使用nuxt.js在做同构项目开发时,需要考虑的一些点总结如下: 一.node服务端性能优化(提高node应用程序处理高流量的能力) 基于nuxt.js的服务端渲染项目我们能做的服务端性能优化有以下几点(需要注意的是持久化缓存不应该在本地开发环境去做,这样在缓存期间不会暴露本地开发中代码的问题) 优化点参考文档及思路优化场景/条件特别说明检测方法 1. 页面缓存 vue官方文档页面内容不是用户特定(即对于相同的 URL,总
JS性能优化实现方法及优点进行

最近刚阅读完<高性能javascript>,想谈谈对js性能优化的看法.理解有些不同,可能还需要各位多多提醒. 话不多说,提到javascript难免会联想到文档对象模型(DOM),它作用于XML和HTML文档的程序接口(API),位于浏览器中,主要用来与HTML文档打交道.同样也用于Web程序中获取XML文档,并使用DOM API来访问文档中的数据.尽管DOM是个与语言无关的API,它在浏览器中的接口却是用javascript实现的.客户端脚本编程大多数时候是在和底层文档(underlyin
js 函数性能比较方法

在学习js过程中,经常会遇到同样一个功能点这样实现也可以,那样实现也可以.但是哪个方式最优呢?自己写了一个简短的proferencesCompare 函数.代码如下: /** * 函数性能比较 * @param fns 要比较的函数数组 * @args 每个要比较函数在执行的时候传入的参数,可以是数组,或者被调用后返回数组类型 * @repeatCount 每个函数重复执行的次数,多次执行拉开差距.默认值10000 * * @return [{runTime:执行repeatCount次
详解如何提升JSON.stringify()的性能

1. 熟悉的JSON.stringify() 在浏览器端或服务端,JSON.stringify()都是我们很常用的方法: 将 JSON object 存储到 localStorage 中: POST 请求中的 JSON body: 处理响应体中的 JSON 形式的数据: 甚至某些条件下,我们还会用它来实现一个简单的深拷贝: -- 在一些性能敏感的场合下(例如服务端处理大量并发),或面对大量 stringify 的操作时,我们会希望它的性能更好,速度更快.这也催生了一些优化的 stringify
Vue.js 无限滚动列表性能优化方案

问题大家都知道,Web 页面修改 DOM 是开销较大的操作,相比其他操作要慢很多.这是为什么呢?因为每次 DOM 修改,浏览器往往需要重新计算元素布局,再重新渲染.也就是所谓的重排(reflow)和重绘(repaint).尤其是在页面包含大量元素和复杂布局的情况下,性能会受到影响.那对用户有什么实际的影响呢? 一个常见的场景是大数据量的列表渲染.通常表现为可无限滚动的无序列表或者表格,当数据很多时,页面会出现明显的滚动卡顿,严重影响了用户体验.怎么解决呢? 解决方案既然问题的根源是 DOM
Javascript三种字符串连接方式及性能比较

第一种:用连接符"+"连接字符串 str="a"; str+="b"; 这种方法相对以下两种,最便捷快速.建议100字符以下的连接使用这种连接方式. 第二种:以数组作为中介,使用jion函数进行连接 var arr=new Array(); arr.push(a); arr.push(b); var str=arr.join(""); 第三种:利用对象属性连接字符串 function stringConnect(){ this
高性能js数组去重(12种方法，史上最全)

数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看. 在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重.虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到. 注:写的匆忙,加上这几天有点忙,还没有非常认真核对过,不过思路是没有问题,可能一些小细节出错而已. 数组去重的方法一.利用ES6 Set去重(ES6中最常用) function u
JDK14性能管理工具之jstack使用介绍

在之前的文章中,我们介绍了JDK14中jstat工具的使用,本文我们再深入探讨一下jstack工具的使用. jstack工具主要用来打印java堆栈信息,主要是java的class名字,方法名,字节码索引,行数等信息. jstack的命令格式 Usage: jstack [-l][-e] <pid> (to connect to running process) Options: -l long listing. Prints additional information about lock
nodejs实现远程桌面监控的方法

最近使用node实现了一个远程桌面监控的应用,分为服务端和客户端,客户端可以实时监控服务端的桌面,并且可以通过鼠标和键盘来控制服务端的桌面. 这里因为我是用的同一台电脑,所以监控画面是这样的,当然使用两台电脑一个跑客户端 ,一个跑服务端才有意义. 原理其实这个应用的功能主要分为两部分,一是实现监控,即在客户端可以看到服务端的桌面,这部分功能是通过定时截图来实现的,比如服务端一秒截几次图,然后通过 socketio 发送到客户端,客户端通过改变img的src来实现一帧帧的显示最新的图片,这

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

相关推荐

随机推荐