我正在开发一个Web组件库,我的表(网格)出现了一个缓慢的问题,我正在尝试调试。当我测试我的页面时,500行表格的构建需要11秒。现在,如果我启动Devtools性能工具,并重新加载我的表格,它只需要2秒。这是每次:11秒没有性能分析,2秒如果它正在运行。怎么会这样?同样的事情在Firefox上只需要0.5秒,不管有没有perf分析。我可以在网上建立一个例子,如果有人有兴趣研究它。谢谢
vfwfrxfs1#
不幸的是,性能基准测试并不是一个绝对稳定的东西。例如,一段代码可能会根据它之前执行的代码显示出不同的性能。有时候,一段代码可能会通过执行完全不同的代码来使用JS引擎之前所做的一些优化。所以我担心性能工具会推动JS引擎优化一些后来用于基准测试的代码。为了分析代码,应该在一个页面上单独运行,以获得理想的结果。以两个基准测试为例。正如你在下面的结果中看到的,Chrome Nina's solution与Nina's reviver suggestion一起执行得更快。为了避免这种情况,我们需要在干净的页面上执行每个解决方案,这将是我的基准测试工具的下一个版本。Firefox给出了稳定的结果。
Nina's solution
Nina's reviver suggestion
` 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='));
1条答案
按热度按时间vfwfrxfs1#
不幸的是,性能基准测试并不是一个绝对稳定的东西。例如,一段代码可能会根据它之前执行的代码显示出不同的性能。有时候,一段代码可能会通过执行完全不同的代码来使用JS引擎之前所做的一些优化。所以我担心性能工具会推动JS引擎优化一些后来用于基准测试的代码。为了分析代码,应该在一个页面上单独运行,以获得理想的结果。
以两个基准测试为例。
正如你在下面的结果中看到的,Chrome
Nina's solution
与Nina's reviver suggestion
一起执行得更快。为了避免这种情况,我们需要在干净的页面上执行每个解决方案,这将是我的基准测试工具的下一个版本。Firefox给出了稳定的结果。