When something is added to the DOM in memory, does it cause a browser overflow?

When something is added to the DOM in memory, does it cause a browser overflow? Or is it only when the pixels on the screen are told to change that an overflow is occurring? For instance:

Case 1: Img Elements Added to the DOM One at a Time

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
}

Case 2: Img elements are placed in a separate array and then added to the 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);

Case 3: In any case, 1 or 2, but by default parentDiv is set to display:none;and becomes visible after the completion of each cycle.

Basically, what I want to know is the browser just starting to re-melt when the screen pixels say change?

Btw, , , - . .

+5
1

, , , ?

, DOM. ( , ).

. dev.opera.com DOM?.

: , DOM , , . , 1 2 .

DOM, №3. , , , . , .

+3

All Articles