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

我使用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赋予类

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

在浏览器中渲染表时遇到性能问题。这是因为我使用了后代选择器而不是类选择器。 或者浏览器无法处理大数据。

关于表格性能

由于每次更改都需要计算和设置动态列大小，因此表的呈现速度可能会很慢

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

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

这将使您的桌子更具性能

关于CSS性能

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

#dataTable td

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

然而，这可能不足以使您的总体设计复杂化

---

我建议阅读CSS技巧，以更好地了解CSS和性能。

感谢高效呈现CSS链接。呈现class=format 50000次不会导致任何性能问题。如果这不会导致任何问题，那么使用后代选择器的意义是什么。我认为，因为我没有阅读实际的实现，所以重要的是选择器中被选择的元素组的大小。td将选择一个与.format大小相同的组，因为每个表单元格都有该类名。在您的情况下，调整类名所带来的性能提升将是微不足道的，但可能也不会造成任何伤害。我很清楚后代选择器是如何工作的，但使用后代选择器的意义是什么？如果我们可以使用类选择器。我关心的是在html上添加50000次class=format。我不是说要减少手动添加的工作量，而是使用foreach循环打印。添加class=format 50000次应该不会有问题，至于两个选择器之间的重要性，如果不是td捕获的所有元素都匹配的话，这似乎差不多。我仍然不清楚。如果子代选择器效率低下，因为对于与键匹配的每个元素，浏览器必须向上遍历DOM树，计算每个祖先元素，直到找到匹配项或到达根元素。键越不具体，需要计算的节点数就越多。为什么需要使用后代选择器？必须有一些特殊的情况下，他们是有利的。

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

#dataTable td