Question

我在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 INSTEAD OF CLASS SELECTOR。或者浏览器无法处理大数据。

Answer 1

关于表格效果

由于动态列大小需要计算并在每次更改时设置，因此表格呈现速度很慢。

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

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

这会使你的表更具性能

关于CSS效果

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

#dataTable td

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

但是，这可能不足以让您的整体设计复杂化。

我建议您通过CSS-Tricks阅读Efficiently Rendering CSS以更好地了解CSS和性能。

CSS性能 - 后代选择器与类选择器

1 个答案: