[Browser] How browser works (5) - Render tree construction

HTML을 파싱하고 두 번째 div 태그에 도달했다고 가정합시다. 이 노드를 위한 Style context 를 생성하고 스타일 구조체를 채워야합니다.

이 노드에 맞는 규칙은 1, 2, 6 번 규칙입니다. Rule Tree 를 보면, 사용할 수 있는 경로(B:1, C:2)를 찾을 수 있고 이 경로에 6번 규칙 노드만 추가하면 됩니다. Rule Tree 의 F 노드를 참조하는 Style Context 를 생성하고 Context Tree 추가합니다.

Style Context 를 생성했다면 이제 스타일 구조체를 채워야합니다. 먼저, margin 구조체부터 채울 것 입니다. F 노드부터 Rule Tree 를 따라가면 B 노드에 정의되어 있는 margin 값으로 margin 구조체를 채우게 됩니다.

이제 color 구조체를 채워야합니다. color 값이 정의되어 있으므로, 캐시되어 있는 구조체를 사용할 필요가 없습니다. 대신 최종 값을 계산하고, F 노드에 이 값을 캐싱합니다.

두 번째 span 태그는 훨씬 간단합니다. 맞는 규칙을 찾으면, 전에 나오는 span 태그와 동일하게 Rule Tree 의 G 노드를 참조하고 있음을 알 수 있습니다. 같은 노드를 참조하는 형제 element 가 있으므로, Style Context 를 공유합니다.

부모로부터 상속받는 규칙을 저장하는 구조체는 Context Tree 에서 캐싱합니다. (color 는 상속되지만, Firefox 에서는Reset 으로 간주하고, Rule Tree 에서 캐싱합니다.)

p 태그에 아래의 룰이 추가되었습니다.

p {font-family: Verdana; font size: 10px; font-weight: bold}

만약 font 에 관한 규칙이 정의되지 않았다면 p 는 부모 노드와 font 구조체를 공유할 것입니다.

Webkit에서 Rule Tree 가 없다면, 일치하는 규칙을 4번 순회하게 됩니다. 먼저, display 속성과 같이 다른 속성에 영향을 주는 속성(non-important high priority properties)을 적용합니다. 이후로, high priority important, normal priority non-important, normal priority important 순서대로 적용합니다. 여려 번 등장하는 속성의 경우, 위의 순서에 따라 마지막에 등장하는 값이 적용됩니다.

스타일 객체를 공유하여, 위에서 언급했던 1번과 3번 이슈를 해결합니다. Firefox의 Rule Tree 는 속성을 정확한 순서대로 적용하는 것을 수월하게 합니다.

Manipulating the rules for an easy match

스타일을 적용하는 여러가지 방법이 있습니다.

• style 태그 내부 혹은 외부 css 파일에서 정의합니다.

p { color: blue }

• 인라인으로 정의합니다.

<p style="color: blue" />

• HTML visuaul attribute 를 사용해서 정의합니다.

<p bgcolor="blue" />

아래 두 개의 방법은 자신만의 스타일 객체를 가지거나, HTML 속성을 이용하기 때문에 element 에 더욱 쉽게 적용될 수 있습니다.

위에서 언급했듯이, CSS 규칙을 적용하는 것은 까다로운 작업니다. 이를 해결하기 위해 규칙에 쉽게 접근할 수 있도록 해야 합니다.

스타일 시트를 파싱한 후, 규칙은 가장 오른쪽 선택자에 따라 여러 해시맵 중 하나에 추가됩니다. id, className, tagName 를 사용하는 해시맵 그리고 이에 속하지 않는 경우를 위한 해시맵이 있습니다. 이 과정은 규칙을 찾는 일을 훨씬 간단하게 합니다. 모든 규칙을 살펴보지 않고, 해시맵에서 element 와 관련 있는 규칙만을 찾을 수 있기 때문입니다. 이러한 최적화를 통해, 95% 정도의 규칙은 고려하지 않게 됩니다.

아래와 같은 HTML과 css가 있다고 가정합시다.

<p class="error">an error occurred </p>
<div id=" messageDiv">this is a message</div>

p.error { color: red }
#messageDiv { height: 5px }
div { margin: 5px }

첫 번째 규칙은 class 맵에 추가되고, 두 번째 규칙은 id 맵에, 그리고 마지막은 tag 맵에 추가됩니다.
가장 먼저 p 태그에 맞는 규칙을 찾을 것 입니다. class 맵에는 "error"를 키로 하는 규칙이 있습니다. div 는 id 맵과 tag 맵을 통해 규칙을 찾을 수 있습니다. 이제, 해시맵에서 나온 규칙 중에 실제로 일치하는 규칙을 찾으면 됩니다.

예를 들어, div 를 위한 규칙이 아래와 같다고 합시다

table div { margin: 5px }

키가 div 이기 때문에, tag 맵에 있지만, 이 규칙은 table 이 조상이기 때문에, 위의 div 에는 적용되지 않습니다.

Webkit과 Firefox 모두 이 과정을 진행합니다.

Applying the rules in the correct cascade order

스타일 객체는 모든 CSS 규칙을 포함하고 있습니다. 정의되지 않은 속성은, 부모의 스타일 객체로부터 상속받을 수 있고, 그렇지 않은 경우에는 deafult value 로 설정됩니다.

한 번 이상 정의되는 경우에는 '어떤 순서대로 정의해야 하는가' 도 하나의 문제입니다.

Style shhet cascade order

스타일 속성 선언은 여러 스타일 시트에서 여러 번 나타날 수 있습니다. 그렇다면, 규칙을 적용하는 순서도 매우 중요합니다. 이를 cascade order 라고 부르며, CSS 명세에는 아래와 같이 정의하고 있습니다.

1. Browser declarations
2. User normal declarations
3. Author normal declarartions
4. Author important declarations
5. User important declarations

브라우저의 규칙의 중요도가 가장 낮고, 사용자가 important 로 규칙을 표시하면 개발자의 규칙을 덮어 쓸 수 있습니다. 중요도가 같은 규칙의 경우, specificity 에 의해 결정됩니다. HTML visual attribute는 CSS로 변환되고, 개발자가 정의한 것으로 여겨집니다.

Specificity

CSS 명세에 정의된 선택자 specificity 는 아래와 같습니다.

• 선택자 없이 선언된 style 속성은 1, 그렇지 않으면 0 입니다. (=a)
• 선택자의 id 개수 (=b)
• 클래스, 속성 선택자, 가상 클래스 선택자의 개수 (=c)
• 태그, 가상 요소 선택자의 개수 (=d)

위의 4가지 숫자를 순서대로 연결하면 specificity 가 됩니다.

위의 숫자 중 가장 큰 숫자에 의해서 사용할 진법이 결정됩니다. 예를 들어, a=14 이면 16진법을 사용할 수 있습니다. 선택자에 17개의 태그가 있는 특이한 경우에는 17진법을 사용할 수도 있습니다.

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

Sorting the rules

맞는 규칙을 발견한 후에, 이 규칙은 cascade rule 에 따라 정렬됩니다. Webkit은 규칙이 적을 경우에는 버블 소트를, 많은 경우에는 머지 소트를 사용합니다. Webkit은 ">" 를 오버라이드해서 소팅을 구현했습니다.

static bool operator >(CSSRuleData& r1, CSSRuleData& r2)
{
    int spec1 = r1.selector()->specificity();
    int spec2 = r2.selector()->specificity();
    return (spec1 == spec2) : r1.position() > r2.position() : spec1 > spec2;
}

Gradual process

Webkit은 @imports 를 포함한 모든 top level 스타일 시트가 로드되었는지 확인하기 위해서 flag 를 사용합니다. Attachment 도중, 스타일이 완전히 로드되지 않았다면, 마킹된 상태의 placeholder 를 사용하고, 스타일이 완전히 로드되면 다시 한 번 계산합니다.

참고 자료
How Browsers Work: Behind the scenes of modern web browsers
브라우저는 어떻게 동작하는가?