为什么分离和追加比直接更改html更有效？(Why is detaching and appending more efficient than changing html directly?)

 向DOM添加一系列元素时，每个元素都会触发浏览器重排页面。 将一个元素添加到已经准备好而不在DOM上的页面上，然后将其附加到DOM只会导致页面的一次重排。 
 
 来自： http ： //www-archive.mozilla.org/newlayout/doc/reflow.html 
 
 
 
 所有回流都有一个原因，它在回流状态对象中保持（并且可能变异，如下所述）。 回流原因控制框架在回流期间的反应方式，并且是以下之一： 
 
 
 文章接着列出了回流的原因，以下是其中一个原因： 
 
 
 
 增量，当帧树中的某些东西改变时; 例如，当从网络读取更多内容时，或某些脚本操纵DOM。 增量回流针对帧层次结构中的单个帧。 在增量回流期间，帧可以假设from above'' (for example, available width) have changed; instead, something计算的约束from above'' (for example, available width) have changed; instead, something from above'' (for example, available width) have changed; instead, something “框架内的from above'' (for example, available width) have changed; instead, something已经改变，这可能会对框架层次结构产生自下而上的影响。 
 
 
 至于性能改进，我会把它留给John Resig。 
 
Browser         Normal (ms) Fragment (ms)
Firefox 3.0.1   90          47
Safari  3.1.2   156         44
Opera 9.51      208         95
IE 6            401         140
IE 7            230         61
IE 8b1          120         40
 
 资料来源： http ： //ejohn.org/blog/dom-documentfragments/ 
 
 你的例子虽然有些瑕疵。 
 
var arrayOfElements = [$("<li>....</li>"), $("<li>....</li>"), $("<li>...</li>")];
 
 应该写成： 
 
var arrayOfElements = ["<li>....</li>", "<li>....</li>", "<li>....</li>"].join('');
 
 其次 
 
// Approach 1
$(".list").html(arrayOfElements);
 
 在这两个例子之间，这个实际上可能更好。 为什么？ 
 
 因为： 
 
// Approach 2
$(".list").detach().html(arrayOfElements).appendTo("#main");
 
 可能导致最多（并且可能会）2次回流。 一旦<ul> DOM <ul>从DOM中删除，一次将其附加到DOM。 Approach 1可能导致2次（或更多次）回流，因为.html必须删除当前子级，然后附加第二组。 决定因素是.html方法是顺序追加每个元素还是一次追加一个DOM元素。 但至少它更容易理解。 并且它最多可以从DOM中移除少量元素，从而可能减少回流的影响。 
 
 但是，这两种方法都优于以下方法： 
 
var arrayOfElements = ["<li>....</li>", "<li>....</li>", "<li>....</li>"];
$('.list').children().remove();
for (var i = 0; i < arrayOfElements.length; i++) {
    $(arrayOfElements[i]).appendTo('.list');
}

When appending a series of elements to the DOM each triggers the browser to reflow the page. Adding one element to the page that has already been prepared while not on the DOM then appending that to the DOM only causes one reflow of the page.
 
From: http://www-archive.mozilla.org/newlayout/doc/reflow.html
 
 
 
All reflows have a reason, which is maintained in the reflow state object (and may mutate, as described below). The reflow reason controls how a frame reacts during a reflow, and is one of the following:
 
 
The article goes on to list the reasons for a reflow, the following is one such reason:
 
 
 
Incremental, when something in the frame tree changes; for example, when more content is read from the network, or some script manipulates the DOM. An incremental reflow is targeted at a single frame in the frame hierarchy. During an incremental reflow, a frame can assume that none of the constraints computed from above'' (for example, available width) have changed; instead, somethingwithin'' the frame has changed, which may have bottom-up impact to the frame hierarchy.
 
 
As for performance improvements I will leave that to John Resig.
 
Browser         Normal (ms) Fragment (ms)
Firefox 3.0.1   90          47
Safari  3.1.2   156         44
Opera 9.51      208         95
IE 6            401         140
IE 7            230         61
IE 8b1          120         40
 
Source: http://ejohn.org/blog/dom-documentfragments/
 
Your examples are somewhat flawed though.
 
var arrayOfElements = [$("<li>....</li>"), $("<li>....</li>"), $("<li>...</li>")];
 
Should be written as:
 
var arrayOfElements = ["<li>....</li>", "<li>....</li>", "<li>....</li>"].join('');
 
Secondly
 
// Approach 1
$(".list").html(arrayOfElements);
 
Between the two examples this one MAY actually be better. Why?
 
Because:
 
// Approach 2
$(".list").detach().html(arrayOfElements).appendTo("#main");
 
Can cause up to (and probably will) 2 reflows. Once when the <ul> is removed from the DOM and once when it is appended to the DOM. Approach 1 may cause 2 (or more) reflows, as .html will have to remove the current children and then append the second set. The determining factor will be if the .html method appends each element sequentially or all at once as one DOM element. But at very least it is easier to grok. And at best it removes one less element from the DOM potentially diminishing the effects of the reflow.
 
However both methods are preferable to the following:
 
var arrayOfElements = ["<li>....</li>", "<li>....</li>", "<li>....</li>"];
$('.list').children().remove();
for (var i = 0; i < arrayOfElements.length; i++) {
    $(arrayOfElements[i]).appendTo('.list');
}