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

$(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

轉載于:https://www.cnblogs.com/Brose/p/jqueryApiTest.html