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

i have large html element inside fixed width div overflow set hidden, so:

#container{ width:100px; height:100px; overflow:hidden; }  #largebox{ width:100000px; height:100px; }  <div id="container">     <div id="largebox">      </div> </div> 

the inner div large because content within dynamically generated , scrolls using javascript buttons. large div size potentially take more memory or processing power render? better off adding size need javascript?

i came here because can't think of way test solely html render speeds. might overlooking chrome developers tools though. used test this?

jsfiddle proof

conclusion: no, large html elements not appear affect render size or memory in large amount, can cause quirkiness.

in fiddle, tested adding different numbers of elements dom, tested time took manipulate dom element, , tested time takes basic math(to test memory).

example output (in chrome 32):

the first 3 tests use small elements, changing number of elements. add 10, 350, , 1,000,000 0-sized elements container element, run tests. dom , memory tests show little difference each other, meaning number of elements in dom not effect:

1) time takes element dom id , edit contents. 2) memory available javascript.

init reg1 shows how long took insert data in container, , number following , ending each test container height. these numbers show adding large amount of data dom slows things down, though amount not significant. please note loading page amount of html slow things down more doing in 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 3 tests use huge elements (1,000,000 width , height), changing number of huge elements . again, shows same thing above tests. dom speed , memory not affected number or size of elements.

all these numbers in line earlier tests, except container height number. since number changes right after init1 ends , consistent number @ end, know dom rendering near instantly, no significant lag. however, on final test, exceed memory limit, , returns -33554432 container height. not slow down @ all. quirkiness mentioned earlier. these numbers should used tests. not know how performs in various edge cases, , such should used has 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 general rule though, size of html elements not affect memory or render times.