外部リソースからコンテンツをダウンロードして表示する div があります。
この div をロードするのにかかる時間をどのように判断できますか?
javascript を使用して、div の前後の現在のタイムスタンプを出力し、時間の差を使用して読み込み時間を検出できます。
擬似コード:
<script>
console.log(currentTime)
</script>
<div>
load external resource
</div>
<script>
console.log(currentTime)
</script>
dynatrace のようなツールを使用する必要がありますか?
このコンテンツは同期的にロードされます。読み込まれているコンテンツは JavaScript ベースです。
を作成してDOMElement追加する前にタイムスタンプを作成し、アクションが完了した後にタイムスタンプを作成します。
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 です。