2
我有這樣的HTML結構:在JavaScript中觸發較少的迴流 - 如何編輯克隆元素中的元素?
<p id="lorem">
<span class="part" id="n01">L</span><span class="part" id="n02">o</span><span class="part" id="n03">r</span><span class="part" id="n04">e</span><span class="part" id="n05">m</span> <span class="part" id="n06">i</span><span class="part" id="n07">p</span><span class="part" id="n08">s</span><span class="part" id="n09">u</span><span class="part" id="n10">m</span>
</p>
<h1>Click Me</h1>
和這段JavaScript代碼:
arrRed = ["#n01", "#n04", "#n05", "#n09"];
arrBlue = ["#n02", "#n07", "#n08"];
$("h1").click(function(){
$.each(arrRed, function(i, v){
$(v).addClass("red");
});
$.each(arrBlue, function(i, v){
$(v).addClass("blue");
});
})
當點擊h1
,某些字母得到一定的顏色。問題在於性能,我觸發了過多的迴流/重繪。 在另一個問題有人告訴我使用parent.cloneNode(true)
和parent.parentNode.replaceChild(clone, parent)
。所以我克隆元素,改變他們,但他們回到原位,只觸發一次迴流。
所以我克隆父元素:
var doc = document;
var lorem = doc.getElementById("lorem");
var clone = lorem.cloneNode(true)
但是我怎麼現在已經着手?我不知何故必須修改clone
中的元素,然後替換它們,但再次使用$.each
編輯它們似乎不是一個好主意。
謝謝!這是一個巨大的性能差異! – Sven 2012-07-17 09:08:25
@Sven沒問題,我只是在第二個例子中簡化了語法,即使第一個應該有更高的性能。 '=]' – 2012-07-17 09:17:43