[英]JavaScript browser parsing speed testing
I'm looking into the speed of JavaScript parsers in web browsers, importantly it needs to be easy to demonstrate.我正在研究 Web 浏览器中 JavaScript 解析器的速度,重要的是它需要易于演示。 I came up with a simple test - the idea being that each script block is parsed and executed individually, so a large block of script could be timed:
我想出了一个简单的测试 - 想法是每个脚本块都被单独解析和执行,因此可以对一大块脚本进行计时:
<script>var start = new Date().getTime();</script>
<script>
/*! jQuery v1.8.2 jquery.com | jquery.org/license */
...
</script>
<script>alert ( new Date().getTime() - start );</script>
Superficially this appears to work, removing the middle script block will result in a negligible time.从表面上看这似乎可行,删除中间的脚本块将导致可以忽略不计的时间。
However I'm not certain that my logic is not fundamentally flawed.但是,我不确定我的逻辑是否存在根本性缺陷。
It seems the answer is broadly yes, but to get a reasonable result (like anything else) the test should be run many times to level out the effects of compilation caching and garbage collection. 答案似乎大致上是肯定的,但是要获得合理的结果(如其他任何结果),应该多次运行测试以使编译缓存和垃圾回收的效果趋于平衡。 The test above can easily be placed into the Parse-n-Load library: http://carlos.bueno.org/2010/02/measuring-javascript-parse-and-load.html
上面的测试可以轻松地放入Parse-n-Load库中: http : //carlos.bueno.org/2010/02/measuring-javascript-parse-and-load.html
Thanks for your help 谢谢你的帮助
This may be of help! 这可能会有帮助!
var start = new Date().getTime();
var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);
If you want to benchmark your JavaScript, include MilliSeconds etc. 如果您想对JavaScript进行基准测试,请添加MilliSeconds等。
var t = new Date();
var start = t.getTime()*1000 + t.getMilliseconds();
/* do something*/
var t2 = new Date();
var end = t2.getTime()*1000 + t.getMilliseconds();
alert("The Code needed " + (end-start) + " milliseconds. That are " + parseInt((end-start)/1000) + " seconds.");
You might want to differentiate between parsing and execution time. 您可能需要区分解析时间和执行时间。 You could do something like
你可以做类似的事情
<script>start = Date.now();</script>
<script>
parsed = Date.now();
/*! jQuery v1.8.2 jquery.com | jquery.org/license */
…
</script>
<script>var end = Date.now();
alert ( "parsed in " + (parsed - start) + "ms" );
alert ( "executed in " + (end - parsed) + "ms" );
alert ( "overall time: " + (end - start) + "ms" );
</script>
With that you might be able to detect cached parse trees etc. Yet, for more distinct information have a look at your developer tools, they show such type of information in their profiler section. 这样,您也许可以检测到缓存的解析树等。但是,要了解更多独特的信息,请查看您的开发人员工具,它们会在分析器部分中显示此类信息。 Or in Opera, it's included in the load process of scripts in the network panel.
或者在Opera中,它包含在网络面板中的脚本加载过程中。
This answer is from 10 years in the future.这个答案来自10年后的未来。
There are a number of approaches to timing web page processes including:有许多方法可以对网页进程进行计时,包括:
Date
-related methods: Date
相关方法:
Date.now();
and:和:
console.time
-related methods: console.time
相关方法:
console.time('myTimer');
console.timeLog('myTimer');
console.timeEnd('myTimer');
but, since late 2015, the ideal way to time web page processes using high-resolution timestamps has been:但是,自 2015 年底以来,使用高分辨率时间戳为网页进程计时的理想方式是:
window.performance.now();
Performance
:Performance
: The Performance
interface, accessed via window.performance
has numerous methods, including:通过
window.performance
访问的Performance
接口有许多方法,包括:
timeOrigin
mark
measure
getEntries
toJSON
and more.和更多。
But in order to time a script, all you need is window.performance.now()
:但是为了给脚本计时,您只需要
window.performance.now()
:
let scriptStart = window.performance.now();
let scriptEnd = window.performance.now();
let scriptDuration = (scriptEnd - scriptStart);
let paragraph = document.querySelector('p'); let button = document.querySelector('button'); const runTimedScript = () => { let scriptStart = window.performance.now(); for (let i = 0; i < 10000; i++) { paragraph.textContent = 'Loop iteration ' + (i + 1); } let scriptEnd = window.performance.now(); let scriptDuration = (scriptEnd - scriptStart); button.textContent = 'Re-run Script'; console.log('The script ran in ' + scriptDuration + ' milliseconds'); } button.addEventListener('click', runTimedScript, false);
button { cursor: pointer; }
<p></p> <button type="button">Run Script</button> <p>To see how long the script takes to run,<br /> click the button above repeatedly.</p>
To find out more about the Performance
Interface, see:要了解有关
Performance
接口的更多信息,请参阅:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.