-3

我在 html 中使用 javascript 动态附加表格，例如 50000 个单元格。

<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;
}

另一种选择是使用类选择器为每个 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{
     text-align:right;
     border:1px solid #adadad;
     padding-right:10px;
}

在浏览器中呈现表格时，我遇到了性能问题。这是因为我使用了 DESCENDANT SELECTOR 而不是 CLASS SELECTOR。或者浏览器无法处理大数据。

4

1 回答 1

1

关于表性能

主要是由于需要在每次更改时计算和设置动态列大小，表格的呈现速度可能会很慢。

您可以通过为每列指定固定大小来解决此问题，如下所示：

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

这应该使您的表更高效

关于 CSS 性能

CSS 首先按最后一个标记进行选择，例如，执行以下选择器：

#dataTable td

CSS 将首先选择所有td元素，然后检查它们中的每一个是否都是#dataTable. 从技术上讲，为每个单元指定一个类更快。

但是，这可能不足以通过使您的整体设计复杂化来支付费用。

我推荐阅读CSS-Tricks 的Efficiently Rendering CSS以更好地了解 CSS 和性能。

于 2013-04-06T10:32:42.643 回答