javascript - JavaScript 代码越可读，速度就越慢？

Question

我遇到了this small JavaScript Program (在可汗学院)由其他人撰写:

/*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]);
    }
};

我看了一下代码，发现有点难以阅读。所以我决定做my own version with some object orientation :

// 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 个不同版本:

• 数组数据(原始)
• 点类(第一次重写)
• 普通对象(第二次重写)

在 Chrome 中，数组数据和普通对象在性能上没有明显的差异，Point 类明显慢一些。

我安装了 Firefox 进行测试，发现所有三个版本的性能都接近相同。

仔细观察一下，Firefox 的速度似乎介于 Chrome 的慢速和快速之间，可能更接近快速端。

Answer 1

这就是为什么人们使用 webpack 等 bundler 来提高可读代码的效率。结账https://webpack.js.org/