有人可以向我证明,在更改dom元素然后重新插入dom元素之前,给出
here(下面复制)的建议会更快.
通过证明,我想看一些数字.很好,他们研究这个,但我认为这篇文章非常薄弱,没有详细说明“问题”究竟是什么以及解决方案如何修复速度方面(如文章标题加速JavaScript)
这篇文章….
流出DOM操作
这种模式允许我们创建多个元素并将它们插入到DOM中,从而触发单个重排.它使用了一种叫做DocumentFragment的东西.我们在DOM之外创建一个DocumentFragment(因此它不在流程中).然后,我们创建并添加多个元素.最后,我们将DocumentFragment中的所有元素移动到DOM,但触发单个重排.
问题
让我们创建一个函数来更改元素中所有锚点的className属性.我们可以通过简单地遍历每个锚点并更新它们的href属性来实现.问题是,这可能导致每个锚的回流.
function updateallAnchors(element,anchorClass) {
var anchors = element.getElementsByTagName('a');
for (var i = 0,length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}
解决方案
要解决此问题,我们可以从DOM中删除元素,更新所有锚点,然后将元素插回到原来的位置.为了帮助实现这一目标,我们可以编写一个可重用的函数,它不仅可以从DOM中删除元素,还可以返回一个将元素插回原始位置的函数.
/**
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
function removetoInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element,nextSibling);
} else {
parentNode.appendChild(element);
}
};
}
现在我们可以使用这个函数更新一个不在流中的元素中的锚点,并且只在我们删除元素时和插入元素时才触发重排.
function updateallAnchors(element,anchorClass) {
var insertFunction = removetoInsertLater(element);
var anchors = element.getElementsByTagName('a');
for (var i = 0,length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
解决方法
你会发现很难从javascript分析中获得有意义的数据,因为你真的在保存重新绘制和重新流动,这些都不会出现在大多数分析工具中.您可以使用
Firebug paint events extension直观地向您显示您要保存的重绘数量.