提高CSS类交换机的性能

我有一个项目列表，可以在“网格或列表”模式中显示。提高CSS类交换机的性能

这是在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结构有关吗？

来源

2012-11-16 mexique1

为什么不直接使用UL的自理和摆脱他们周围的div的吗？ –

这是否有很大的区别？ – mexique1

任何事情都会有所作为，“少就是多”。 :) –

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

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

Writing efficient CSS selectors

Optimize browser rendering

Why do browsers match CSS selectors from right to left?

因此，我通过类选择器替换元素选择器，除去深选择器，并且不同的是显着的。

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

来源

2012-11-17 10:26:19 mexique1

我不认为jQuery认为在没有ID的选择器中有很大的不同。此外，你没有*只是*改变你的选择器。您还必须更改标记以适应您对选择器所做的更改。所以这两者都有一点点。 – BoltClock

这是因为在JavaScript中，具有ID的元素在页面中应该是唯一的，并且只有第一个匹配，但CSS不关心，可以有多个具有相同CSS ID的元素。 – mexique1

提高CSS类交换机的性能

回答

相关问题