表形式データの場合、CSSと＆lt; TABLE＆gt;のどちらが高速にレンダリングされますか？ [閉まっている]
https://stackoverflow.com/questions/135826
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
実際の TABLE や TR 、 TD などのタグ。
適切なものを探しているのではなく、高速なものだけを探しています。特にFirefox 3では、他のブラウザの統計情報にも興味があります。 course TABLEタグはテーブル用に設計されています。それは問題ではありません。
解決
一般に、＆lt; table＆gt;を使用すると言います。表形式データ用。ただし、テーブルが非常に長く（100行を超えるなど）、列数が少ない（〜3）場合、divを使用して行をエミュレートすると、マークアップのフットプリントがはるかに小さくなります。これは、DOMツリーのサイズを小さくすることが有益であるため、DOM検索JavaScript（多くのJSライブラリによって提供される）を使用している場合に特に関連します。
これは経験によるもので、このようなテーブルがあり、最適化を探していました-divベースのディスプレイに移動すると、生成されるHTMLが3分の1にカットされ、DOMトラバーサルパフォーマンスが大幅に向上しました。
他のヒント
表形式のデータが本当にある場合は、テーブルを使用します。決してテーブルを使用してはならないという考えは、意図したセマンティック目的にのみhtmlタグを使用するという正しい概念の誤った拡張でした。つまり、レイアウトにはCSSを使用しますが、表形式のデータにはテーブルを使用します。テーブルを使用しないという意味ではありません。
一部のブラウザは、コンテンツサイズの列幅を調整するためにテーブル全体が転送されるまで待機するため、divを使用すると、おそらくレンダリングが高速になりますすべてのブラウザで平均。
とはいえ、テーブルが必要な場合はテーブルを使用してください。
この質問は次の質問に似ているようです。 HTMLのレイアウトにテーブルを使用しない理由もあるので、そこの応答のいくつかを確認することもできます。
一般に、ブラウザはテーブル全体が計算されるまでテーブルをレンダリングしません。つまり、ユーザーの観点からすると、テーブルの代わりにCSSスタイルを使用する同じコンテンツよりも大きなテーブルが遅くなります。ある時点で、テーブルを使用してステータス情報のグリッドを表示するWebアプリケーションを操作していましたが、表示するのに非常に集中的で、非常に時間がかかりました。 CSSを使用して表示される同じ情報はより速く、より重要で、テーブル全体を待つのではなく、ロードされるたびに行ごとに表示されるようになったため、エンドユーザーとして felt 速くなりました。 CSSを使用して、テスト用のサンプルデータセットを使用してデータを表示することを検討することをお勧めします。これは、特定のユースケースで実際にテーブルが非常に遅いことを確認するために行ったものです。
CSSをレイアウトに使用し、ベストプラクティスを順守し、CSSを別のファイルに保存する場合、通常、CSSはキャッシュされる前に1回ダウンロードするだけでよく、キャッシュの利点が得られます。
レイアウトにテーブルを使用すると、レイアウトテーブルがすべてのページのHTMLとともに送信され、帯域幅とダウンロード時間が増加します。
table-layout：fixed;の設定は、それが役立つかどうかを確認します。
異なるブラウザーは、javascript / cssのパフォーマンスが大きく異なるため、ここで一般化することは非常に困難です。たとえば、IE7のエンジンは驚くほど遅く、Chromeのエンジンは驚くほど高速です。 Firefoxはその中間にあり、2または3を使用している場合は依存します。
ここでは、レンダリング速度を最も重要な側面とは見なしません。 HTMLテーブルは表形式のデータ用に作成されます。それを多くのDIVに入れることは、私の理解ではまったく間違っているでしょう。
上記の回答のほとんどと同様に、表形式のデータを表示している場合はテーブルを使用し、CSS3を使用してレイアウトを制御する場合はDIVを使用します。 信念に反して、colgroupなどのいくつかのプロパティを設定し、レイアウトを固定のままにしておけば、テーブルはDIVよりもレンダリングが遅くなりません。方法の詳細については、次のリンクをご覧ください。
sites.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata
表形式のデータには、テーブルを使用します。テーブルには、＆lt; thead＆gt; や＆lt; tfoot＆gt; タグ、凡例、タイトル、キャプションなど、あらゆる種類の便利な機能が備わっています。テーブルを作成するために必要なものすべてテーブル。
また、CSSが機能しない/ロードされない/問題にならない場合でも、テーブルは見た目と機能をそのまま維持します。
個人的に私が読んだものから、もしあなたが実際に表形式のデータを提示しているなら、テーブルはタスクにより適しています。
「速い」ものの生数については、@ skaffmanが述べているように、ブラウザによって異なりますが、「正しい」ことは表形式のデータにテーブルを使用することは理にかなっています。
