0

Internet Explorer（8および9）と大きなデータテーブルで非常に大きなパフォーマンスの問題が発生します。

数百のアイテムをロードすると、ブラウザー（Internet Explorerだけでなく、ChromeとFirefoxも）が大幅に遅れ始めます。最初はJavaScriptのせいだと思っていましたが、後でCSSのせいであることに気づきました。ブラウザでは要素がレンダリングされないことがわかったdisplay:noneので、微調整を行い、要素を要素にグループ化して、次のようにビューポートに表示されていないときに非表示にしました。

<tbody style="display:none"></tbody>
<tbody></tbody>

ChromeとFirefoxのパフォーマンスは実際に向上しましたが、InternetExplorerでは向上しませんでした。Internet Explorerは、これらの非表示要素のスタイルをレンダリングまたは再計算しようとしているようです。display:noneInternetExplorerでは違いがないようです。レンダリングが機能しないようにできれば、パフォーマンスは向上するはずですが、どうすればよいかわかりません...

また、ブラウザが大きなデータテーブルで遅れを取り始める理由は、各行に約50個の要素があり、その中にCSSで高度なスタイルが設定されているためです。

InternetExplorerでこれを修正するために他に何を試みるべきかわかりません...

何か案は？

PS：テーブルレイアウトは固定に設定されています

4

5 に答える 5

2

スクリプト自体は高速に実行されますが、レンダリング速度はDOMへの要素の作成方法にも依存します。

私の（Internet Explorer）の経験document.write()では、大きなテーブルを作成する最も速い方法です。より100倍以上速くなる可能性がありますappendChild(document.createElement())。またinsertRow() & insertCell()、各行とセルを作成して追加するよりもはるかに高速です。innerHTMLコンテンツを追加するのに最も遅い方法のようです（ただし、この場合は、テーブル自体ではなく、セルコンテンツの作成にのみ使用できます）。

残念ながら、これらのパフォーマンスの違いは必ずしもクロスブラウザではありません。あるブラウザは、別のブラウザよりも他の方法で同じ仕事をより速く実行しています...

それでは何ができますか？テーブルをいくつかの小さなテーブルに「分割」してみてください。あなたはそれtable-layout: fixedが設定されていると言いました。COLそれらのためにおよび/またはCOLGROUPタグとwidthsも使用しますか？それらがないと、設定table-layoutはほとんど役に立ちません。または、遅延読み込みを使用することもできます。テーブルのごく一部をロードするだけで、必要に応じてさらにロードします。

「例」：Internet Explorerアプリケーションを作成しました。これは、現在、それぞれ8つのセルを持つ6つの行を持つ379のテーブルを示しています。これらのテーブルを作成してレンダリングするには、2秒未満かかります（Internet Explorer 9の場合）。ただし、（テストしたばかりですが）1つのテーブルに2274行すべてを作成する場合、レンダリングには約15秒かかります。大きなテーブルを小さな部分に分割すると、他のブラウザでもレンダリングが高速化されると思います。

于 2012-11-30T11:49:06.097 に答える
0

サンプル コードは表示されませんが、非表示の要素を DOM から削除できます。

したがって、単に設定するのではなく、display:noneそれらをデタッチしてremoveChild()、表示する必要があるまで何らかのオブジェクトに保存してから、適切な場所に挿入します。

于 2012-11-30T10:22:06.667 に答える
0

再描画の問題を解決するには、ドキュメント フラグメントを使用します。ドキュメント フラグメントに追加された子はレンダリングされず、表示される問題は発生しません。その後、フラグメント自体をテーブルに挿入できます。

var docFrag = document.createDocumentFragment();

// The following is pseudo code, but you get the picture
for (var i = 0; i < largeCount; i++) {
    var row = createRow();
    docFrag.appendChild(row);
}

// Append the fragment to the table (or even tbody)
var tbl = document.getElementById('myTbl');
tbl.appendChild(docFrag);

ドキュメント フラグメント自体は何も表示されません。基本的には、プレースホルダーとして機能し、何かに挿入すると消えるコンテナー要素です。

編集: 詳細については、こちらを参照してください。

于 2014-07-10T08:34:37.280 に答える