如何衡量脚本执行和*解析*时间？

Question

据我所知,脚本是在javascript中同步下载和执行的.因此,如果我们编写以下代码:

<script type='text/javascript'>console.time('core')</script>
<script type='text/javascript' src="guicore.js"></script>
<script type='text/javascript'>console.timeEnd('core')</script>

我们将在控制台的总时间内看到下载,解析和执行js.我们如何排除解析时间？只需添加类似的文件,但所有代码都已注释掉.或多或少,这种技术应该有效.

问题是这只是不起作用=)

我对代码进行了优化,将执行时间从90毫秒减少到25毫秒,但Chrome的时间约为100±10ms,Firefox的时间约为160±15ms.

好吧,我知道我可以使用分析器,但问题是:"如何正确测量js解析时间"以及我测量了什么.Research.reverse-engineering非常有趣,但也许有人深入了解这个领域.

Answer 1

您不能仅使用Web API来独立于执行时间准确地测量脚本解析时间。不同的浏览器在进行解析时会采用不同的策略，其中一些会在执行脚本时逐步进行解析，或者在假定不太可能立即执行代码块的情况下甚至进行“部分解析”（例如，一个函数那不是IIFE，请参阅optimize-js README中的一些详细信息。

使用不同的<script>标签是最准确的方法来至少捕获两个解析和执行时间。我要对您的代码段进行的唯一修改是：

<script>
  performance.mark('start');
</script>
<script src="myscript.js"></script>
<script>
  performance.mark('end');
  performance.measure('total', 'start', 'end');
</script>

请注意，高精度的用户计时API的使用，作为一个额外的好处，它将在Chrome / Edge / IE开发人员工具（如果您愿意的话，还可以使用Windows Performance Analyzer和WebPageTest之类的工具）中显示可视化内容。

从技术上讲，第三<script>个脚本不是必需的，因为您可以将标记/小节附加到第二个脚本的末尾。但是第一个<script>当然必须捕获所有解析时间。您可以在开发工具中验证标记/度量是否包含所有初始解析和执行时间。

Answer 2

打开 Chrome 并打开开发者工具，然后转到“时间轴”选项卡。如果您按下记录按钮（左下角实心圆圈），然后重新加载页面，它将为您提供相当详细的时间表，分为特定类型的活动（发送请求、解析、评估），计时精确到微秒。