実現したいこと
JavaSctiptで「今HTMLにある<li>がいくつあるか数える」という処理に何秒かかるか計測したいです。
該当のソースコード
実現するために書いたコードです。
html
<p></p> <ul></ul>
<li>は大量にあるのでJavaScriptでappendしており、その後、appendされた<li>がいくつあるか数えるのにかかる処理を計測ししたいのです。JavaScript
// 数えるための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);
発生している問題
しかしこちらのコードを実行すると、コンソールの計測時間が先に出力され、そのあとにHTMLが描画されているように見えます → https://jsfiddle.net/9g2k3ahu/
これでは「今HTMLにある」という条件になっていないと思うのです。
(もしかして、そう見えるだけで、実際には「今HTMLにある」を数える処理にかかった時間になっているとかあるでしょうか?)
知りたいこと
どうしてこうなってしまうのでしょうか?
そしてどのようにすれば「今HTMLにある」という条件を満たした上で、数える処理にかかった時間を計測できるようになりますでしょうか。
試したこと
jQueryと何が違うかと思って生JavaScriptでも試しましたが、やっぱりこれもコンソールの計測時間が先に出力され、そのあとにHTMLが描画されているように見える問題は変わりません。
JavaScript
// 今HTMLにある<li>がいくつあるか数える document.getElementsByTagName('p')[0].textContent = document.getElementsByTagName('li').length;
まだ回答がついていません
会員登録して回答してみよう