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 さん
ありがとうございます。勉強になりました。

Answer 1

ローカルテスト

まず、下記リンク先のHTMLソースを元にHTMLファイルをローカルに作成し、ブラウザで開いてください。

• Plunker - teratail questions/u9jw9qbma2b7k8

li要素が描画されたら、コンソールで下記コードを実行し、コンソールに出力されたすべての値を比較してください。

document.getElementsByTagName('li').length;

jsfiddleやplunkerはiframe上に描画しており、コンソールで上記コードを叩くと、別のドキュメント(iframe要素がある文書)のli要素数を返します。
コンソールでコードを実行する場合は、ローカルテストしてください。

回答

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

DOMツリー上にオブジェクトが追加されるタイミングと描画タイミングが異なるためです。

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

ページの描画終了をつかまえたいのなら、loadイベントハンドラ上で実行してください。
最も、本コード上では、DOMContentloadedや</body>手前と評価値は同じなので、loadイベントを待つ意味はないと思います。

参考情報

• domcontentLoaded load body 手前 - Google 検索

Re: kemusi さん