检查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.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>'; */

Live Demo

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