CSS 클래스 스위치의 성능 향상

Question

"격자 또는 목록" 모드로 표시 할 수있는 항목 목록이 있습니다.

이 HTML이 방법을 구현

는 :

사용자가 버튼을 클릭

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

, 난 그냥 jQuery를 사용하여 grid/list CSS 클래스를 전환 할 수 있습니다. 내 스타일 시트에서 나는 가끔 grid 모드에서, 같은 하위 요소를 숨기고 .items.grid > ul/.items.list > ul 스타일링 해요 : 다를 수 있습니다 목록에 표시 요소의

.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의 사고 방식과 다릅니다.

Why do browsers match CSS selectors from right to left?

Optimize browser rendering

Writing efficient CSS selectors

그래서 나는, 클래스 선택기에 의해 요소 선택기를 대체 깊은 선택기를 제거하고 차이가 눈에 띈다.

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