debugging 为什么使用Chrome性能工具可以使页面更快?

bvk5enib  于 2023-10-24  发布在  其他
关注(0)|答案(1)|浏览(129)

我正在开发一个Web组件库,我的表(网格)出现了一个缓慢的问题,我正在尝试调试。
当我测试我的页面时,500行表格的构建需要11秒。现在,如果我启动Devtools性能工具,并重新加载我的表格,它只需要2秒。这是每次:11秒没有性能分析,2秒如果它正在运行。
怎么会这样?
同样的事情在Firefox上只需要0.5秒,不管有没有perf分析。
我可以在网上建立一个例子,如果有人有兴趣研究它。
谢谢

vfwfrxfs

vfwfrxfs1#

不幸的是,性能基准测试并不是一个绝对稳定的东西。例如,一段代码可能会根据它之前执行的代码显示出不同的性能。有时候,一段代码可能会通过执行完全不同的代码来使用JS引擎之前所做的一些优化。所以我担心性能工具会推动JS引擎优化一些后来用于基准测试的代码。为了分析代码,应该在一个页面上单独运行,以获得理想的结果。
以两个基准测试为例。
正如你在下面的结果中看到的,Chrome Nina's solutionNina's reviver suggestion一起执行得更快。为了避免这种情况,我们需要在干净的页面上执行每个解决方案,这将是我的基准测试工具的下一个版本。Firefox给出了稳定的结果。

` Chrome/117
----------------------------------------------------------------
Nina's solution             1.0x  |  x1  115  125  126  146  173
Alexander's solution        1.3x  |  x1  150  152  154  162  169
Nina's reviver suggestion   5.8x  |  x1  670  678  679  700  739
----------------------------------------------------------------
https://github.com/silentmantra/benchmark `
` Firefox/118
----------------------------------------------------------------
Nina's solution             1.0x  |  x1   83   84   86  108  115
Nina's reviver suggestion   1.8x  |  x1  150  151  156  164  188
Alexander's solution        2.2x  |  x1  181  182  195  206  261
----------------------------------------------------------------
https://github.com/silentmantra/benchmark `
const chunk = [
    { "x": "1", "y": "12" },
    { "x": "2", "y": "12" },
    { "x": "3", "y": "12" },
    { "x": "4", "y": "25" },
    { "x": "5", "y": "45" },
    { "x": "6", "y": "49" }
];

let aa = [];

let count = 100009;
while (count--) {
    aa.push(...chunk);
}

aa = JSON.parse(JSON.stringify(aa));

// @benchmark Nina's solution
aa.map(o => Object.fromEntries(Object.entries(o).map(([k, v]) => [k, +v])));

// @benchmark Nina's reviver suggestion
JSON.parse(JSON.stringify(aa), (k, v) => typeof v === 'string' ? +v : v);

// @benchmark Alexander's solution
JSON.parse(JSON.stringify(aa).replace(/"(\d+)"/g, '$1'));

const CYCLES = 1;
/*@end*/eval(atob('e2xldCBlPWRvY3VtZW50LmJvZHkucXVlcnlTZWxlY3Rvcigic2NyaXB0Iik7aWYoIWUubWF0Y2hlcygiW2JlbmNobWFya10iKSl7bGV0IHQ9ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7dC5zcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9zaWxlbnRtYW50cmEvYmVuY2htYXJrL2xvYWRlci5qcyIsdC5kZWZlcj0hMCxkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHQpfX0='));
` Chrome/117
-----------------------------------------------------------
Alexander's solution   1.0x  |  x1  141  152  157  159  168
Nina's solution        1.0x  |  x1  147  154  163  167  169
-----------------------------------------------------------
https://github.com/silentmantra/benchmark `
` Firefox/118
-----------------------------------------------------------
Nina's solution        1.0x  |  x1   88   88   88   98  130
Alexander's solution   2.1x  |  x1  181  185  190  204  216
-----------------------------------------------------------
https://github.com/silentmantra/benchmark `
const chunk = [
    { "x": "1", "y": "12" },
    { "x": "2", "y": "12" },
    { "x": "3", "y": "12" },
    { "x": "4", "y": "25" },
    { "x": "5", "y": "45" },
    { "x": "6", "y": "49" }
];

let aa = [];

let count = 100009;
while (count--) {
    aa.push(...chunk);
}

aa = JSON.parse(JSON.stringify(aa));

// @benchmark Nina's solution
aa.map(o => Object.fromEntries(Object.entries(o).map(([k, v]) => [k, +v])));

// @benchmark Alexander's solution
JSON.parse(JSON.stringify(aa).replace(/"(\d+)"/g, '$1'));

const CYCLES = 1;
/*@end*/eval(atob('e2xldCBlPWRvY3VtZW50LmJvZHkucXVlcnlTZWxlY3Rvcigic2NyaXB0Iik7aWYoIWUubWF0Y2hlcygiW2JlbmNobWFya10iKSl7bGV0IHQ9ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7dC5zcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9zaWxlbnRtYW50cmEvYmVuY2htYXJrL2xvYWRlci5qcyIsdC5kZWZlcj0hMCxkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHQpfX0='));

相关问题