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')
you can optimize selectors technics :
Comments
Post a Comment