Regular Motion

개발자가 상팔자

Write ‘Efficient’ CSS

“What is Efficient CSS?”

잘 작성된 CSS의 조건은 무엇일까???

물론! 고려해야 될 다양한 변수들(File Size, Maintainability)이 있겠지만

Browser가 효율적으로 Rendering 할 수 있도록 작성하는 부분에 초점을 맞춰보자!

 

{ How Browser Render it }

  1. HTML를 Parsing하여 DOM Tree를 생성한다.
  2. StyleSheet를 Parsing 하여 Style Rules을 추출한다.
  3. Style 정보를 DOM Tree의 각각의 Node에 적용하여 Render Tree를 생성한다.
실제 Browser의 Rendering Process는 아래와 같다. 출처
Webkit Rendering Flow

Webkit Rendering Flow

 

Gecko Rendering Flow

Gecko Rendering Flow

 이번 글에서 다루고 싶은 내용은 Webkit Engine에서 ‘Attachment’라고 부르는 과정을 Browser가  빠르게 진행할 수 있도록 CSS를 작성하는 법이다!

* Gecko나 Webkit등의 Browser Engine이 Open Source로 개발되고 있기 때문에 비슷한 알고리즘을 갖는다.

 

{ From Right to Left }

Browser는 CSS Selector를 오른쪽에서 왼쪽으로 읽는다.

  1. ul > li > a
  2. ul > li > a
  3. ul > li > a

Style System은 오른쪽 끝에서부터 왼쪽으로 Match Rule을 진행한다.

이 작업은 왼쪽 끝에 도달해서 Match 되거나,

Mismatch 되어 discard(abandon)될 때까지 반복된다.

참고 : https://developer.mozilla.org/en/Writing_Efficient_CSS

 

 

{ Guidelines for Effcient CSS }

1. ID Rule에 Class Rule이나 Tag Rule을 추가하지 말자.

ID는 유일한 식별자로 사용되기 때문에 ID Rule에 추가된 Class Rule이나 Tag Rule은 Matching Process를 느리게 만든다. (Style System은 항상 왼쪽 끝까지 검사를 한다.)

 

2. Class Rule에 Tag Rule을 추가하지 말자!

1번과 비슷한 이유로 Class는 중복되지 않게 사용할 수 있기 때문에 Class Rule에 Tag Rule을 추가하지 말자! 이때 Class 이름은 최대한 Semantic하게 가져가는 것이 좋다!!

 

3. 최대한 우선순위가 높은 Category Rule을 사용하자!

Style System에서 사용되는 4개의 주요 Category는 아래의 우선순위를 갖는다.

Tag와 Universal 대신 ID 또는 Class Category를 사용하자.

  1. ID Rules
  2. Class Rules
  3. Tag Rules
  4. Universal Rules


 

4. Descendant Selector 사용을 피하자!

Descendant Selector는 CSS에서 가장 비효율적으로 적용되는 Selector이다.

특히 Descendant Selector가 Tag Rule 또는 Universal Rule과 함께 사용되었을 때 최악의 결과를 발생시키기 때문에 함께 사용하는건 반드시 피하자!!

* 성능상의 이슈로 Firefox User Interface CSS에서는 Descendant Selector를 Tag / Universal Category와 함게 사용하는 것을 금지시켰다.

4-1.  Don’t Overqualifying Selectors!

만약 아래와 같이 Selector를 작성하였다면 Browser는 Page내의 모든 a element를 찾은 뒤  .social-nav라는 class를 갖는 조상이 있는지 확인한 뒤 그 조상의 조상 중에 .wrapper를 class로 갖는 div element가 있는지 확인할 것이다. 설명하기도 힘들 정도로 복잡한 과정이다. Page내에 a element가 1000개 이상 존재한다고 생각하면 끔찍한 결과로 이어진다.

 

 

5. Child Selector와 Tag Category Rule을 함께 사용하지 말자!

 

6.  상속(inheritance)을 이용하자!

어떤 속성들이 상속되는지를 알고, 이를 이용하면 Match Time + @를 줄일 수 있다!

list-style-image 속성이 상속된다는 특징을 이용하면 위와 같이 Class Category Rule을 사용하던 Selector를 ID Category Rule을 사용하도록 변경할 수 있다.

‘BAD’에서는 모든 .menu-thumbnail이 #menuItem에 포함되어 있는지 확인해야 했지만 ‘GOOD’에서는 #menuItem만 확인하면 되기 때문에 .menu-thumbnail을 Class로 갖는 Node가 다수일 경우 성능에 이점이 있다.

 

7. 사용하지 않는 CSS Selector를 제거하자!

비교대상을 줄임으로써 Match Time을 줄일 수 있다.

 

{ References }

– https://developer.mozilla.org/en/Writing_Efficient_CSS

– http://css-tricks.com/efficiently-rendering-css/

– https://developers.google.com/speed/docs/best-practices/rendering?hl=ko

http://csswizardry.com/2011/09/writing-efficient-css-selectors/

 

{ Used Term }

– Style System : DOM Node에 Style 정보를 Matching하는 System.
– Key Selector : Last part of the selector (The part that matches the element being matched, rather than its ancestors.)

 

 

2 Comments

  1. selector 우선순위는 jquery 에도 적용하면 좋겠어- 좋은 정보 고맙습니다 🙂

답글 남기기

© 2017 Regular Motion

Theme by Anders NorenUp ↑