卡卡網(wǎng)

使用JavaScript或jQuery將元素(element)追加(append)到DOM，是前端開發(fā)人員常常用到的技術，不過雖然方法多種多樣，你可能不知道哪種方法才是最快最有效的。在本文中，將通過對比多種實現(xiàn)方法，找出最快最有效的方法。

本文演示中，我們假設我們的任務是將 10,000 個 div 附加到網(wǎng)頁的正文中。

1、最簡單直接的方法

大多數(shù)人，會這樣做：

for (var i=0; i<10000; i++) {
  $("BODY").append($("<div />").addClass("test-div"));
}

這種方法簡單直接明了，所以大家都喜歡使用。

此代碼產(chǎn)生的平均運行時間為779.463ms。這意味著將這些元素附加到 DOM 需要超過四分之三秒的時間。

那么這里的問題是什么？

好吧，有一些 - 太多的重排和太多的 jQuery 對象。我們將在下一步中解決后者，所以讓我們在這里看看回流。

簡單來說，reflow就是瀏覽器需要對網(wǎng)頁進行處理和繪制的時候，是最昂貴的瀏覽器進程之一。提高應用程序性能的最簡單方法之一是盡量減少回流次數(shù)，這就是我們要做的。

許多不同的操作都可能導致回流，并且對于每個瀏覽器來說都不一樣。將元素附加到 DOM 會導致重排。因此，我們的代碼片段的明顯問題是我們正在生成 10,000 次回流。有些瀏覽器可能會智能地處理這個問題并降低一些成本，但我們可以做得更好。

2、修復回流問題

讓我們通過創(chuàng)建一個尚未添加到 DOM 的節(jié)點來解決我們的回流問題。然后我們將把我們的 div 附加到這個節(jié)點上。最后，我們會將這個單個節(jié)點附加到應該觸發(fā)單個回流的 DOM 中。

var $c = $("<div />").addClass("container");
for (var i=0; i<10000; i++) {
    $c.append($("<div />").addClass("test-div"));
}
$("BODY").append($c);

代碼平均運行時間現(xiàn)在是432.524ms。這有點好，但仍然不是很好，我們可以做很多改進。

這里的問題是我們?nèi)匀粍?chuàng)建了太多的 jQuery 對象。即使我們已經(jīng)解決了重排問題，創(chuàng)建 jQuery 對象還是有很多開銷。當然，對于單個對象，jQuery 的便利性遠遠超過了對性能的最小影響。但是，如果我們要處理 10,000 個元素，那么效率低下的情況就非常明顯了。

讓我們看看當我們完全跳過使用 jQuery 并用純 JavaScript 編寫它時會發(fā)生什么。

var c = document.createDocumentFragment();
for (var i=0; i<10000; i++) {
    var e = document.createElement("div");
    e.className = "test-div";
    c.appendChild(e);
}
document.body.appendChild(c);

令人難以置信的是，這種變化將我們的總運行時間從432.524ms 減少到了16.237ms。這是有道理的，因為創(chuàng)建對象實際上需要 jQuery 一些時間。讓我們看看創(chuàng)建單個 jQuery 對象與使用原生 JavaScript 創(chuàng)建元素需要多長時間。

console.time("jquery div");
var jqDiv = $("<div />");
console.timeEnd("jquery div");
// jquery div: 0.272ms

console.time("js div");
var jsDiv = document.createElement("div");
console.timeEnd("js div");
// js div: 0.006ms

這是一個顯著的差異 - 0.006ms與0.272ms。這種比較的目的并不是說 jQuery 不好，而是作為開發(fā)人員你應該知道什么時候使用它，什么時候不使用它。jQuery 提供了很多我們不需要的功能，因此以如此高的成本創(chuàng)建 10,000 個 jQuery 對象是沒有意義的。

3、使用字符串而不是節(jié)點

我們實際上不必創(chuàng)建 10,000 個節(jié)點。相反，我們可以看到當我們使用一長串 HTML 時會發(fā)生什么。

var s = "";
for (var i=0; i<10000; i++) {
    s += "<div class=\"test-div\"></div>";
}
$("BODY").append(s);

運行時間需要69.874ms，它的性能比我們原來的要好得多，但不如純 JavaScript 版本好。但是，我們可以做一點小改進。字符串連接很昂貴，尤其是在這種規(guī)模下。讓我們使用一個字符串數(shù)組并將它們連接到最后。

var a = [];
for (var i=0; i<10000; i++) {
    a.push("<div class=\"test-div\"></div>");
}
$("BODY").append(a.join(""));

63.885ms。這可能不足以改善壓力，但由于它更快，我們會保留它。

讓我們測量一下使用 jQuery 附加字符串的成本。正如我們在上一步中了解到的，使用純 JavaScript 可能會更快。

var a = [];
for (var i=0; i<10000; i++) {
    a.push("<div class=\"test-div\"></div>");
}
document.body.innerHTML = a.join("");

這里的主要區(qū)別是我們沒有使用 jQuery.append。相反，我們將 body 上的 innerHTML 屬性設置為我們的 HTML 字符串。代碼運行需要22.908ms，因此改進是顯而易見的。但是我們?nèi)匀粵]有上一步的純 JavaScript 版本那么快。

4、結論

總之，最快的代碼是純 JavaScript 版本：

var c = document.createDocumentFragment();
for (var i=0; i<10000; i++) {
    var e = document.createElement("div");
    e.className = "test-div";
    c.appendChild(e);
}
document.body.appendChild(c);

基于這些實驗，有兩個主要結論。

首先，要注意哪些操作會導致回流。這是一個昂貴的過程，應該盡可能減少。

其次，要注意使用 jQuery 的成本。對于小規(guī)模的操作，jQuery 的便利性往往會超過性能成本。但是在大范圍內(nèi)，除非確實需要，否則應該避免使用 jQuery。

相關文章

• JQuery使用append()函數(shù)動態(tài)創(chuàng)建和應用CSS樣式

標簽: element  append  DOM