3

DOM 操作と innerHTML をテストするために、documentFragment( web page ) を使用してこの小さなテスト メソッドを作成し、要素に 10000 個hrefの要素を追加しましたdiv。Chrome または Firefox のパフォーマンスは問題ありませんが、IE (10、9、8) では劇的に悪く、約10 ～ 12 秒かかります。誰かがこの違いを説明したり、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;
}
4

2 に答える 2

10

私はそれを見つけたと思います: adocumentFragmentは「オフライン」要素 (ライブ DOM の一部ではない要素) である必要がありますが、IE はそれをそのように扱いません。フラグメントを実際にオフラインにする方法は、フラグメントに要素を追加し、そのdisplayプロパティを設定しnoneて、残りの要素をその要素に追加することです。display:none完了したら、プロパティを削除するとdocumentFragment、DOM に追加できます。

それでも 3 倍遅いです (私の PC では、10000 要素に対して Chrome/Firefox で約 2 から 300 ミリ秒かかるのに対し、私の PC では約 1 から 1.5 秒かかります)。そのため、IE (バージョン 10 であっても) を使用innerHTMLして多数の要素を DOM に追加する方が高速です。IE は依然として開発者の悪夢だと思います。

于 2012-12-30T10:00:50.117 に答える
0

私の経験によると、最良の利点は、多くの孤立した要素をフラグメントに追加し、すべての子と属性が修正される前ではなくその要素を追加することです (追加後)。私があなたのコードを理解していれば（実際にデコードするのが面倒です）、フラグメントに追加するスパンが1つあります。これは、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 とまったく同じ時間がかかります。本当の利点はクロムです。FF は innerHTML で信じられないほど高速です。古いXPマシンでテスト。

考慮すべきもう 1 つのことは、すべての子と属性を持つ 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-02T09:17:18.747 に答える