使用文檔片段性能不佳的IE片段

爲了測試DOM操作與innerHTML的關係，我使用documentFragment（web page）將此小測試方法添加到div元素。 Chrome或Firefox的性能不錯，但是在IE（10,9,8）中，它的性能很差，大約需要10-12秒。任何人都可以解釋這種差異和/或闡述一個解決方案，以提高IE的性能？使用文檔片段性能不佳的IE片段

這是一個jsfiddle展示它。

的方法：

function useFragment(){ 
    var frag = document.createDocumentFragment(), 
     i = 10000, 
     rval = document.createElement('span'); 
    frag.appendChild(rval); 
    do { 
    var optText = 'option '+i 
     ,ref = document.createElement('a') 
     ,zebra = i%2 ? 'zebra' : '' 
     ,islist = true 
     ,isSel = i === 5 
    ; 
    rval.insertBefore(ref,rval.firstChild); 
    ref.appendChild(document.createTextNode(optText)); 
    ref.id = 'opt' + i; 
    ref.className = zebra + (islist && isSel ? ' scrollSelect' : ''); 
    ref.href = '#' + i; 
    ref.title = optText; 
    } while (i-->0); 
    return rval; 
}

來源

2012-12-29 KooiInc

我從來沒有聽說過文檔片段之前... –

嗨，簡，添加鏈接到關於這個問題的Resig文章。 – KooiInc

我認爲你測量時間的方式有缺陷。例如，您可以在定時區域內爲片段定時定義'useInnerHtmlBttn.onclick'處理程序。 –

想我找到了它：它看起來像，雖然documentFragment應該是一個「離線」元素IE（是不是活DOM的一部分元素）不把它當作。強制片段真正被脫機的方法是向其中追加一些元素，將其display屬性設置爲none，並將其餘元素附加到該元素。完成後，請刪除display:none屬性，並將documentFragment附加到DOM。它的速度仍然慢三倍（在我的電腦上，它仍然需要大約1-1.5秒，而在Chrome/Firefox中大約需要2-300毫秒的10000個元素）。因此，對於IE（甚至是版本10），使用innerHTML向DOM添加一堆元素是更快的方法。我認爲IE仍然是開發者的噩夢。

來源

2012-12-30 10:00:50 KooiInc

據我的經驗，最好的好處是在片段中追加很多孤立的元素，並且在所有子元素和屬性都被修復之前追加該元素（後綴追加）。如果我理解你的代碼（我懶得真的解碼它），那麼你有一個跨度添加到片段中。這不是documentFragment的意義。順便說一下：你不應該在循環中聲明你的變量。

var node=document.getElementById("whatever") 
    ,frag=document.createDocumentFragment() 
    ,i=0,len=50,a={},img={}; 
for(i;i<len;i++){ 
    a=document.createElement("a"); 
    img=document.createElement("img"); 
    a.href="image"+i; 
    img.className=J[i][1]; 
    img.src="image/img"+i+".png"; 
    img.alt="image:"+i; 
    a.appendChild(img); 
    frag.appendChild(a); 
    }      
node.appendChild(frag);

這樣，IE8 Opera12與innerHTML的獲取時間大致相同。真正的好處是鉻。使用innerHTML，FF令人難以置信。在舊的XP機器上測試過。

另一件需要考慮的事情是創建一個沒有與DOM連接的節點，包含所有子節點和屬性，克隆它幾次，操作它並將其附加到documentFragment。

var frag=document.createDocumentFragment() 
    ,toFill=document.getElementById("imageCollection") 
    ,i=0,a={},img={} 
    ,dummy=document.createElement("a") 
    ; 
dummy.innerHTML="<img src='img/image_' />"; 
for(i;i<50;i++){ 
    a=dummy.cloneNode(true); 
    img=a.getElementsByTagName("img")[0]; 
    a.href="description_"+i+".html"; 
    img.src+=i+".png"; 
    frag.appendChild(a); 
    }    
toFill.appendChild(frag);

如果您不需要對克隆節點進行大量操作，這非常有用。

來源

2014-03-02 09:17:18

使用文檔片段性能不佳的IE片段

回答

相關問題