十八禁污污污黄黄黄网站下载,美女浴室洗澡裸体爆乳无遮挡

技術(shù)頻道 - js技術(shù)

將元素(element)追加(append)到DOM的最快方法

作者:admin 時間:2022-7-19 10:7:11 瀏覽:

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

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

1、最簡單直接的方法

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

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

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

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

那么這里的問題是什么？

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

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

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

2、修復(fù)回流問題

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

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

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

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

讓我們看看當(dāng)我們完全跳過使用 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);

令人難以置信的是，這種變化將我們的總運(yùn)行時間從432.524ms 減少到了16.237ms。這是有道理的，因?yàn)閯?chuàng)建對象實(shí)際上需要 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ā)人員你應(yīng)該知道什么時候使用它，什么時候不使用它。jQuery 提供了很多我們不需要的功能，因此以如此高的成本創(chuàng)建 10,000 個 jQuery 對象是沒有意義的。

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

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

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

運(yùn)行時間需要69.874ms，它的性能比我們原來的要好得多，但不如純 JavaScript 版本好。但是，我們可以做一點(diǎn)小改進(jìn)。字符串連接很昂貴，尤其是在這種規(guī)模下。讓我們使用一個字符串?dāng)?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 屬性設(shè)置為我們的 HTML 字符串。代碼運(yùn)行需要22.908ms，因此改進(jìn)是顯而易見的。但是我們?nèi)匀粵]有上一步的純 JavaScript 版本那么快。

4、結(jié)論

總之，最快的代碼是純 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);

基于這些實(shí)驗(yàn)，有兩個主要結(jié)論。

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

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

相關(guān)文章