提高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類交換機的性能

回答

相關問題