提高CSS类开关的性能

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

这是通过以下方式在HTML中实现的：

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

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

这是相当好的工作，但当元素数量增加时，它开始变慢。我希望这是瞬间的，但它会阻止浏览器

我可以做些什么来加快速度？

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

---

这可能与CSS结构有关吗？

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

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

所以我用类选择器替换了元素选择器，去掉了深度选择器，差别是显而易见的

HTML

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

---

为什么不直接使用ul的Themes并去掉他们周围的div？这会有很大的不同吗？任何事情都会有不同，

越少越好。

：）您是在外部div上更改类，还是显示列表和隐藏网格，反之亦然？大多数“无限滚动”类型的分页一次只在页面上保留元素的子集。请看一看数据加载器的概念。遗憾的是，没有太多的文档，但是您可以了解如何使用元素。我认为jQuery在没有ID的选择器中的想法不会有太大的不同。而且，您不仅仅是更改了选择器。您还必须更改标记以适应对选择器所做的更改。这是因为在JavaScript中，一个ID为的元素在页面中应该是唯一的，并且只有第一个元素会被匹配，但是CSS不在乎，你可以有几个ID相同的元素。

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

.grid .item {
    ...
}

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

.list .item .description {
    ...
}