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

-3

我在html中动态地使用JavaScript附加表格，并使用say 50000单元格。CSS性能 - 后代选择器与类选择器

<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 CLASS SELECTOR。或浏览器无法处理大量数据。

来源

2013-04-06 WebDev

关于表的性能

表可能会很慢来呈现这主要是由于需要动态列的大小来计算，并在每次改变设置。

您可以通过指定一个固定大小为每个列解决这个问题，就像这样：

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

这应该让你的餐桌更高性能

关于CSS性能

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

#dataTable td

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

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

我推荐阅读Efficiently Rendering CSS by CSS-Tricks以获得关于CSS和性能的更好的想法。

来源

2013-04-06 10:32:42

感谢有效呈现CSS链接。它不会导致任何性能问题呈现class =“format”50000次。如果这不是问题，那么使用后代选择器有什么意义。 – WebDev 2013-04-06 11:15:17

我相信（因为我没有看到实际的实现），重要的是在选择器中选择的元素组的大小。给定每个表格单元格都具有该类名称的'td'将选择一个与'.format'大小相同的组。在你的案例中调整类名所带来的性能收益将是微不足道的，但可能也不会造成任何伤害。 – 2013-04-06 11:32:29

我很清楚后代选择器是如何工作的，但是使用后代选择器有什么意义？如果我们可以使用类选择器。我关心的是在html上添加class =“format”50000次。我不是在谈论减少手动添加它的工作，我正在使用foreach循环来打印它。 – WebDev 2013-04-06 11:46:44

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

回答

相关问题