本文转载自微信公众号“TianTianUp”，作者小义。转载本文请联系天天向上公众号。Literal使用GPU.js使您的应用程序速度提高10倍。作为开发人员，我们一直在寻找提高应用程序性能的机会。对于网络应用程序，我们主要在代码中进行这些改进。但是，您是否考虑过将GPU的强大功能整合到您的Web应用程序中以提高性能？本文将向您介绍一个名为GPU.js的JavaScript加速库，并向您展示如何改进复杂的计算。什么是GPU.js一、官网地址：https://gpu.rocks/#/来源：https://gpu.rocks/#/简而言之，GPU.js是一个JavaScript加速库，可以用来在GPU上使用JavaScript通用计算。它支持浏览器、Node.js和TypeScript。除了性能提升之外，我还推荐使用GPU.js，原因如下：GPU.js使用JavaScript作为基础，允许您使用JavaScript语法。它负责自动将JavaScript翻译成着色器语言并进行编译。如果设备中没有GPU，它可以回退到普通的JavaScript引擎。所以使用GPU.js没有任何缺点。GPU.js也可以用于并行计算。此外，您可以同时在CPU和GPU上异步运行多个计算。所有这些加在一起，我看不出不使用GPU.js的理由。那么让我们看看如何开始使用它。如何设置GPU.js？为您的项目安装GPU.js与其他JavaScript库类似。对于Node项目npminallgpu.js--saveoryarnaddgpu.jsimport{GPU}from('gpu.js')---或---const{GPU}=require('gpu.js')---或---import{GPU}from'gpu.js';//UsethisforTypeScriptconstgpu=newGPU();对于Bowsers，请在本地下载GPU.js或使用其CDN。---或---注意：如果您使用的是Linux，则需要确保安装了正确的文件，运行：sudoaptinstallmesa-common-devlibxi-dev这就是您所需要的了解关于安装和导入GPU.js。现在您可以开始在您的应用程序中使用GPU编程。此外，我强烈建议您了解GPU.js的基本功能和概念。那么，让我们从一些GPU.js基础知识开始。创建函数您可以使用普通的JavaScript语法在GPU.js中定义要在GPU上运行的函数。constexampleKernel=gpu.createKernel(function(){...},settings);上面的代码示例显示了GPU.js函数的基本结构。我将函数命名为exampleKernel。如您所见，我使用createKernel函数来利用GPU进行计算。此外，有必要定义输出的大小。在上面的示例中，我使用了一个名为settings的参数来指定输出大小。constsettings={输出:[100]};内核函数的输出可以是1D、2D或3D，这意味着它最多可以有3个线程。您可以使用this.thread命令访问内核中的这些线程。1D：[长度]-值[this.thread.x]2D：[宽度，高度]-值[this.thread.y][this.thread.x]3D：[宽度，高度，深度]-值[this.thread.z][this.thread.y][this.thread.x]。最后，创建的函数可以像使用函数名称的任何其他JavaScript函数一样被调用：exampleKernel()内部支持变量Number您可以在GPU.js函数中使用任何整数或浮点数。constexampleKernel=gpu.createKernel(function(){constnumber1=10;constnumber2=0.10;returnnumber1+number2;},settings);GPU.js也支持布尔值，类似于JavaScript。constkernel=gpu.createKernel(函数(){constbool=true;if(bool){return1;}else{return0;}},设置);数组您可以在内核函数中定义任意大小的数字数组并返回它们。constexampleKernel=gpu.createKernel(函数(){constarray1=[0.01,1,0.1,10];returnarray1;},设置);函数在内核函数中使用私有函数，这在GPU.js中也是允许的。constexampleKernel=gpu.createKernel(function(){functionprivateFunction(){return[0.01,1,0.1,10];}returnprivateFunction();},settings);支持的输入类型除了上面的变量类型，你还可以给内核函数传递几种输入类型。数字类似于变量声明，您可以将整数或浮点数传递给内核函数，如下所示。constexampleKernel=gpu.createKernel(function(x){returnx;},settings);exampleKernel(25);1D,2D,or3DArrayofNumbers您可以传递数组类型，例如Array,Float32Array,Int16Array,Int8Array,Uint16Array,uInt8Array等进入GPU.js内核。constexampleKernel=gpu.createKernel(function(x){returnx;},settings);exampleKernel([1,2,3]);内核函数也接受预展平的2D和3D数组。这种方法使上传速度更快，你必须使用GPU.js的输入选项来实现这一点。const{input}=require('gpu.js');constvalue=input(flattenedArray,[width,height,depth]);HTMLImages与传统的JavaScript相比，将图像传递给函数是我们在GPU.js中做的一个新的中可以看到的东西。使用GPU.js，您可以将一个或多个HTML图像作为数组传递给内核函数。//SingleImageconstkernel=gpu.createKernel(function(image){...}).setGraphical(true).setOutput([100,100]);constimage=document.createElement('img');image.src='image1.png';image.onload=()=>{kernel(image);document.getElementsByTagName('body')[0].appendChild(kernel.canvas);};//MultipleImagesconstkernel=gpu.createKernel(function(image){constpixel=image[this.thread.z][this.thread.y][this.thread.x];this.color(pixel[0],pixel[1],pixel[2],pixel[3]);}).setGraphical(true).setOutput([100,100]);constimage1=document.createElement('img');image1.src='image1.png';image1.onload=onload;....//addanother2images。...consttotalImages=3;letloadedImages=0;functiononload(){loadedImages++;if(loadedImages===totalImages){kernel([image1,image2,image3]);document.getElementsByTagName('body')[0].appendChild(kernel.canvas);}};除了上述配置之外，还有许多令人兴奋的事情可以用GPU.js进行实验。您可以在其文档中找到它们。现在您了解了几种配置，让我们在GPU.js中编写一个函数并比较其性能。使用GPU.js的第一个特性结合我们之前讨论的所有内容，我编写了一个小角度应用程序，通过将两个包含1000个元素的数组相乘来比较GPU和CPU的计算性能。第1步，生成一个包含1000个元素的数组的函数我将生成一个每个元素包含1000个数字的二维数组，并在接下来的步骤中使用它们进行计算。generateMatrices(){this.matrices=[[],[]];for(lety=0;y
