CODEWITHSUNDEEP
htmlcss
user3362172
user3362172

Reputation: 33

Do large HTML elements take up more processing power or memory?

I have a large HTML element inside a fixed width div with overflow set to hidden, like so:

#container{
width:100px;
height:100px;
overflow:hidden;
}

#largebox{
width:100000px;
height:100px;
}

<div id="container">
    <div id="largebox">

    </div>
</div>

The inner div is that large because the content within it is dynamically generated and scrolls using javascript buttons. Could this large div size could potentially take up more memory or processing power to render? Would I be better off adding size as I need it with javascript?

I came here because I can't think of a way to test solely HTML render speeds. I might be overlooking the Chrome developers tools though. Could they be used to test this?

Upvotes: 3

Views: 818

Answers (2)

James G.
James G.

Reputation: 2904

JSfiddle for proof

Conclusion: No, large HTML elements do not appear to affect render size or memory in any large amount, but they can cause quirkiness.

In my fiddle, I tested adding different numbers of elements to the DOM, tested the time it took to manipulate a DOM element, and tested the time it takes to do basic math(to test memory).

Example output (in Chrome 32):

The first three tests use small elements, changing just the number of elements. They add 10, 350, and 1,000,000 0-sized elements to the container element, then run the tests. The DOM and memory tests show little difference from each other, meaning the number of elements in the DOM does not effect:

1) the time it takes to get an element from the DOM by id and edit its contents. 2) the memory available to javascript.

Init reg1 shows how long it took to insert all the data in the container, and the number following it and ending each test are the container height. These numbers show that adding a large amount of data to the DOM slows things down, though generally the amount is not significant. Please note that loading a page with this amount of HTML would slow things down more significantly than doing it in this manner does.

init1 reg10: 1.000ms (index):35
0 (index):37
init reg10: 7.000ms (index):38
DOM  reg10: 34.000ms (index):48
mem  reg10: 24.000ms (index):56
0 (index):58
init1 reg350: 1.000ms (index):35
0 (index):37
init reg350: 3.000ms (index):38
DOM  reg350: 29.000ms (index):48
mem  reg350: 25.000ms (index):56
0 (index):58
init1 reg100000: 229.000ms (index):35
0 (index):37
init reg100000: 705.000ms (index):38
DOM  reg100000: 29.000ms (index):48
mem  reg100000: 24.000ms (index):56
0

The first three tests use huge elements (1,000,000 width and height), changing just the number of huge elements . Again, it shows the same thing as the above tests. DOM speed and memory are not affected by the number or size of elements.

All these numbers are generally in line with the earlier tests, except the container height number. Since this number changes right after init1 ends and is consistent with the number at the end, we know the DOM is rendering near instantly, with no significant lag. However, on the final test, we exceed a memory limit, and it returns -33554432 for the container height. This does not slow it down at all. This is the quirkiness I mentioned earlier. These numbers should be used for tests. We do not know how this performs in various edge cases, and as such this should only be used where it has to be used. 

init1 huge10: 1.000ms (index):35
1000000 (index):37
init huge10: 2.000ms (index):38
DOM  huge10: 29.000ms (index):48
mem  huge10: 24.000ms (index):56
1000000 (index):58
init1 huge350: 1.000ms (index):35
33500000 (index):37
init huge350: 3.000ms (index):38
DOM  huge350: 29.000ms (index):48
mem  huge350: 24.000ms (index):56
33500000 (index):58
init1 huge100000: 227.000ms (index):35
-33554432 (index):37
init huge100000: 757.000ms (index):38
DOM  huge100000: 28.000ms (index):48
mem  huge100000: 24.000ms (index):56
-33554432

As a general rule though, the size of HTML elements does not affect memory or render times.

Upvotes: 1

JoJo
JoJo

Reputation: 287

You can use Yahoo YSlow to test the speed of your site.

http://developer.yahoo.com/yslow/

You have a lot of images or text inside that super large div? If you have a lot of images there, you can probably use a water fall to display your content as you scroll the page.

Upvotes: 1

Related Questions