HTML における Div と table の違い (あらゆる側面から詳細に説明)

1: 速度と読み込み方法の違い

divとtableの違いは速度ではなく、読み込み方法です。速度はネットワーク速度のみを参照できます。速度が十分に速い場合は違いはありません。

div の読み込みモードは、読み込まれたときに読み込まれるモードです。<div> に遭遇したが </div> に遭遇しなかった場合、div 内のコンテンツが読み込まれます。コンテンツは、読み込まれた分だけ読み込まれます。table の読み込みモードは、完了後に読み込まれるモードです。<table> に遭遇したが </table> を読み取る前に遭遇した場合、table 内のコンテンツは読み込まれないか、転送が中断されたときに読み込まれます (document.onload() イベント)。これは、TABLE が複数の行と列を含むためです。したがって、TABLE のすべてのコンテンツが読み込まれた場合にのみ、IE はそれをどのように表示すればよいかを認識します。

2: Webアプリケーションの違い

ページの最初または最後に表を追加する場合は、ページ全体が読み込まれるまで待ってから読み込む必要があります。

ページの最初と最後にdivを追加しても効果はありません

3: 大規模ウェブサイトにおけるDIVとテーブルレイアウトの使いやすさの比較

DIV と TABLE 自体に優劣はありません。いわゆる Web 標準では、タグの正しい使用が推奨されているだけです。たとえば、DIV はレイアウトに使用され、TABLE は本来 2 次元データの変換に使用されます。 TABLE に本来の機能を実行させますが、TABLE がページに表示されないことがそれほど優れているというわけではありません。

組版に DIV を使用する利点は、説明する必要がないのに、誰もが理解できる点です。 DIV は標準であり、一般的な傾向ですが、すべてのページで DIV を使用するのに適しているわけではありません。

中国のポータルサイトと海外のポータルサイトには大きな違いがあります。中国のネットユーザーは情報が少ないページを好みません。中国のYAHOOページはコンテンツが非常に多く、前回シンプルなページに変更されたとき、アクセス数が大幅に減少したため、数日後に元に戻りました。まさに中国の国情からこそ、捜狐や新浪のようなポータルサイトが作られたのです。

なぜ DIV は適していないのでしょうか? いくつかの側面から 1 つずつ説明しましょう。

簡略化されたコード:

DIV レイアウトはコードを簡素化すると誰もが言いますが、TABLE の代わりに DIV を使用することで節約されたコードは CSS (スタイル) によって占有され、これらのスタイルのほとんどは DIV のレイアウトを制御するために使用されます。では、CSS は外部で再利用できると言うかもしれません。この質問の答えを知るには、読み進めてください。

再利用性とダウンロード:

統一された .css スタイルシートファイルを使用すると、1 回の変更でサイト全体を変更できるため、メンテナンスコストが削減されます。しかし、別の観点から考えてみてください。すべてのページがロード時にファイルにアクセスする必要がある場合、特にSohuとSinaのWebサイトプラットフォームでは、このファイルの毎日のダウンロード量は数億回に達します。これには、サポートを提供するために多くのフロントエンドWebサーバーが必要になり、バックエンドのコストも目に見えないほど大幅に増加します。背景のサポートが適切に行われないと、ページが歪んで表示され、これまでの作業がすべて無駄になってしまいます。多くの人が、これが起こる可能性は低すぎると尋ねるでしょう。私たちがやっていることは、1、2 回の事故の発生を防ぐことです。事故が起これば、ポータルへの影響は悲惨なものになります。

HTTP通信:

統合スタイルシートファイルは外部呼び出しの形式であるため、1 ページがロードされるたびに、サーバーへの追加の HTTP 要求が行われ、サーバーは追加の応答を受け取ります。これにより、フロントエンド Web サーバーの消費量が大幅に増加します。長い間、CSS と JS は、サーバー消費の増加を最小限に抑えるために、外部呼び出しとしてではなく、ページのフロントエンドに記述されていました (Sohu と Sina のページを見ると、ほとんどがこの形式になっています)。

ページキャッシュ:

ユーザーがページにアクセスするたびに、そのページは一定期間ブラウザのキャッシュに保存され、次回ユーザーがページにアクセスしたときにページの表示速度が大幅に向上します。変更するたびにページが再ダウンロードされます。外部からインポートされたスタイルファイルについても同様です。CSS ファイルが変更されると、Web サイトでアクセスされるすべてのページが再ダウンロードされます。ページにスタイルを書き込む以前の方法では、変更されたページのみを再ダウンロードする必要があります。

互換性:

すべてのブラウザのすべてのバージョンが CSS (スタイルシート) を十分にサポートしているわけではありません。たとえば、IE5 より前のブラウザは CSS を十分にサポートしていません。最近では、IE5 より前のバージョンのブラウザを使用しているユーザーが多くいます。そのため、互換性を確保するためにページ作成時にさまざまなバージョンのブラウザに対してテストする必要があり、目に見えない形で作業負荷が増加しています (少なくとも私が接した開発者は、div ページの作成に table ページの作成よりも時間がかかります)。

横断面と延性:

水平分割 - ページのダウンロードを高速化するために、従来のレイアウト方法では、ページを上から下まで複数のブロックに分割します。ただし、この状況は DIV レイアウトを使用するページでよく発生します。各ブロックの中央の列または他の列のコンテンツ項目の数が固定されていないため、両側の列が同時に適応せず、空白スペースが発生します。

上記では、技術そのものではなく、特定の分野における特定の技術の有用性についてのみ議論しています。

とはいえ、これは DIV レイアウト方法が悪いという意味ではなく、他のレイアウト方法に盲目的に従うのではなく、大規模なコンテンツベースのポータルにおけるテーブルの役割を正しく認識する必要があるという意味です。大規模なウェブサイトで DIV レイアウト方式が使用されない理由は、ポータルが技術が遅れているために DIV を使用していないからでも、内部の人々が前向きではないからでもなく、複数の理由によって決まります。 NetEase が DIV 形式を使用する理由は、コンテンツが主な焦点ではないためです。他のポータルについては、このような決定は時間をかけて検証する必要があります。ただ、まだ時期が熟していないだけです。

4: DIV+CSS

今では、DIV + CSS は文字通りの意味ほど単純ではなく、2 つの固有の意味を持っていると思います。

1. 構造とプレゼンテーションを分離します。DIV を使用して構造を完成させ、CSS を使用してプレゼンテーションを制御します。これにより多くの利点がもたらされます。DIV によりページが簡素化され、柔軟性が向上します。 CSS に精通したデザイナーは、DIV の繰り返しのネストを避けることができるため、ページの読み込み速度とサイトの保守性が大幅に向上します。

2. CSS と連携するために DIV を選択する理由は、CSS の核心は「ボックスモデル」であり、DIV よりも「ボックスモデル」の本質をよりよく解釈できるタグはないからです。TABLE の構造は複雑すぎて、これをうまく行うことはできません。TABLE+CSS もオプションですが、DIV にはフローティングスタッキングという別の利点があり、レイアウトに TABLE を使用する Web サイトは W3C 検証に合格できないことを忘れないでください。

実際、DIV の利点はそれだけではありません。たとえば、柔軟なレイアウトやユーザー定義のレイアウトなど、DIV は信じられないほどの柔軟性を示し、そのセマンティック構造は TABLE よりも検索エンジンフレンドリーで、クロスプラットフォームアプリケーションであることは言うまでもありません。 DIV+CSS は、エレガントで標準化された技術フレームワークを提供し、最小限の反復作業でより美しいページを完成させることを可能にします。これにより、チーム全体の効率が向上し、Web デザイナーと Web プログラマーが同期して作業できないという長年の問題が解決されます。

<<: Linux で CPU 使用率が高くなる原因をトラブルシューティングするプロセスの詳細な説明

>>: JavaScript での正規表現の使用について詳しく学ぶ