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>

使用Jquery添加大块HTML

3 个答案: