javascript - Which method is more performant for creating deeper nesting nodes along with the attributes using jQuery? -


i create deep nodes along attributes this.

$('<div id="apple"><div id="grape"><div class="tclass1" id="orange"></div><div class="tclass2" id="watermelon"></div></div><div id="banana"><div id="papaya"></div><div id="pineaple"></div><div id="starfruit"></div></div></div>');

there other more efficient ways compared pure methods in jquery, see in a test case. how creating deep nodes this?

i may (1) incorporate $.parsehtml() parse string, append parent element created using native javacsript document.createelement improve performance. using (2) add() possible. can (3) create nodes per element, , assign attribute value using attr(), append child parent.

(1)

... <!-- in dom --> <div id="juz"></div> ...  ... var dui = document.createelement('div'); dui.id = 'apple'; document.getelementbyid("juz").appendchild(dui); var str = '<div id="grape"><div class="tclass1" id="orange"></div><div class="tclass2" id="watermelon"></div></div><div id="banana"><div id="papaya"></div><div id="pineaple"></div><div id="starfruit"></div></div>'; var html = $.parsehtml(str); $("#juz").append(html); ...

(3)

... <!-- in dom --> <div id="juz"></div> ...  ... var smj = $("<div>").attr("id","apple"); var sem = $("<div>").attr({"class":"tclass1","id":"orange"}); var rts = $("<div>").attr({"class":"tclass2","id":"watermelon"}); var rrw = $("<div>").attr("id","grape"); var jhy = $("<div>").attr("id","papaya"); var hsy = $("<div>").attr("id","pineaple"); var poi = $("<div>").attr("id","starfruit"); var las = $("<div>").attr("id","banana"); var gty = las.append(jhy).append(hsy).append(poi); var pwq = rrw.append(sem).append(rts); var pytr = smj.append(pwq).append(gty); $("#juz").append(pytr); ...

however, doubt 1 fastest such deeper nesting nodes, can't make reliable test case. have idea on method should prefer on others, , provide test case? thanks!

as performance related issues:

  1. premature performance optimization evil. causes spend time trying improve performance before know it's worth effort work on performance in area.

  2. without strong evidence have performance issue worry about, code should written in clearest, simplest, easiest maintain way possible.

  3. if need work on performance issues, performance problems , solutions can addressed through direct measurement of both current code , theorized solutions. and, measurement has done in relevant target environments representative data.

in case illustrate of series of html elements, simplest way write code use string of html , set .innerhtml of container. can done 2 lines of code , it's obvious (e.g. easy understand) code doing. large blocks of html, 1 might read template file. or, if content added existing container, html fragment can used.

so, i'd suggest start simplest approach , deviate when have tested, measured , quantified reason doing so:

var html = '<div id="apple"><div id="grape"><div class="tclass1" id="orange"></div><div class="tclass2" id="watermelon"></div></div><div id="banana"><div id="papaya"></div><div id="pineaple"></div><div id="starfruit"></div></div></div>' $("#juz").append(html);

note, jquery method .append() accepts html string directly, there no need parse html beforehand.

here general notes performance of dom manipulations:

  1. lots of consecutive dom manipulations slowest way of doing things. each 1 triggers relayout , repaint, each 1 triggers dom tree updates, etc...

  2. one large manipulation setting .innerhtml property string of html can surprisingly fast (though vary browser). but, not x.innerhtml = x.innerhtml + newhtml because reparses existing html, , replaces existing dom elements entirely new dom elements.

  3. if have lot of dom insertions in code, best build tree of dom nodes outside dom , insert dom in 1 final operation. can use either common parent or dom fragment parent nodes creating. means majority of dom changes done external tree before in live dom being displayed.

related answers:

jquery dom manipulation efficiency - building entire page javascript


-

Comments

Post a Comment