码迷,mamicode.com
首页 > 移动开发 > 详细

jquery 操作dom效率测试------html和append插入文档

时间:2018-03-26 10:54:08      阅读:236      评论:0      收藏:0      [点我收藏+]

标签: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插入文档

标签:nbsp   pre   ons   效率   1.5   func   create   数据   res   

原文地址:https://www.cnblogs.com/Brose/p/jqueryApiTest.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!