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 += `
 ${i + 1} 
`;
        }
        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.69921875 msjqueryApiTest.html:46 append()消費時間:1.57104492175 ms
1000個のデータセットのテスト結果:
html()消費時間:3.281982421875 msjqueryApiTest.html:46 append()消費時間:9.39111328125 ms
10000個のデータセットのテスト結果
html()消費時間:26.7099609375 msjqueryApiTest.html:46 append()消費時間::51.161865234375 ms
 
転載先:https://www.cnblogs.com/Brose/p/jqueryApiTest.html