CPU佔用率高css

我的CSS解決方案存在一個問題，我想到了。我有3000行的列表左右，他們每個人都有應用到每一行下面的CSS：CPU佔用率高css

.row .title, 
.row .description { 
    position: relative; 
    overflow:hidden; 
    white-space: nowrap; 
    background-color: inherit; 
} 

.row .title:after, 
.row .description:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 10%; 
    height: 100%; 
    background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));   
}

下面是一個簡單的一行：

<tr class="row"><td class="title">really long test data string</td><td class="description">Test description</td></tr>

基本上什麼，我試圖做的是褪色當窗口小於表格寬度時輸出文本。問題在於，在滾動表格時，我總是有很高的CPU使用率，因此幾乎所有的時間都沒有響應。我意識到這是導致這個CSS的片段，但有誰知道一種方法來使這個工作不會導致高CPU使用率。也許我接近這種情況是錯誤的？任何人有任何想法？

謝謝！

來源

2014-04-03 Andrew Butler

_「我有一個3000行的列表」_。分頁也許？ – j08691

它從100開始，然後當用戶滾動到底部時，它會持續抓取行，但總體上當行數超過1000行時，它會啓動性能問題 –

如何在表標記中設置漸變，甚至是來自標籤，所以它曾經畫過 –

嘗試使用.row>.title和.row>.description - 的>組合子比[space]組合子更有效，因爲它只有旅遊的層次，而不是所有的人的一個級別。

通常情況下，這並沒有太大的區別，但是可以使用3000行。

此外，請考慮將table-layout: fixed添加到您的表中。您可能需要添加一些HTML：

<table style="table-layout:fixed"> 
    <colgroup> 
     <col style="width: 50px" /> 
     <col style="width: 250px" /> 
    </colgroup> 
    <tbody> 
     <tr>...</tr> 
     ... 
    </tbody> 
</table>

這將允許瀏覽器渲染引擎修復表格的佈局，而不是使基於內容是動態的 - 這將加起來大規模改進你的大表。

來源

2014-04-03 16:53:00

漸變也可以從col標籤中應用，這也是一個非常明顯的測試：http://codepen.io/gc-nomade/pen/ybDhH –

@Gyryrillus可能，但OP在這裏用'：after' psuedoelement有一個「前景」漸變。 –

這裏是關於的想法：col背景：線性梯度（向左，rgba（255,255,255,1），rgba（255,255,255,0.5），rgba（255,255,255,0））右無重複; background-size：10％100％; } –

改變你的選擇，以更具體的東西，如：

.rowtitle, 
.rowdescription { 
    position: relative; 
    overflow:hidden; 
    white-space: nowrap; 
    background-color: inherit; 
}

或直系後裔，如果它適合你的標記：

.row > .title, 
.row > .description { 
    position: relative; 
    overflow:hidden; 
    white-space: nowrap; 
    background-color: inherit; 
}

級聯選擇更昂貴的，因爲瀏覽器遍歷DOM權解釋一個CSS選擇器時離開。

您可以使用Chrome開發工具「配置文件」並使用「收集CSS選擇器配置文件」來測量您的css選擇器性能。

來源

2014-04-03 16:55:14 Luca

CPU佔用率高css

回答

相關問題