JavaScript代码更易读会变慢吗？

Question

我发现了这个小型JavaScript程序（在可汗学院上）由别人编写:

/*vars*/
frameRate(0);
var Sz=100;
var particles=1000;
scale(400/Sz);
var points=[[floor(Sz/2),floor(Sz/2),false]];
for(var i=0;i<particles;i++){
    points.push([floor(random(0,Sz)),floor(random(0,Sz)),true]);
}
var l=points.length-1;
var dirs=[[0,1],[1,0],[0,-1],[-1,0]];
/*functions*/
var move=function(p1){
    var mv=dirs[floor(random(0,4))];
    var temp=true;
    for(var i=l;i>=0;i--){
        if(!points[i][2]&&points[i][0]===p1[0]+mv[0]&&points[i][1]===p1[1]+mv[1]){
            temp=false;
            p1[2]=false;
            i=0;
        }
    }
    if(temp){
        p1[0]+=mv[0];
        p1[1]+=mv[1];
        if(p1[0]<0){p1[0]=0;}
        if(p1[0]>Sz){p1[0]=Sz;}
        if(p1[1]<0){p1[1]=0;}
        if(p1[1]>Sz){p1[1]=Sz;}
    }
};
/*draw*/
draw= function() {
    background(255);
    for(var i=points.length-1;i>=0;i--){
        stroke(0);
        if(points[i][2]){
            move(points[i]);
        }
        else{
            stroke(0,0,255);
        }
        point(points[i][0],points[i][1]);
    }
};

我查看了代码，发现有些难以阅读。所以我决定用一些面向对象的方法来制作我自己的版本：

// apparently, object orientation is a lot slower than just putting the data in arrays

var Point = function(x, y) {
    this.x = x;
    this.y = y;
    this.moving = true;
};

// static constant
Point.dirs = [
    {x:0, y:1},
    {x:1, y:0},
    {x:0, y:-1},
    {x:-1, y:0}
];

/*vars*/
frameRate(0);
var Sz=100;
var particles=1000;
scale(400/Sz);

// first point
var points=[new Point(floor(Sz/2), floor(Sz/2))];
points[0].moving = false;  // blue

// remaining points
for(var i=0;i<particles;i++){
    points.push(new Point(floor(random(0, Sz)), floor(random(0, Sz))));
}
var l=points.length-1;

/*functions*/
var move = function(p1){
    var mv = Point.dirs[floor(random(0,4))];
    var notAttached = true;
    for(var i = l; i >= 0; i--) {
        if(!points[i].moving && points[i].x === p1.x + mv.x && points[i].y === p1.y + mv.y) {
            notAttached = false;
            p1.moving = false;
            i = 0;
        }
    }
    if (notAttached) {
        p1.x += mv.x;
        p1.y += mv.y;
        if (p1.x < 0) { p1.x = 0; }
        if (p1.x > Sz) { p1.x = Sz; }
        if (p1.y < 0) { p1.y = 0; }
        if (p1.y > Sz) { p1.y = Sz; }
    }
};
/*draw*/
draw= function() {
    background(255);
    for(var i=points.length-1; i >= 0; i--) {
        stroke(0);
        if (points[i].moving) {
            move(points[i]);
        }
        else {
            stroke(0, 0, 255);
        }
        point(points[i].x, points[i].y);
    }
};

原始版本仅使用数组存储数据。索引[0]是x坐标，索引[1]是y坐标，索引[2]是标记。我只是把point[0]替换成point.x等所需的更改。但是我惊讶地发现我的版本要慢得多。有没有更好的方法使代码更易读而不失性能？还是我们必须为可读性而失去性能？JavaScript引擎：Windows 10中的Chrome。编辑：发现更多信息：正如Ryan所指出的那样，使用普通对象而不是Point类-new Point(x, y)→{x:x, y:y, moving:false} - 将性能提高到接近原始水平。因此，正是Point类使其变慢。现在正在处理程序的3个不同版本：数组数据（原始）、Point类（第一次重写）和普通对象（第二次重写）。在Chrome中，数组数据和普通对象在性能方面没有明显差异，Point类则明显较慢。我安装了Firefox进行测试，并发现三个版本之间性能接近。初步判断，Firefox速度位于我从Chrome获取的慢速和快速速度之间，可能更接近快速端。

- beauxq

---

你是如何测试性能的？只进行一次还是多次运行？ - Avery

有点冒险，但如果您将“dirs”作为变量而不是“Point”的属性，会发生什么？ - Ry-

@Ryan 那是我尝试的第一件事情之一，但没有看到任何区别。使用普通对象而不是类就足以让我恢复到原来更快的性能。 - beauxq

专业提示：将 Point 改为返回对象的函数。然后摆脱 new。这样你就可以享受轻松的普通对象的优势，而且你的其余代码可以完全保持不变：function Point(x, y) { return { x: x, y: y, moving: false }; } .... points.push(Point(floor(random(0, Sz)), floor(random(0, Sz))));。 - JLRishe

如果你想要兼顾性能和可读性，我的建议是使用Emscripten或Ecmascript。如果你在制作游戏的话，Emscripten是性能最佳的选择；如果你在制作网站的话，则应选用Ecmascript。请记住，编程语言越高级，代码越可读但性能越低。汇编语言的性能最好，批处理脚本等语言的性能最差。折中之道是使用可以转换为更高性能语言的语言，比如将Ecmascript转换为JavaScript。 - Simon Hyll

Answer 1

这就是为什么人们使用像webpack这样的打包工具，以使可读代码更加高效。请查看https://webpack.js.org/。

- Anthony Delgado

Answer 2

当然，你不是唯一看到/将要看到这段代码的程序员（其中一些程序员可能是初学者，甚至很难理解代码）。

对于你的代码，我会选择可读性而不是性能！

我会摆脱this和new。 this是全局对象还是未定义的？从你的示例中我无法判断！你必须知道你所在的上下文。

过早优化是万恶之源。Donald Knuth。

浏览器已经变得非常擅长优化我们编写的代码了。

你可以使用performance.now()来测试程序的速度，这相当准确：

var t1 = performance.now() 
//your code
var t2 =  performance.now()
console.log(t2-t1);

或者你可以使用jsperf (https://jsperf.com/)。我相信还有其他几个网站也提供了这种功能。

JLRishe发表了很棒的评论：更易读的JavaScript代码速度较慢？，我完全同意。

- aciurea