2013-04-06 112 views
-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。 或浏览器无法处理大量数据。

回答

1

关于表的性能

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

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

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

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

关于CSS性能

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

#dataTable td 

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

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

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

+0

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

+0

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

+0

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