如何对前端性能进行基准测试以加载巨大的数组？

Question

我想在前端放置一个包含大约100,000条数据的数组（或对象数组）。它将如何影响页面性能，以及如何对其进行基准测试？这不是对后端的 API 请求。

示例：

const array = [0,1,2,3,4,... ...,100000]

或：

const array = [
  {
    id:0,          // indexing just for example
    key1:0,        // numerical value
    key2:"value-1" // string value
  },
  ...
  {
    id:100000,           // indexing just for example
    key1:99,             // numerical value
    key2:"value-100000"  // string value
  },

这是我已经尝试过的。

<script>
    const start = Date.now();
    
    import {data} from './data'
    import {onMount} from 'svelte'

    onMount(() => {
        console.log('starting timer...');
        console.log(data)
        const millis = Date.now() - start;
        console.log(`milliseconds elapsed = ${millis}`);
    })
</script>

但它计算不正确，因为它只记录 1-3 毫秒，而花费了相当长的时间（10-30 秒），有时浏览器会稍微挂起。也许我的

Date.now()

放置位置错误？

Answer 1

1. 您进行基准测试

   console.log

   ，这没有意义，而是对特定算法进行基准测试（例如填充数组）
2. 1 次基准测试没有多大意义——没有有意义的精度。您应该将其循环 100 毫秒并计算平均值或更好的最小值。
3. 如果你想优化一些重型算法，通常你应该比较至少 2 个解决方案来选择最好的。

我制作了自己的基准测试工具并在这里使用，例如很容易比较 2 个数组填充算法：

` Chrome/124
------------------------------------------------------------------------------------------
>                    n=100       |      n=1000       |     n=10000      |     n=100000    
push()         ■ 1.00x   x1m 301 | ■ 1.00x x100k 318 | ■ 1.00x x10k 286 | ■ 1.00x  x1k 706
Array.from()     8.27x x100k 249 |   7.77x  x10k 247 |   8.43x  x1k 241 |   3.78x x100 267
------------------------------------------------------------------------------------------
https://github.com/silentmantra/benchmark `

let $length = 100;

// @benchmark push()
const result = [];
for(let i = 0; i < $length; i++) result.push(i+1);
result;

// @benchmark Array.from()
Array.from({length: $length}, (_, i) => i+1);

/*@skip*/ fetch('https://cdn.jsdelivr.net/gh/silentmantra/benchmark/loader.js').then(r => r.text().then(eval));