JavaScript浏览器解析速度测试答案

【问题标题】：JavaScript browser parsing speed testingJavaScript浏览器解析速度测试
【发布时间】：2012-10-12 11:57:35
【问题描述】：

我正在研究 Web 浏览器中 JavaScript 解析器的速度，重要的是它需要易于演示。我想出了一个简单的测试 - 想法是每个脚本块都被单独解析和执行，因此可以对一大块脚本进行计时：

<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>

从表面上看，这似乎可行，删除中间的脚本块将导致可以忽略不计的时间。

但我不确定我的逻辑是否存在根本性缺陷。

【问题讨论】：

除此之外，您可能会发现浏览提交给 JSPerf 的一些性能测试所采用的策略很有趣：jsperf.com/browse
您会对此有所了解，但不要忘记缓存对加载和解析时间的影响。如果浏览器以前看过一个脚本，它可能会缓存已编译的代码。此外，您不是第一个对解析速度感到好奇的人。 carlos.bueno.org/2010/02/…
我经常使用 JSPerf，但我还没有想到一种方法可以在那里适当地实现它。你说得对，它是一个很好的资源。 @MikeMcCaughan 如果只是在文档上点击刷新它会产生巨大的差异，我很快就警告说，这只能在禁用缓存或在新环境中完成。
@i_like_robots;这里我指的是 JavaScript 引擎缓存代码的编译版本，而不是浏览器页面缓存。请参阅以下答案以获得更好的概述：stackoverflow.com/questions/1096907/…
@MikeMcCaughan 有用，谢谢

标签： javascript performance browser pagespeed

【解决方案1】：

这可能会有所帮助！

var start = new Date().getTime();
var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);

【讨论】：

【解决方案2】：

如果您想对 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.");

【讨论】：

我不确定这与我已经在做的事情有何不同，getTime() 方法已经返回毫秒。但是感谢您指出 getMilliseconds() 方法，它可能有用。

【解决方案3】：

似乎答案大致是肯定的，但为了获得合理的结果（与其他任何事情一样），应该多次运行测试以平衡编译缓存和垃圾收集的影响。上面的测试可以很容易地放入 Parse-n-Load 库中：http://carlos.bueno.org/2010/02/measuring-javascript-parse-and-load.html

感谢您的帮助

【讨论】：

【解决方案4】：

您可能想要区分解析时间和执行时间。你可以做类似的事情

<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>

有了它，您可能能够检测缓存的解析树等。但是，要了解更多不同的信息，请查看您的开发人员工具，它们会在其分析器部分显示此类信息。或者在 Opera 中，它包含在网络面板中脚本的加载过程中。

【讨论】：