javascript - Which method performs fastest while adding an attribute in jQuery, using attr() method, passing attributes as a key-value object, or direct? -

i know 3 ways of adding href attribute contains relative link in jquery: using (1) .attr(), (2) attributes key-value pair in argument, or (3) direct writing (you might know other methods, please tell in answer me learn).

1. using .attr()

it below using method.

var link = "relative-link.html"; $("<a/>").attr("href",link); 

2. using argument

like this:

var link = "relative-link.html"; $("<a/>", {href: link}); 

3. direct

like this:

var link = "relative-link.html"; $("<a href=" + link + ">"); 

so, faster performance wise among method? why should choose 1 method on others. consider adding other attributes such class , method should preferred when adding multiple attributes in 1 go.

please tell me method better , in case proper reasoning. thanks!

this interesting question. looked jquery's code on github , suggest should @ same here purely learning purposes (and documentation here)

here findings

in general method called when creating element i.e. when write $(".....") init. code here . internally uses parsehtml method. parsehtml simple single tag html use document.createelement (here) , complex html builds dom nodes. 2 of arguments accepted init function selector , context - selector being html string , context being attributes object pass argument in second method have pointed out.

method called when adding attributes attr. code here

method 1
$("<a/>").attr("href",link);
here jquery first creates element. , separately attempts add attributes created elements. init function receives no context argument. adds basic <a> element using document.createelement internally. this part of code never executed , newly created object returned. attr method called on created jquery wrapped dom object. thus init called once , attr called once. if pass multiple attributes in same attr() call, still called once.

method 2
$("<a/>", {href: link});
here jquery attempts add attributes while creating dom element. receives context attributes added element. iterates on attribute map here calling attr() method each of them separately (which can seen here). equivalent $("<a>").attr(key, val).attr(key1, val1).attr(key2, val2); thus init called once internally attr called multiple times.

method 3
$("<a href=" + link + ">");
here jquery again doesn't receive context arguments. receives plain html string has parsed. in such cases per documentation, if html more complex single closing tag, jquery builds dom nodes using buildfragment method (code here) , uses innerhtml method insert html passed insert in document. happens in parsehtml function of jquery internally calls buildfragment. so init called once internally has build node. no call attr.

readability method 2 wraps call attr in same dom element creation call , provides more readable form. imho method 1 has same readability method 2 , should faster method 2. in method 3 (as performance tests later indicate), building dom node takes lot of time because has go through buildfragment phase not case method 1 , 2 single tag html passed , document.createelement used straight away.

performance single element creation, hardly notice difference in execution time. take less few ms always. created test 100,000 elements, see if there difference. comment out method want test time of execution.

method 1: time taken: 400-600ms (fastest)
method 2: time taken: 550-700ms
method 3: time taken: 2700-2900ms (slowest expected)

the times vary, trend remain same. test available here http://jsfiddle.net/6ko59joo/2/. experiment it.

alternative: no jquery

undiscussed far option leave jquery , use vanilla js. in case, performance on above test jumps 70-80ms. code this:

var = document.createelement('a');  a.href = link; 

for consideration, included in jsfiddle.

this based on understanding , tests. corrected if wrong somewhere.