5

メモリ内のDOMに何かが追加されると、ブラウザのリフローが発生しますか？それとも、リフローが発生するのは、画面上のピクセルが変更するように指示されたときだけですか？例えば：

ケース1：一度に1つずつDOMに追加されるImg要素

var parentDiv = $('#imgHolder');
var imgArray = []; // Array of img paths populated in another function

$.each(imgArray, function()
{
    parentDiv.append(createImgEle(this)); // createImgEle() // returns an <img> with the right src
}

ケース2： Img要素は別の配列に配置されてからDOMに追加されます

var parentDiv = $('#imgHolder');
var imgArray = []; // Array of img paths populated in another function
var tempArray = []; // Holds the img elements until its fully populated

$.each(imgArray, function()
{
    tempArray.push(createImgEle(this));
}
parentDiv.append(tempArray);

ケース3：ケース1または2のいずれかですが、デフォルトでは、parentDivが設定されdisplay:none;、各ループが実行された後に表示されます。

基本的に、私が知りたいのは、画面のピクセルが変更されるように指示されたときにのみ、ブラウザーがリフローを開始するのかということです。

ところで、コードは単なる例であり、本番環境ではないので、論理エラーについて私を非難しないでください。アドバイスありがとうございます。

4

1 に答える 1

3

基本的に、私が知りたいのは、画面のピクセルが変更されるように指示されたときにのみブラウザがリフローを開始するということですか?

いいえ、DOM が変更されるとブラウザはリフローします。その後、再描画します (画面上のピクセルに変更を指示します)。

詳細については、この dev.opera.com の記事と、DOM 環境でリフローが発生するのはいつですか?という質問をご覧ください。.

要するに、たとえば要素の配列をループに挿入する場合など、後続の DOM 変更に対する最適化はもちろんあります。ケース1と2が著しく異なるとは思いません。

本当に重い DOM の変更を行っている場合にのみ、ケース #3 が必要になることがあります。これにより、挿入ループ中にリフローが発生した場合、非表示の要素に遭遇すると停止するため、基本的に防止されます。ただし、ループの前後の 2 つの表示変更により、一部のブラウザーではちらつきが発生する可能性があります。

于 2013-02-08T22:40:11.013 に答える