-3

たとえば、50000セルのhtmlでjavascriptを使用してテーブルを動的に追加します。

<table id="dataTable">
   <tbody>
       <tr>
           <td>data1</td>
           <td>data2</td>
           .....
           <td>data1</td>
       </tr>
       ..........
       <tr>
           <td>data1</td>
           <td>data2</td>
           .....
           <td>data1</td>
       </tr>
    </tbody>
</table>

子孫セレクターを使用して td を次のようにスタイリングしています。

#dataTable td{
     text-align:right;
     border:1px solid #adadad;
     padding-right:10px;
}

もう 1 つのオプションは、クラス セレクターを使用して各 td にクラスを与えることです。

<table id="dataTable">
   <tbody>
       <tr>
           <td class="format">data1</td>
           <td class="format">data2</td>
           .....
           <td class="format">data1</td>
       </tr>
       ..........
       <tr>
           <td class="format">data1</td>
           <td class="format">data2</td>
           .....
           <td class="format">data1</td>
       </tr>
    </tbody>
</table>

ここでは、スタイリングに format クラスを使用しています。

.format{
     text-align:right;
     border:1px solid #adadad;
     padding-right:10px;
}

ブラウザでテーブルをレンダリングしているときにパフォーマンスの問題に直面しています。これは、DESCENDANT SELECTOR INSTEAD OF CLASS SELECTOR を使用したためですか。または、ブラウザが大きなデータを処理できません。

4

1 に答える 1

1

テーブルの性能について

変更のたびに計算して設定する必要がある動的な列サイズが主な原因で、テーブルのレンダリングが遅くなる可能性があります。

次のように、各列に固定サイズを指定することでこれを解決できます。

#dataTable td {
    width: 100px; /* Set sizes appropriately */
}

これにより、テーブルのパフォーマンスが向上します

CSS のパフォーマンスについて

CSS は最初に最後のトークンで選択するため、たとえば、次のセレクターを実行します。

#dataTable td

CSS は最初にすべてtdの要素を選択し、次にそれらのそれぞれが の子孫であるかどうかを確認し#dataTableます。技術的には、セルごとにクラスを指定する方が高速です。

ただし、これは、全体的な設計を複雑にすることで支払うほど重要ではない可能性があります。

CSS とパフォーマンスについて理解を深めるために、CSS-Tricks による効率的なレンダリング CSSを読むことをお勧めします。

于 2013-04-06T10:32:42.643 に答える