javascript - JQuery selector, partial DOM searching for performances -


i'm working jquery , @ point use jquery selectors make page work. issue here html work can long depending on data work , looks this.

html

<div class="mailing"></div>     <input type="text" class="mail_subject"/>     <input type="text" class="mail_body"/> <!-- can have 1 n number of these -->      <!-- preview tags -->     <p class='main_subject'></p>     <p class='main_body'></p>      <!--          , few more things don't use here      --> </div>  <div id="table1">     <table id="ranking">         <tbody>             <!-- data, can have 0 ~3500 rows -->         </tbody>     </table> </div> 

as can see, page more or less divided in 2 parts, <div class="mailing">, contains few forms, , <div id="table1"> displaying lots of data.

in mailing div have few inputs , auto-updated preview takes data inputs. have here kind of "mail builder" preview giving me result html formatting.

the problem here performance, jquery slowed table , got lag when type in form , don't want search whole document know data in mailing div.

js

$('.mailing').on('change click keyup keydown', function () {     // here append mail_subject input preview     var text = $(this).val();     $('.main_subject').text($('.subject_select').val());      // here append each mail_body input preview     $('.bodies_select').each(function () {         text = $(this).val();         /*          * computation text          */         jquery('<span/>', {text: text}).appendto('.main_body');     }); }); 

i have few more functions theses , few more computation, think got idea of code looks like.

my question is, there way, when use jquery selectors $('.main_subject') or $('.bodies_select') not search whole dom document in mailing div example? problem can store elements in variable since multiple occasion updated.

you can use context jquery improve performances :

$('.bodies_select', '.mailing')

http://api.jquery.com/jquery/#jquery1

you can optimize selectors technics :

https://learn.jquery.com/performance/optimize-selectors/


Comments

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -