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

回答

相关问题