使用 Jquery 添加大量 HTML

Question

我正在设计一个使用渐进增强并且还有移动版本的网站。我想使用 jquery 向桌面站点添加幻灯片，并想知道添加大量 HTML 的最佳方法。我打算添加的示例是：

<!-- Slideshow -->
<div class="scrollable">
<!-- "previous page" action -->
<a class="prev browse left"></a>   

<!-- root element for the items -->
<ul>
    <li>
        <img src="images/slideshow/image1.jpg" alt="image 1" title="image 1" />
    </li>

    <li>
        <img src="images/slideshow/image2.jpg" alt="image 2" title="image 2" />
    </li>

    <li>
        <img src="images/slideshow/image3.jpg" alt="image 3" title="image 3" />
    </li>

    <li>
        <img src="images/slideshow/image4.jpg" alt="image 4" title="image 4" />
    </li>

    <li>
        <img src="images/slideshow/image5.jpg" alt="image 5" title="image 5" />
    </li>
</ul>

<!-- "next page" action -->
<a class="next browse right"></a>

对于这样的事情，我会更好地使用 append 或 HTML 方法吗？我还有另一个想法，我可能会在里面创建一个带有 HTML 的变量并使用 JQuery 添加内容，但我已经尝试过但失败了（缺乏足够的知识！）。如有任何建议，我将不胜感激。

Answer 1

您可以对任何类型的比较进行基准测试，如下所示：

function test( name, fn, n, next ) {

  var n = n || 100; // default number of runs
  var start, end, elapsed;

  setTimeout(function() { 
    start = Number(new Date());   
    for ( ; n--; ) {
      fn() 
    }
    end = Number(new Date());

    elapsed = end - start;

    // LOG THE RESULT
    // can be: $("#debug").html(name + ": " +  elapsed + " ms");
    console.log(name + ": " +  elapsed + " ms")); 

    next && next();
  }, 0);
}

test("append", function() {
  $("#elem").append( LARGE HTML );
});

test("html", function() {
  $("#elem").html( LARGE HTML );
});

我会尝试创建一个新元素并将它的 html 设置为大块，然后将此元素附加到 dom。我认为它会更快，因为在应用 html 时，该元素是不可见的，因此浏览器可以更快地工作，然后只需将一个元素附加到 DOM。

See it in action.（点击预览）

（好像html()比较快）

Answer 2

使用 append 很好，但我希望只使用一次，或者尽可能少地使用它，并提前构建 HTML，将其保存在字符串变量中。

一般来说，应该很少进行 DOM 操作。只有在绝对必要时，您才应该以这种方式访问​​ DOM。 让我们看看下面的例子：

var $myList = $("#myList");   

for (i=0; i<1000; i++){
    $myList.append("This is list item " + i);
}

此代码将 1000 行添加到 HTML 列表中。这是通过对 .append() 方法的 1000 次连续调用完成的，因此对 DOM 进行了 1000 次操作。 以下代码（根据上面的示例进行了修改）演示了如何提高效率：

var $myList = $("#myList");
var li = "";   

for (i=0; i<1000; i++){
    li += "<li>This is list item " + i + "</li>";
}  

$myList.append(li);

请参阅以下文章： http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-2-dom-manipulation/

Answer 3

我会为整个块使用原生的innerHTML，这被证明是进行 DOM 操作的最快方法。在此处查看 f.ex：http://www.quirksmode.org/dom/innerhtml.html

<div id="container"></div>

<script>
var html = '<p>Some HTML</p>';
document.getElementById('container').innerHTML = html;
</script>