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

標籤：nbsp   pre   ons   效率   1.5   func   create   資料   res   

 $(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插入文檔