JavaSctiptで「今HTMLにある<li>がいくつあるか数える」という処理に何秒かかるか計測したいです。

Question

実現したいこと

JavaSctiptで「今HTMLにある<li>がいくつあるか数える」という処理に何秒かかるか計測したいです。

該当のソースコード

実現するために書いたコードです。

<p></p>
<ul></ul>

// 数えるためのliを大量に（liMaxの数だけ）追加する
let lis = '';
const liMax = 50000;

for (let step = 0; step < liMax; step++)
lis += '<li>' + step + '</li>';

$('ul').append(lis);

// 計測開始
const startTime = performance.now(); 

// 今HTMLにある<li>がいくつあるか数える
$('p').html( $('li').length );

// 計測終了
const endTime = performance.now();

// HTMLにあるliを数えるのに何ミリ秒かかったか
console.log(endTime - startTime); 

<li>は大量にあるのでJavaScriptでappendしており、その後、appendされた<li>がいくつあるか数えるのにかかる処理を計測ししたいのです。

発生している問題

しかしこちらのコードを実行すると、コンソールの計測時間が先に出力され、そのあとにHTMLが描画されているように見えます　→　https://jsfiddle.net/9g2k3ahu/

これでは「今HTMLにある」という条件になっていないと思うのです。

（もしかして、そう見えるだけで、実際には「今HTMLにある」を数える処理にかかった時間になっているとかあるでしょうか？）

知りたいこと

どうしてこうなってしまうのでしょうか？

そしてどのようにすれば「今HTMLにある」という条件を満たした上で、数える処理にかかった時間を計測できるようになりますでしょうか。

試したこと

jQueryと何が違うかと思って生JavaScriptでも試しましたが、やっぱりこれもコンソールの計測時間が先に出力され、そのあとにHTMLが描画されているように見える問題は変わりません。

// 今HTMLにある<li>がいくつあるか数える
document.getElementsByTagName('p')[0].textContent
= document.getElementsByTagName('li').length;

Comments

[hoshi-takanori]

HTML というか DOM オブジェクトとしては存在するが、まだ描画されてないだけでしょうね。

[2ckD]

答えようと思ったらもう答えがあった
まさにこれですね

[think49]

既に答えはありますが、質問前に検証することをお勧めします。
「画面が表示されてから」、document.getElementsByTagName('li').length の値を確認し、先のコードの実行結果と比較すれば、これでは「今HTMLにある」という条件になっていないのか、が確認できますよね。

[nikuatsu]

失礼致します。think49様のコメントが気になったのですが、document.getElementsByTagName('li').length をconsoleで実行すると、30と出力されませんでしょうか？liはもっと多く出力されているはずですよね…

[think49]

@nikuatsu さん
回答しました。
https://teratail.com/questions/u9jw9qbma2b7k8#reply-fthwdrznm6ykdl

https://jsfiddle.net/9g2k3ahu/
のコンソールで document.getElementsByTagName('li').length を実行すると、30になります。
loadイベントハンドラ上で実行すれば、期待通りの値が返ります。
https://jsfiddle.net/t520dvf3/

[nikuatsu]

@think49 さん
ありがとうございます。勉強になりました。