0

您好，我是编程新手，我制作了一个简单的 JavaScript，它绘制了简单的 canvas.arc 圆圈，这些圆圈在 2D x,y 坐标中移动。

只是出于好奇，我用 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();

作为小提琴：https ://jsfiddle.net/b8xbv7fu/

4

1 回答 1

3

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++

于 2015-12-07T15:18:53.740 回答