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性能 - 後代選擇器與類選擇器

回答

相關問題