JavaScript API性能对比系列三：二维表单按行遍历和按列遍历

以下是测试性能的环境

CPU	AMD Ryzen 9 5900HX with Radeon Graphics 八核
操作系统	Windows 11 家庭中文版 (64位)
内存	16GB(3200 MHz / 3200 MHz)
Nodejs	v18.16.0

代码

const rowCount = 10000;
const colCount = 10000;
const arr = Array(rowCount).fill(null).map(t => Array(colCount).fill(0));

console.time('按行遍历')
for (let row = 0; row < rowCount; row++) {
    for (let col = 0; col < colCount; col++) {
        const value = arr[row][col];
    }
}
console.timeEnd('按行遍历')

console.time('按列遍历')
for (let col = 0; col < colCount; col++) {
    for (let row = 0; row < rowCount; row++) {
        const value = arr[row][col];
    }
}
console.timeEnd('按列遍历')

测试结果

	行遍历	列遍历
1亿	39.183ms	94.127ms
2500万	11.964ms	21.389ms
900万	5.046ms	9.576ms
225万	2.782ms	2.937ms
100万	2.361ms	1.978ms
1万	0.35ms	0.162ms
100	0.07ms	0.009ms

总结

在行*列数量大于225万是行遍历快。

在行*列数量小于225万是列遍历快。

分析

一个二维数组，如下：

一般来说是行优先存储的数组，行优先遍历速度快。

反之，列优先存储的数组，列优先遍历速度快。

测试结果表明Javascript看起来用的不是这两种存储方式。

实际上Javascript的数组使用的是类似哈希表的方式去进行存储的。他的数据存储并不能保证是连续的，如果想使用连续的内存空间创建数组，请使用ArrayBuffer。