Question

我遇到的CSS解决方案存在问题。我有一个3000行左右的列表，每个行都有以下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使用率的情况下完成这项工作。也许我接近这种情况是错的？有人有什么想法吗？

谢谢！

Answer 1

尝试使用.row>.title和.row>.description - >组合器比[space]组合器效率更高，因为它只需要移动层次结构的一个级别而不是所有级别他们。

通常这不会产生太大的影响，但可以有3,000行。

另外，请考虑在表格中添加table-layout: fixed。您可能需要添加一些HTML：

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

这将允许浏览器呈现引擎修复表格布局，而不是根据内容使其动态化 - 这将为您的巨大表格增加大量改进。

Answer 2

将您的选择器更改为更具体的内容，例如：

.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;
}

级联选择器更昂贵，因为浏览器在解释css选择器时从右到左遍历DOM。

您可以使用Chrome开发工具衡量您的css选择器效果，＆＃34;个人资料＆＃34;并使用＆＃34;收集CSS选择器配置文件＆＃34;。

css的高CPU使用率

2 个答案: