css - 提高 CSS 类开关的性能

Question

我有一个可以以“网格或列表”模式显示的项目列表。

这是在 HTML 中以这种方式实现的：

<!-- List mode -->
<div class="items list">
    <ul></ul>
</div>
<!-- Grid mode -->
<div class="items grid">
    <ul></ul>
</div>

grid/list当用户单击一个按钮时，我只是使用 jQuery在 CSS 类之间切换。在我的样式表中，我正在设置.items.grid > ul/的样式.items.list > ul，有时会在模式中隐藏子元素grid，例如：

.items.grid .hidden-grid {
    display: none;
}

.items.grid ul li {
    float: left;
    display: inline-block;
    width: 80px;
    height: 80px;
}

列表中显示的元素数量可以变化，并通过“无限滚动”加载，直到有剩余项目。

这工作得相当好，但是当元素数量增加时它开始变慢。我原以为这是即时的，但它会阻止浏览器。

我该怎么做才能让它更快？

与必须再次渲染元素的浏览器相关的外观。

这可能与CSS结构有关吗？

score 0 · Accepted Answer

这实际上与 CSS 选择器以及浏览器解析它们以呈现页面或再次呈现元素的方式有关。

你知道这是非常合乎逻辑的，但是浏览器从右到左评估 CSS 选择器，从他们最终必须设置样式的元素开始。甚至 CSS ID 也没有太大的区别。这与 jQuery 的思维方式不同。

所以我用类选择器替换了元素选择器，去掉了深度选择器，区别很明显。

HTML

<div class="items">
    <ul class="grid">
        <li class="item>...</li>
    </ul>
</div>

CSS

.grid .item {
    ...
}

.grid .hidden-grid {
    display: none !important;
}

.list .item .description {
    ...
}

1 回答 1