javascript粒子性能背后的原因与其他软件和程序相比有很多

Question

你好，我是编程新手，我制作了一个简单的JavaScript，可以绘制在2D x，y坐标中移动的简单canvas.arc圆。

出于好奇，我用1个粒子10、100、1000等来运行动画，不断增加粒子的数量。

我观察到的是粒子平稳地移动到几百个，但随后变得非常滞后*（对不起，我不知道这个现象的正确术语）

我在想，我的电脑怎么能如此流畅地运行复杂得多的游戏和软件，却很难运行我制作的简单脚本？

我想知道这背后的原因或背后的理论！

ps对不起，我对我的英语没有信心，请发布消息来源或其他链接，帮助我理解这个问题。

这就是代码。它非常简单，但如果有提高性能的方法，请告诉我我想知道的未来脚本。

尝试增加粒子数：

var particleCount = 10000;

window.requestAnimFrame = (function(){
  return window.requestAnimationFrame ||
  function(callback){
    window.setTimeOut(callback,1000/60);
  };
})();
var particleCount = 100,
    particles = [];
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var wW = window.innerWidth, wH =  window.innerHeight;
canvas.width = wW;
canvas.height = wH;

function paintCanvas(){
  ctx.fillStyle = "rgba(0,0,0,1)";
  ctx.fillRect(0,0,wW,wH);
}
function Particle(){
  this.x = Math.random() * wW;
  this.y = Math.random() * wH;
  var numx = Math.random()*2;
  var numy = Math.random()*2;
  numx *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
  numy *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
  this.vx = numx;
  this.vy = numy;
  this.radius = Math.random() * (Math.random()*5);
  this.draw = function(){
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
    ctx.fill();
  }
}
for (var i=0; i<particleCount; i++){
  particles.push(new Particle());
}
function draw(){
  paintCanvas();
  for(var i = 0; i < particleCount; i++){
    p = particles[i];
    p.draw();
  }
  update();
}
function update(){
  for (var i =0; i < particleCount; i++){
    p = particles[i];
    p.x += p.vx;
    p.y += p.vy;
    if(p.x + p.radius > wW){
      p.x = p.radius;
    }
    else if(p.x - p.radius < 0){
      p.x = wW - p.radius;
    }
    if(p.y + p.radius > wH){
      p.y = p.radius;
    }
    else if(p.y - p.radius < 0){
      p.y = wH - p.radius;
    }

  }
}
function animloop(){
  draw();
  requestAnimFrame(animloop);
}
animloop();

作为Fiddle：https://jsfiddle.net/b8xbv7fu/

Answer 1

Javascript速度慢

这是javascript的本质，而不是代码的错。Javascript是一种高级解释语言。高级手段是使用CPU无法直接理解的对象和结构进行大量抽象的，因此需要额外的工作来完成一些更基本的事情。解释是指为了执行指令，有一个程序解释每条指令，然后调用特殊的内置（本地）函数来运行程序的逻辑。这也会产生开销。

当您将Javascript与C++之类的语言进行比较时，您无法与之竞争。C++是一种经过编译的中低级语言。编译意味着在它运行之前，它的代码被转换成机器语言或操作码，这是一种可移植的机器语言，在操作系统加载时进行汇编。机器语言基本上是CPU可以理解的一组指令，并且可以直接执行，而不需要额外的代码。

它为程序员提供了较低级别的抽象，有人说更难编码，更适合CPU的设计。此外，编译器可以利用特定的硬件，如CPU寄存器（非常快的变量）。并发性（CPU有两个逻辑设备，一个用于浮点，另一个用于整数运算FPALU和ALU（算术逻辑单元））如果您正在添加数字，有些是浮点，有些是整数，如果您写得很仔细，编译器将确保同时完成尽可能多的这些操作。C++和类似语言还可以利用许多其他特性，而Javascript则无法利用这些特性。（直接访问硬件、多线程能力、直接访问内存以及使用可以快速移动大量数据的特殊内存指令。

编译的低级别语言是调用本机语言，因为CPU可以理解代码，而Javascript必须在每次需要时解释每条指令才能运行。

Javascript（使用通常被称为ASM.js的语言的子集）的最佳速度是编译语言的十分之一。Javascript永远不会与C/C++等语言竞争

还有一种最低级别的语言，汇编语言，您可以专门为一种类型的CPU编写，只使用CPU可以使用的指令。几乎没有抽象，写得好的时候比C/C++快2倍或更多。

Javascript是开始学习的好地方

学习Javascript是一个很好的开始，使用它学习的技能可以转移到任何其他语言。JavaScript已经走过了很长的路。10年前，1000个对象的动画在JS中是闻所未闻的，现在你可以编写合理的2D和3D游戏了。

你所说的滞后是由于帧速率下降造成的。如果可以的话，Javascript将以每秒60帧的速度运行。如果你把它交给大量的工作，它将被迫跳过一帧。这样的结果是一个变化的帧速率和显示为抖动或急动的动画。补偿是有办法的。

在为JS编写游戏时，非常熟悉JS的工作原理，什么是慢的，什么是快的是很重要的。可悲的是，一般规则是，代码越容易编写，结果就越慢。聪明的设计也很重要，只做需要的事情（即不要在屏幕外处理物体物理，不要预先计算数据，你真的需要1000个物体吗？或者100个带有10个预先绘制粒子的图像会得到类似的效果吗）

Javascript是一种很好的语言，具有表达能力、宽容性和可移植性。但你必须接受它的缺点（即它的速度慢）。如果你想编写高性能游戏，你最好学习C++