javascript - 检查div的加载时间

Question

我有一个 div，它从外部资源下载内容然后显示它。

如何确定加载此 div 需要多长时间？

我可以使用 javascript 在 div 之前和之后输出当前时间戳，然后使用时间差来发现加载时间：

伪代码：

<script>
console.log(currentTime)
</script>

<div>
load external resource
</div>

<script>
console.log(currentTime)
</script>

我应该使用像 dynatrace 这样的工具吗？

此内容是同步加载的。正在加载的内容是基于 javascript 的。

Answer 1

如果您只想在Console中执行此操作，您可以使用console.time和console.timeEnd

console.time('loadDiv');

// load external resource synchronously

console.timeEnd('loadDiv'); // time taken logged

Answer 2

DOMElement在创建和附加它之前创建一个时间戳，然后在操作完成后创建一个时间戳。

JavaScript

var starttime = new Date().getTime();

document.body.innerHTML = '<div id="chocolate">Hot Chocolate!</div>';
var endtime = new Date().getTime();

console.log('It took ' + parseInt(endtime-starttime,10) + 'ms');
/* document.body.innerHTML += '<p>It took ' + parseInt(endtime-startime,10) + 'ms</p>'; */

现场演示

对 JavaScript 代码进行基准测试的在线替代方法是jsperf.com