开发者社区> 问答> 正文

jQuery 是否有对应于js的createDocumentFragment方法

在动态添加非常多的dom元素到页面的时候经常用到方法createDocumentFragment,起到了性能优化作用。不知在jQuery中是否有类似的解决方案?

展开
收起
小旋风柴进 2016-05-30 14:17:47 1863 0
1 条回答
写回答
取消 提交回答
  • var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
    var docfrag = document.createDocumentFragment();
    var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];
    
    browserList.forEach(function(e) {
      var li = document.createElement("li");
      li.textContent = e;
      docfrag.appendChild(li);
    });
    
    ul.appendChild(docfrag);
    // a list with well-known web browsers

    若不使用createDocumentFragment,可以如下实现,但是问题是在数组项有成千上万个时,在循环中每次一个去添加DOM元素,给性能带来压力,最好的做法是使用createDocumentFragment先创建文档片段,然后在循环外一次性批量添加完成。

     var ul = document.getElementsByTagName("ul")[0];
        var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];
        browserList.forEach(function (e) {
            var li = document.createElement("li");
            li.textContent = e;
            ul.appendChild(li);
        });

    在使用jQuery时,即使append等方法内部中是通过createDocumentFragment来实现(@
    长颈鹿 有说到),也最好是在循环外一次性向页面批量添加DOM元素:

      //不建议的做法
        var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];
        $.each(browserList, function (index,value) {
            $('<li>').text(value).appendTo($('ul').eq(0));
        })
    
        //好的做法NO1
        var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];
        var myHTML = '';
        $.each(browserList, function (index, value) {
            myHTML += '<li>' + value + '</li>';
        })
        $('ul').eq(0).html(myHTML);
    
        //好的作法NO2
        var frag = document.createDocumentFragment();
        var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];
        $.each(browserList, function (index, value) {
            var li = document.createElement("li");
            li.textContent = value;
            frag.appendChild(li);
        })
    2019-07-17 19:20:32
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载