1. 程式人生 > >jquery 操作dom效率測試------html和append插入文檔

jquery 操作dom效率測試------html和append插入文檔

left clas cal -- 操作dom fun query dom his

 $(function () {
        var htmlResult = createHtmlContent(100);
        console.log(htmlResult)
        insertHtml.call($("#left"), "html()耗時:", htmlResult);
        insertHtml.call($("#right"), "append()耗時:", htmlResult);
    });

    function createHtmlContent(count) {
        var htmlContent = "";
        
for (var i = 0; i < count; i++) { htmlContent += `<div>這是第${i + 1}個元素</div>`; } return htmlContent; } function insertHtml(type, htmlContent) { console.time(type); if (type === "html()耗時:") { this.html(htmlContent); }
else if (type === "append()耗時:") { this.empty().append(htmlContent); } console.timeEnd(type); }

100條數據集合測試結果:

html()耗時:: 0.69921875ms
jqueryApiTest.html:46 append()耗時:: 1.571044921875ms

1000條數據集合測試結果:

html()耗時:: 3.281982421875ms
jqueryApiTest.html:46 append()耗時:: 9.39111328125ms

10000條數據集合測試結果

html()耗時:: 26.7099609375ms
jqueryApiTest.html:46 append()耗時:: 51.161865234375ms

jquery 操作dom效率測試------html和append插入文檔