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

Popular posts from this blog

How to show in django cms breadcrumbs full path? -

-
need advice - how show in breadcrumbs whole path article or page? i've got code: {% ance in ancestors %} <li> {% if not forloop.last %} <a href="{{ ance.get_absolute_url }}">{{ ance.get_menu_title }}</a> {% else %} <span class="active">{{ ance.get_menu_title }}</span> {% endif %} </li> {% endfor %} but shows "home" , current page. how modify show whole path in breadcrumbs? i've found in file menu_tags.py code calls ancestors. @ least there class showbreadcrumbs: class showbreadcrumb(inclusiontag): """ shows breadcrumb node has same url current request - start level: after level should breadcrumb start? 0=home - template: template used render breadcrumb """ name = 'show_breadcrumb' template = 'menu/dummy.html' options = options( argument('start_level', default=0, require...
Read more

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

-
Image
i've installed yii2-user module/dektrium yii2-app-basic application command composer require "dektrium/yii2-user:0.9.*@dev" config/console.php return [ . . 'modules' => [ 'gii' => 'yii\gii\module', 'user' => [ 'class' => 'dektrium\user\module', ], ], . . ] config/web.php 'components' => [ . . /* 'user' => [ 'identityclass' => 'app\models\user', 'enableautologin' => true, ], */ 'modules' => [ 'user' => [ 'class' => 'dektrium\user\module', ], ], . . ] after that, run command $ php yii migrate/up --migrationpath=@vendor/dektrium/yii2-user/migrations updating database schema . but, when run http://localhost/mylawsuit/yii/web/index.php?r=u...
Read more

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -

-
i have app uses rails framework , implements angularjs part of front end. i have pushed heroku , have heroku toolbelt installed, when try migrate db using "heroku run rake db:migrate" receive following error(s): installing core plugins heroku-cli-addons, heroku-apps, heroku-fork, heroku-git, heroku-local, heroku-run, heroku-status... error installing package. try running again gode_debug=info see more output. ! `run` not heroku command. ! perhaps meant `-h`, `2fa`, `auth`, `join`, `open`, `orgs`, `pg`, `ps` or `rake`. ! see `heroku help` list of available commands. i run command "gode_debug=info heroku run rake db:migrate" , receive error: npm err! darwin 14.5.0 npm err! argv "/users/christopher_pelnar/.heroku/node-v4.2.1-darwin-x64/bin/node" "/users/christopher_pelnar/.heroku/node-v4.2.1-darwin-x64/lib/node_modules/npm/cli.js" "install" "heroku-cli-addons" "heroku-apps" "heroku-fork...
Read more