jquery Operation DOM Efficiency test------HTML and append insert document

$(function () {        varHtmlresult = createhtmlcontent (100); Console.log (Htmlresult) Inserthtml.call ($ ("#left"), "HTML () time consuming:", Htmlresult); Inserthtml.call ($ ("#right"), "append () Time-consuming:", Htmlresult);    }); functionCreatehtmlcontent (count) {varHtmlcontent = "";  for(vari = 0; I < count; i++) {htmlcontent+ = ' <div> This is the first ${i + 1} elements </div> ';        }        returnhtmlcontent; }    functioninserthtml (Type, htmlcontent) {console.time (type); if(Type = = = "html () time-consuming:") {             This. HTML (htmlcontent); } Else if(Type = = = "Append () Time-consuming:") {             This. Empty (). append (htmlcontent);    } console.timeend (type); }

100 Data Set Test results:

HTML () Time consuming:: 0.69921875ms
jqueryapitest.html:46 append () Time:: 1.571044921875ms

1000 Data Set test results:

HTML () Time consuming:: 3.281982421875ms
jqueryapitest.html:46 append () Time:: 9.39111328125ms

10,000 Data Set test results

HTML () Time consuming:: 26.7099609375ms
jqueryapitest.html:46 append () Time:: 51.161865234375ms

jquery Operation DOM Efficiency test------HTML and append insert document