相关疑难解决方法(0)

我对JS的性能有疑问.

说,我有下一个代码:

var divContainer = document.createElement("div"); divContainer.id="container";
var divHeader = document.createElement("div"); divHeader.id="header";
var divData = document.createElement("div"); divData.id="data";
var divFooter = document.createElement("div"); divFooter.id="footer";
divContainer.appendChild( divHeader );
divContainer.appendChild( divData );
divContainer.appendChild( divFooter );
document.getElementById("someElement").appendChild( divContainer );

这段代码只为其他一些函数创建了一个shell来创建一个网格,创建网格的过程非常复杂,并且有很多验证,目前我用2种方法填充网格,一个在数组变量中创建整个html另一个创建元素并将它们附加到一个元素documentFragment.

我的问题是,当我使用片段时,如果在使用片段时性能确实有所改善 - 他们管理内存中的元素,因此它们不会附加到文档中,因此不会触发DOM重新计算和其他令人讨厌的东西.但是我创建变量的方式是,在将容器附加到实际页面之前,它们不会附加到任何DOM元素.

所以我想知道以前的代码是否比使用包装它的文档片段具有更好的性能:

var fragment = document.createDocumentFragment();
var divContainer = document.createElement("div"); divContainer.id="container";
var divHeader = document.createElement("div"); divHeader.id="header";
var divData = document.createElement("div"); divData.id="data";
var divFooter = document.createElement("div"); divFooter.id="footer";
divContainer.appendChild( divHeader );
divContainer.appendChild( divData );
divContainer.appendChild( divFooter );
fragment.appendChild( divContainer )
document.getElementById("someElement").appendChild( fragment.cloneNode(true) ); …