jquery - Which is better for performance, elements in DOM or in Javascript object? -
in terms of performance, better have 20 elements (with children) in dom tree or stored in javascript object?
case 1:
<html> <body> <div id='el1'> <span>...</span> ... </div> <div id='el2'> <p>...</p> ... </div> <div id='el3'> <img src="" alt="" /> <br/> </div> <div id='el4'> <section></section> ... </div> ... </body> </html> case 2:
var obj = {}; obj.el1 = $("<div id='el1'><span>...</span>...</div>"); obj.el2 = $("<div id='el1'><p>...</p>...</div>"); obj.el3 = $("<div id='el1'><img src="" alt="" /><br/>...</div>"); obj.el4 = $("<div id='el1'><section></section>...</div>"); .... my application should show 1 of these elements @ once. perform better if leave them in dom tree , change style, or preferably store them in javascript object , remove , append them when needed?
how test it?
@edit info consider:
1- elements written in html document , removed , stored in javascript objects when page loaded.
2- everytime active element changes, have change dom structure removing current active element , appending new 1 it.
@edit 2: after tests
the idea is: write html elements dom , javascript must show/hide 1 of these elements @ once. these elements have own children. may full page website or web app.
i created 2 test cases:
1- elements removed , re-appended several times javascript. stored in javascript object until it's summoned
2- elements in dom, i'll hide , show them (jquery functions, further tests change css directly) when needed.
<html> <head> <script src='https://code.jquery.com/jquery-1.11.3.min.js'></script> </head> <body> <!-- used 15 elements in test, code long --> <script> var obj1 = {}; var obj2 = new array(); var active; var body = $(document.body); var t1, t2, delta; $(function(){ t1 = new date().gettime(); /* //test 1: javascript var _this,id; $('div').each(function(){ _this = $(this); id = _this.attr('id'); obj1[id] = _this; _this.remove(); }); var c; (var = 0; < 10000; i++) { for(var k in obj1){ c = obj1[k]; if(active) active.remove(); body.append(c); active = c; } }*/ //test 2: dom var _this,id; $('div').each(function(){ _this = $(this); id = _this.attr('id'); obj2.push(id); }); var c; (var = 0; < 10000; i++) { for(var k=0,l=obj2.length;k<l;k++){ c = $('#'+obj2[k]); if(active) active.hide(); c.show(); active = c; } } t2 = new date().gettime(); delta = t2 - t1; console.log('it took '+delta+' milliseconds'); }); </script> </body> i created 5 generic elements lorem ipsum , lorem pixel content , them copied/pasted them 3 times, making 15 1st-level elements.
for 1000 times hide , revealed each 1 of 15 elements. ran test 3 times each.
case 1 (winner far): 5.2s, 4.75s, 4.85s
case 2: 21.5s, 21.5s, 20s
@edit 3: changing case 2 method
changing second case hide()/show() css() makes high increase in performance.
//test 2: dom var _this,id; $('div').each(function(){ _this = $(this); _this.css('display','none'); id = _this.attr('id'); obj2.push(id); }); var c; (var = 0; < 15000; i++) { for(var k=0,l=obj2.length;k<l;k++){ c = $('#'+obj2[k]); if(active) active.css('display','none'); c.css('display','block'); active = c; } } also increase loop 15k.
case 1: around 6.5s
case 2: around 2.5s
definitely leave in dom tree. use show/hide methods show 1 want.
i use js method if there dynamic changing value should reflected in element, if static, changing dom tree more performance heavy rather css style change.
you can test writing both, using jsperf compare.
Comments
Post a Comment