如何度量脚本执行和*解析*时间？
据我所知，脚本是在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 to减少到25 to，但Chrome和Firefox的执行时间相同，分别为100±10 to和160±15 to。
好的，我知道我可以使用分析器，但是的问题是：“如何正确地度量js解析时间”以及我测量了什么。研究。逆向工程很有趣，但是也许有人对这个领域有深入的了解。
回答 5
Stack Overflow用户
发布于 2013-03-12 09:14:30
打开Chrome，打开开发者工具，进入“时间线”选项卡。如果您按下记录按钮(填充圆圈，左下角)，然后重新加载页面，它将给您一个相当详细的时间线，细分为特定类型的活动(发送请求、分析、评估)，计时到微秒。
Stack Overflow用户
发布于 2018-07-11 20:34:58
您无法单独使用web精确地度量脚本解析时间，而不依赖于执行时间。不同的浏览器在执行解析时有不同的策略，其中一些浏览器将在脚本执行时逐步解析，甚至在假定代码块不太可能立即执行的情况下进行“部分解析”(例如，一个非生命周期的函数，请参阅一些详细信息在优化-js自述中)。
使用单独的<script>标记是至少捕获解析和执行时间的最准确的方法。我要对您的片段所做的唯一修改是：
<script>
performance.mark('start');
</script>
<script src="myscript.js"></script>
<script>
performance.mark('end');
performance.measure('total', 'start', 'end');
</script>请注意高精度用户定时API的使用，这是一个额外的好处，它将在Chrome/Edge/ added工具(以及像和WebPageTest这样的工具(如果你愿意的话)中显示可视化)。
从技术上讲，第三个<script>是不必要的，因为您可以将标记/度量附加到第二个脚本的末尾。但是第一个<script>当然是捕获所有解析时间所必需的。您可以在dev工具中验证标记/度量是否包含所有初始解析和执行时间。
Stack Overflow用户
发布于 2016-07-07 18:44:29
我知道这是个老生常谈的问题，但我自己在寻找解决办法的时候遇到了这个问题。您可以使用浏览器中的dev工具来查看这一点，但是如果您想在代码中这样做，这就是我最后使用的方法。
下面的scriptLoadParseDuration函数将获取.js文件的URL，将其放入<script>元素，并将加载/解析持续时间记录到控制台。
请记住，这将在当前DOM上下文中执行您正在分析的<script>。因此，在下面的示例中:即使删除了脚本，jQuery仍然可以在全局范围内访问。但是，可以扩展脚本，在<iframe>中完成所有这些工作，以隔离它。
function scriptLoadParseDuration(url) {
var start;
var script = document.createElement('script');
// <script> must be attached to the document to actually load the file
document.querySelector('html').appendChild(script);
// Calculate load/parse duration once script has loaded
script.addEventListener('load', function scriptLoad() {
// Calculate load/parse duration
console.log('Duration: ' + (Date.now() - start) + 'ms');
// Remove <script> from document
script.parentElement.removeChild(script);
}, false);
// Get current time in milliseconds
start = Date.now();
// Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request
script.src = url + '?' + Math.floor(Math.random() * 9e9);
}
var url = 'https://code.jquery.com/jquery-3.0.0.min.js';
scriptLoadParseDuration(url);
下面是一个示例，说明在删除jQuery之后，<script>仍然处于全局范围内。
function scriptLoadParseDuration(url) {
var start;
var script = document.createElement('script');
console.log('`jQuery` before attaching: ' + typeof jQuery);
// <script> must be attached to the document to actually load the file
document.querySelector('html').appendChild(script);
// Calculate load/parse duration once script has loaded
script.addEventListener('load', function scriptLoad() {
// Calculate load/parse duration
console.log('Duration: ' + (Date.now() - start) + 'ms');
console.log('`jQuery` once attached: ' + typeof jQuery);
// Remove <script> from document
script.parentElement.removeChild(script);
console.log('`jQuery` after detach: ' + typeof jQuery);
}, false);
// Get current time in milliseconds
start = Date.now();
// Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request
script.src = url + '?' + Math.floor(Math.random() * 9e9);
}
var url = 'https://code.jquery.com/jquery-3.0.0.min.js';
scriptLoadParseDuration(url);
https://stackoverflow.com/questions/15342687
复制相似问题
腾讯云开发者
