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