Question

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

这是以HTML的方式实现的：

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

当用户点击按钮时，我只需使用jQuery在grid/list 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结构有关吗？

Answer 1

这实际上与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 {
    ...
}