私は純粋なフロントエンドの開発者ではありません。なぜなら、各繰り返しで要素がDOMに追加されるループで、結果として生じるDOMは、ループの終わりにのみ表示され、漸進的には表示されません。ループの終わりのすべてではなく、すべての繰り返しで1つの要素をDOMに追加してください。
<html>
<body>
<div id="body"></div>
</body>
<script>
for(var i = 0; i < 1000000; i++){
document.getElementById('body').appendChild(document.createElement('br'));
document.getElementById('body').appendChild(document.createTextNode(i));
}
</script>
</html>
Javascriptが完了するまでのコードが実行されます。だから、定期的にディスプレイを更新するには、定期的にスクリプトの実行を終了し、さらに進めるためにあなたの関数を呼び出す何かをイベントキューに入れておく必要があります。たとえば、あなたがsetTimeoutでこれを行うことができ
：
(function loop(i) {
if (i > 10000) return; // end condition
document.body.appendChild(document.createElement('br'));
document.body.appendChild(document.createTextNode(i));
void document.body.offsetWidth;
setTimeout(loop.bind(null, i+1), 0);
})(0);これは金です、ありがとう – R01010010
これが徐々におそらく反復が十分な速さであり、あなたは何が起こっているかコンソールで見ることができない、追加された...
なし自動最適化はありません、あなたはパフォーマンスの世話をする必要があります。..再描画イベントが処理を受ける前に。
function TestCtrl() {
var body = document.body;
var child = function() {
var c = document.createElement('div');
c.className = 'child';
return c;
};
function Logger() {
console.log('log new element');
};
document.addEventListener("DOMNodeInserted", Logger);
for(var i = 0; i < 100; i++) {
console.log('adding element', i);
body.appendChild(child());
}
}
document.addEventListener('DOMContentLoaded', TestCtrl);.child {
height: 20px;
margin-bottom: 5px;
background: yellow;
}
.child:nth-child(even) {
background: pink;
}
彼らは、一度に1つを追加しましたのですか。ブラウザは、再描画する前に停止するのを待っています。 –
JavaScriptは1000000まですばやくカウントされ、ブラウザは再描画に時間がかかるため、 –
簡単な答えは、javascriptエンジンが同期タスクを完了し、DOMを更新できるときに、DOMがティックで "再ペイント"されるからです。より正確な答えは、実装、マイクロタスク、イベントループと最適化と関係しています – adeneo