Post

[Study - Internet] 브라우저와 작동 원리

Posted Updated
By Yn3 92 min read

브라우저

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.

자원은 보통 HTML 문서지만, PDF나 이미지 또는 다른 형태일 수 있다.

자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데, 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다.

브라우저의 기본 구조

브라우저의 주요 구성 요소브라우저의 주요 구성 요소

  • 브라우저의 주요 구성 요소

    1. 사용자 인터페이스

      주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

    2. 브라우저 엔진

      사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

    3. 렌더링 엔진

      요청한 콘텐츠를 표시

      Ex) HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시

    4. 통신

      HTTP 요청과 같은 네트워크 호출에 사용되며, 플랫폼 독립적인 인터페이스이고, 각 플랫폼 하부에서 실행됨

    5. UI 백엔드

      콤보 박스와 창 같은 기본적인 장치를 그리며, 플랫폼에서 명시하지 않은 일반적인 인터페이스로써 OS 사용자 인터페이스 체계를 사용

    6. 자바스크립트 해석기

      자바스크립트 코드를 해석하고 실행

    7. 자료 저장소

      자료를 저장하는 계층으로, 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있으며, HTML5 명세에는 브라우저가 지원하는 ‘웹 데이터 베이스’가 정의되어 있음

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.

렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다.

플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.

렌더링 엔진들

파이어폭스: Gecko 엔진

사파리, 크롬: Webkit 엔진

Gecko 엔진: 모질라에서 직접 만듦

Webkit 엔진: 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진으로, 애플이 맥과 윈도우에서 사파리 브라우저를 지원하기 위해 수정했다.

동작 과정

렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데 문서의 내용은 보통 8KB 단위로 전송된다.

렌더링 엔진의 동작 과정렌더링 엔진의 동작 과정

  1. DOM 트리 구축을 위한 HTML 파싱

    렌더링 엔진은 HTML 문서를 파싱하고 “콘텐츠 트리” 내부에서 태그를 DOM 노드로 변환한다.

    그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다.

    스타일 정보와 HTML 표시 규칙은 “렌더 트리”라고 부르는 또 다른 트리를 생성한다.

  2. 렌더 트리 구축

    렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.

  3. 렌더 트리 배치

    렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다.

  4. 렌더 트리 그리기

    UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 낸다.

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.

즉, 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.

동작 과정 예

  • Webkit 렌더링 엔진 동작 과정

    웹킷 동작 과정

  • Gecko 렌더링 엔진 동작 과정

    모질라의 게코 렌더링 엔진 동작 과정(

Webkit과 Gecko의 용어는 조금 다르지만, 동작 과정은 기본적으로 동일하다.

파싱과 DOM 트리 구축

파싱은 렌더링 엔진에서 매우 중요한 과정이다.

파싱 일반

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.

파싱 결과는 보통 문서 구조를 나타내는 노드 트리이며, 파싱 트리(parsing tree) 또는 문법 트리(syntax tree)라고도 부른다.

  • Ex) 2+3-1과 같은 표현식에 대한 트리

    수학 표현식을 파싱한 트리 노드수학 표현식을 파싱한 트리 노드

문법

파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 한다. 이것을 문맥 자유 문법이라고 한다.

파서-어휘 분석기 조합

파싱은 어휘 분석과 구문 분석이라는 두 가지로 구분할 수 있다.

  • 어휘 분석

    자료를 토큰으로 분해하는 과정이다.

    토큰은 유효하게 구성된 단위의 집합체로 용어집이라고도 할 수 있는데, 인간의 언어로 말하면 사전에 등장하는 모든 단어에 해당된다.

  • 구문 분석

    언어의 구문 규칙을 적용하는 과정이다.

파서는 보통 두 가지 일을 하는데 자료를 유효한 토큰으로 분해하는 어휘 분석기(토큰 변환기)가 있고, 언어 구문 규칙에 따라 문서 구조를 분석함으로써 파싱 트리를 생성하는 파서가 있다.

파서: 파싱을 하는 프로세서

어휘 분석기는 공백과 줄 바꿈 같은 의미 없는 문자를 제거한다.

  • 문서 소스로부터 파싱 트리를 만드는 과정

    문서 소스로부터 파싱 트리를 만드는 과정

    파싱 과정은 반복된다. 파서는 보통 어휘 분석기로부터 새 토큰을 받아서 구문 규칙과 일치하는지 확인한다. 규칙에 맞으면 토큰에 해당하는 노드가 파싱 트리에 추가되고, 파서는 또 다른 토큰을 요청한다.

    규칙에 맞지 않으면 파서는 토큰을 내부적으로 저장하고 토큰과 일치하는 규칙이 발견될 때까지 요청한다. 맞는 규칙이 없는 경우 예외로 처리하는데 이것은 문서가 유효하지 않고 구문 오류를 포함하고 있다는 의미이다.

변환

파서 트리는 최종 결과물이 아니다. 파싱은 보통 문서를 다른 양식으로 변환하는데 컴파일이 하나의 예가 된다. 소스 코드를 기계 코드로 만드는 컴파일러는 파싱 트리 생성 후 이를 기계 코드 문서로 변환한다.

  • 컴파일 과정

    컴파일 과정

파서의 종류

파서는 기본적으로 하향식 파서와 상향식 파서가 있다.

하향식 파서는 구문의 상위 구조로부터 일치하는 부분을 찾기 시작하지만, 상향식 파서는 낮은 수준에서 점차 높은 수준으로 찾는다.

  • 파서가 파싱하는 예

    • 하향식 파서

      2+3과 같은 표현식에 해당하는 높은 수준의 규칙을 먼저 찾는다. 그 다음 표현식으로 2+3-1을 찾는다.

      이렇듯 표현식을 찾는 과정은 일치하는 다른 규칙을 점진적으로 더 찾아내는 방식이며, 가장 높은 수준의 규칙을 먼저 찾는 것으로부터 시작한다.

    • 상향식 파서

      입력 값이 규칙에 맞을 때까지 찾아서 맞는 입력 값을 규칙으로 바꾸며, 입력 값의 끝까지 진행된다.

      이 과정에서 부분적으로 일치하는 표현식은 파서 스택에 쌓인다.

      스택입력값
      항2+3-1
      항 연산자+3-1
      표현식3-1
      표현식 연산자-1
      표현식1

      상향식 파서는 입력 값의 오른쪽으로 이동하면서 구문 규칙으로 갈수록 남는 것이 점차 감소하기 때문에 이동-감소 파서라고도 부른다.

파서 자동 생성

파서를 생성해 줄 수 있는 도구를 파서 생성기라고 한다.

언어에 어휘나 구문 규칙 같은 문법을 부여하면 동작하는 파서를 만들어 준다.

파서를 생성하는 것은 파싱에 대한 깊은 이해를 필요로 하고, 수동으로 파서를 최적화하여 생성하는 것은 쉬운 일이 아니기 때문에 파서 생성기는 매우 유용하다.

Webkit은 잘 알려진 두 개의 파서 생성기인 어휘 생성을 위한 Flex와 파서 생성을 위한 Bison을 사용한다.

Flex: 토큰의 정규 표현식 정의를 포함하는 파일을 입력 받는다.
Bison: BNF 형식의 언어 구문 규칙을 입력 받는다.

HTML 파서

HTML 파서는 HTML 마크업을 파싱 트리로 변환한다.

HTML 문법 정의

HTML의 어휘와 문법은 W3C에 의해 명세로 정의되어 있다.

문맥 자유 문법이 아니다.

문법은 BNF와 같은 형식을 이용하여 공식적으로 정의할 수 있다.

모든 전통적인 파서는 HTML에 적용할 수 없지만, 파싱은 CSS와 자바스크립트를 파싱하는 데 사용된다.

HTML은 파서가 요구하는 문맥 자유 문법에 의해 쉽게 정의할 수 있다.

HTML과 XML은 유사하지만, HTML은 암묵적으로 태그에 대한 생략이 가능하여 시작 또는 종료 태그 등을 생략할 수 있는 반면, XML은 시작과 종료 태그를 생략할 수 없으므로 XML에 비해 HTML은 “유연한” 문법이다.

HTML은 파싱하기 어렵고 전통적인 구문 분석이 불가능하기 때문에 문맥 자유 문법은 아니다.

HTML DTD

HTML의 정의는 DTD 형식 안에 있는데 SGML 계열 언어의 정의를 이용한 것이다. 이 형식은 허용되는 모든 요소와 그들의 속성 그리고 중첩 구조에 대한 정의를 포함한다. (HTML DTD는 문맥 자유 문법이 아니다.)

DTD는 여러 변종이 있다. 엄격한 형식은 명세만을 따르지만 다른 형식은 낡은 브라우저에서 사용된 마크업을 지원한다. 낡은 마크업을 지원하는 이유는 오래된 콘테츠에 대한 하위 호환성 때문이다.

DOM (Document Object Model)

“파싱 트리”는 DOM 요소와 속성 노드의 트리로서 출력 트리가 된다. 이것은 HTML 문서의 객체 표현이고 외부를 향하는 자바스크립트와 같은 HTML 요소의 연결 지점이다. (트리의 최상위 객체는 문서이다.)

DOM은 마크업과 1:1의 관계를 맺는데 아래의 마크업을

1
2
3
4
5
6

<html>
    <body>
        <p>Hello World</p>
        <div><img src="example.png" /></div>
    </body>
</html>

아래와 같은 DOM 트리로 변환할 수 있다.

예제 마크업의 DOM 트리예제 마크업의 DOM 트리

HTML과 마찬가지로 DOM은 W3C에 의해 명세가 정해져 있다. 이것은 문서를 다루기 위한 일반적인 명세인데 부분적으로 HTML 요소를 설명하기도 한다.

트리가 DOM 노드를 포함한다고 말하는 것은 DOM 접점의 하나를 실행하는 요소를 구성한다는 의미이다. 이처럼 브라우저는 내부의 다른 속성들을 이용하여 이를 구체적으로 실행한다.

파싱 알고리즘

HTML은 일반적인 하향식 또는 상향식 파서로 파싱이 안되는 이유는 아래와 같다.

  1. 언어의 너그러운 속성
  2. 잘 알려져 있는 HTML 오류에 대한 브라우저의 관용

  3. 변경에 의한 재파싱

    일반적으로 소스는 파싱하는 동안 변하지 않지만 HTML에서 document.write를 포함하고 있는 스크립트 태그는 토큰을 추가할 수 있기 때문에 실제로는 입력 과정에서 파싱이 수정된다.

이렇듯, 일반적인 파싱 기술을 사용할 수 없기 때문에 브라우저는 HTML 파싱을 위해 별도의 파서를 생성한다.

HTML 파싱 과정HTML 파싱 과정

알고리즘은 토큰화와 트리 구축 두 단계로 되어 있다.

  • 토큰화

    어휘 분석으로써 입력값을 토큰으로 파싱한다.

    HTML에서 토큰은 시작 태그, 종료 태그, 속성 이름과 속성값이다.

    토큰을 인지해서 트리 생성자로 넘기고 다음 토큰을 확인하기 위해 다음 문자를 확인하며, 입력의 마지막까지 이 과정을 반복한다.

토큰화 알고리즘

알고리즘의 결과물은 HTML 토큰이다.

알고리즘은 State Machine이라고 볼 수 있는데, 각 상태는 하나 이상의 연속된 문자를 입력 받아 이 문자에 따라 다음 상태를 갱신한다. 그러나 결과는 현재의 토큰화 상태와 트리 구축 상태의 영향을 받는다.

이 결과는 같은 문자를 읽어 들여도 현재 상태에 따라 다음 상태의 결과가 다르게 나온다는 것을 의미한다.

HTML 토큰화 설명

입력 예제의 토큰화입력 예제의 토큰화

1
2
3
4
5

<html>
    <body>
        Hello World
    </body>
</html>

초기 상태는 “자료 상태”이다.

‘<’ 문자를 만나면 상태는 “태그 열림 상태”로 변한다. 그 이후 a 부터 z 까지의 문자를 만나면 “시작 태그 토큰”을 생성하고 상태는 “태그 이름 상태”로 변하는데, 이 상태는 ‘>’ 문자를 만날 때까지 유지한다.

각 문자에는 새로운 토큰 이름이 붙는데 이 경우 생성된 토큰은 html 토큰이다.

‘>’문자에 도달하면 현재 토큰이 발행되고 상태는 다시 “자료 상태”로 바뀐다.

‘Hello World’의 ‘H’ 문자를 만나면 문자 토큰이 생성되고 발행된다. 이것은 종료 태그의 ‘<’ 문자를 만날 때까지 진행된다. (’Hello World’의 각 문자를 위한 문자 토큰이 발행된다.)

‘/’ 문자는 종료 태그 토큰을 생성하고 “태그 이름 상태”로 변경 될 것이다. 이 상태는 ‘>’ 문자를 만날 때까지 유지된다.

트리 구축 알고리즘

파서가 생성되면 문서 객체가 생성된다.

트리 구축이 진행되는 동안 문서 최상단에서는 DOM 트리가 수정되고 요소가 추가된다.

토큰화에 의해 발행된 각 노드는 트리 생성자에 의해 처리된다.

DOM 트리에 요소를 추가하는 것이 아니라면 열린 요소는 스택(임시 버퍼 저장소)에 추가된다. 이 스택은 부정확한 중첩과 종료되지 않은 태그를 교정한다.

알고리즘은 상태 기계라고 설명할 수 있고, 상태는 “삽입 모드”라고 부른다.

트리 생성 과정

예제 html 트리 구축예제 html 트리 구축

1
2
3
4
5

<html>
    <body>
        Hello World
    </body>
</html>

  1. 시작

    트리 구축 단계의 입력값은 토큰화 단계에서 만들어지는 일련의 토큰이다.

  2. HTML 이전

    받은 html 토큰은 “html 이전” 모드가 되고, 토큰은 이 모드에서 처리된다. 이것은 HTMLHtmlElement 요소를 생성하고 문서 객체의 최상단에 추가된다.

  3. head 이전

    상태는 “head 이전” 모드로 바뀌었고 “body” 토큰을 받는다. (”head” 토큰이 없더라도 HTMLHeadElement는 묵시적으로 생성되어 추가될 것이다.)

  4. head 내부

    “head 안쪽” 모드가 된다.

  5. head 다음

    body 토큰이 처리되었고 HTMLBodyElement가 생성되어 추가된다.

  6. body 내부

    “body 안쪽” 모드가 된다.

    “Hello World” 문자열의 문자 토큰을 받으면 첫 번째 토큰이 생성되고 “본문” 노드가 추가되면서 다른 문자들이 그 노드에 추가된다.

  7. body 다음

    body 종료 토큰을 받으면 “body 다음” 모드가 된다.

  8. body 다음 다음

    html 종료 태그를 만나면 “body 다음 다음” 모드로 바뀐다.

  9. 끝

    마지막 파일 토큰을 받으면 파싱을 종료한다.

파싱이 끝난 이후의 동작

브라우저는 문서와 상호작용할 수 있게 되고, 문서 파싱이 이후에 실행되어야 하는 “지연” 모드 스크립트를 파싱하기 시작한다.

문서 상태는 “완료”가 되고 “로드” 이벤트가 발생한다.

브라우저의 오류 처리

HTML 페이지에서 브라우저가 모든 오류 구문을 교정하기 때문에 “유효하지 않은 구문”이라는 오류를 보기 힘들다.

1
2
3
4
5
6
7
8

<html>
    <mytag></mytag>
    <div>
        <p>
    </div>
    Really lousy HTML
    </p>
</html>

위의 코드는 여러 가지 규칙을 위반한 코드이다.

“mytag”는 표준 태그가 아니고 “p” 태그와 “div” 태그는 중첩 오류가 있다. 그러나 브라우저는 올바르게 표시하는데 이는 파서가 HTML 제작자의 실수를 수정하기 때문이다.

이런 오류 처리는 브라우저에서 꽤나 일반적임에도 불구하고 HTML의 현재 명세가 아니다.

파서는 토큰화된 입력값을 파싱하여 문서를 만들고 문서 트리를 생성한다.

규칙에 맞게 잘 작성된 문서라면 파싱이 수월하겠지만, 형식에 맞지 않게 작성된 많은 HTML 문서를 다뤄야 하기 때문에 파서는 오류에 대해 잘 알고 있어야 한다.

  • 파서가 처리해야 하는 최소한의 오류
    1. 어떤 태그의 안쪽에 추가하려는 태그가 금지된 것일 때 일단 허용된 태그를 먼저 닫고 금지된 태그는 외부에 추가한다.
    2. 파서가 직접 요소를 추가해서는 안된다. 문서 제작자에 의해 뒤늦게 요소가 추가될 수 있고 생략 가능한 경우도 있다. (HTML, HEAD, BODY, TBODY, TR, TD, LI 태그인 경우)
    3. 인라인 요소 안쪽에 블록 요소가 있는 경우 부모 블록 요소를 만날 때까지 모든 인라인 태그를 닫는다.
    4. 위의 방법들이 도움이 되지 않으면 태그를 추가하거나 무시할 수 있는 상태가 될 때까지 요소를 닫는다.
  • Webkit이 오류를 처리하는 예

    • ‘br’태그 대신 ‘/br’태그

      어떤 사이트는 ‘br’ 대신 ‘/br’을 사용하는데 Webkit은 익스플로러, 파이어폭스와 호환성을 갖기 위해 ‘br’로 간주한다.

      • 처리되는 코드

        1
2
3
4

          if(t->isCloseTag(brTag) && m_document->inCompatMode()) {  
      reportError(MalformedBRError);
      t->beginTag = true;
  }

        오류는 내부적으로 처리하고, 사용자에게는 표시하지 않는다.

    • 어긋난 표

      표 안에 또 다른 표가 <th> 또는 <td> 셀 내부에 있지 않은 것을 의미한다.

      1
2
3
4
5
6
7

        <table>
      <table>
          <tr><td>inner table</td></tr>
      </table>
        
      <tr><td>outer table</td></tr>
  </table>

      이런 경우 Webkit은 표의 중첩을 분해하여 형제 요소가 되도록 처리한다.

      1
2
3
4
5
6
7

        <table>
      <tr><td>outer table</td></tr>
  </table>
        
  <table>
      <tr><td>inner table</td></tr>
  </table>

      • 처리되는 코드

        1
2
3

          if(m_inStrayTableContent && localName == tableTag) {
      popBlock(tableTag);
  }

        Webkit은 이런 오류를 처리하는데 스택을 사용한다.

        안쪽의 표는 바깥쪽 표의 외부로 옮겨져서 형제 요소가 된다.

    • 중첩된 폼 요소

      폼 안에 또 다른 폼을 넣은 경우 안쪽의 폼은 무시된다.

      • 처리되는 코드

        1
2
3

          if(!m_currentFormElement) {  
      m_currentFormElement = new HTMLFormElement(formTag, m_document);
  }

    • 잘못 닫힌 html 또는 body 태그

      깨진 html을 지원한다. 어떤 페이지는 문서가 끝나기 전에 body를 닫아버리기 때문에 브라우저는 body 태그를 닫지 않는다. 대신 종료를 위해 end()를 호출한다.

      • 처리되는 코드

        1
2

          if (t->tagName == htmlTag || t->tagName == bodyTag )  
      return;

CSS 파싱

CSS는 HTML과는 다르게 문맥 자유 문법이고, 파서 유형을 이용하여 파싱이 가능하다.

Webkit CSS 파서

Webkit은 CSS 문법 파일로부터 자동으로 파서를 생성하기 위해 플렉스와 바이슨 파서 생성기를 사용한다. (바이슨은 상향식 이동 감소 파서를 생성한다.)

파이어폭스는 직접 작성한 하향식 파서를 사용한다.

플렉스와 바이슨 파서 생성기 모두 각 CSS 파일은 스타일 시트 객체로 파싱되고, 각 객체는 CSS 규칙을 포함한다.

CSS 규칙 객체는 선택자와 선언 객체, CSS 문법과 일치하는 다른 객체를 포함한다.

CSS 파싱CSS 파싱

스크립트와 스타일 시트의 진행 순서

스크립트

웹은 파싱과 실행이 동시에 수행되는 동기화(Synchronous) 모델이다.

개발자는 파서가 ‘script’ 태그를 만나면 즉시 파싱하고 실행하기를 원하지만, 스크립트가 실행되는 동안 문서의 파싱은 중단된다. 또한, 스크립트가 외부에 있는 경우 우선 네트워크로부터 자원을 가져와야 하는데 이 또한 실시간으로 처리되고 자원을 받을 때까지 파싱은 중단된다.

개발자는 스크립트를 “지연(defer)”으로 표시할 수 있는데 지연으로 표시하게 되면 문서 파싱은 중단되지 않고 문서 파싱이 완료된 이후에 스크립트가 실행된다.

HTML5는 스크립트를 비동기(Asynchronous)로 처리하는 속성을 추가했기 때문에 별도의 맥락에 의해 파싱되고 실행된다.

예측 파싱

Webkit과 파이어폭스는 예측 파싱과 같은 최적화를 지원한다.

스크립트를 실행하는 동안 다른 스레드는 네트워크로부터 다른 자원을 찾아 내려받고 문서의 나머지 부분을 파싱한다. 이런 방법은 자원을 병렬로 연결하여 받을 수 있고 전체적인 속도를 개선한다.

예측 파서는 DOM 트리를 수정하지 않고 메인 파서의 일로 넘기며, 외부 스크립트 외부 스타일 시트, 외부 이미지와 같이 참조된 외부 자원을 파싱한다.

스타일 시트

이론적으로 스타일 시트는 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단할 이유가 없다. 그러나 스크립트가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우라면 문제가 된다.

스타일이 파싱되지 않은 상태라면 스크립트는 잘못된 결과를 내놓기 때문에 많은 문제를 야기한다.

파이어폭스는 아직 로드 중이거나 파싱 중인 스타일 시트가 있는 경우 모든스크립트의 실행을 중단한다.

Webkit은 로드되지 않은 스타일 시트 가운데 문제가 될만한 속성이 있을 때에만 스크립트를 중단한다.

렌더 트리 구축

DOM 트리가 구축되는 동안 브라우저는 표시해야 할 순서와 문서의 시각적인 구성 요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위한 목적으로 렌더 트리를 구축한다.

파이어폭스는 이 구성 요소를 “형상(frame)”이라고 부르고, Webkit은 “렌더러(renderer)” 또는 “렌더 객체(render object)”라는 용어를 사용한다.

렌더러는 자신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있다.

각 렌더러는 CSS2 명세에 따라 노드의 CSS 박스에 부합하는 사각형을 표시하고, 너비, 높이, 위치와 같은 기하하적 정보를 포함한다.

요소가 Form Control과 표처럼 특별한 구조의 렌더러를 만들어야 한다면 Webkit은 creatRenderer 메서드를 무시하고 비기하학 정보를 포함하는 스타일 객체를 표시한다.

DOM 트리와 렌더 트리의 관계

렌더 트리와 DOM 트리 대응렌더 트리와 DOM 트리 대응

“뷰포트”는 최초의 블록이다.
Webkit에서는 “RenderView” 객체가 이 역할을 한다.

렌더러는 DOM 요소와 부합하지만 1:1로 대응하는 관계는 아니다.

예를 들어, “head” 요소와 같은 비시각적 DOM 요소는 렌더 트리에 추가되지 않는다. 또한, display 속성에 “none” 값이 할당된 요소는 트리에 나타나지 않는다. (visibility 속성에 “hidden” 값이 할당된 요소는 트리에 나타난다.)

여러 개의 시각 객체와 대응하는 DOM 요소도 있는데 이것들은 보통 하나의 사각형으로는 묘사할 수 없는 복잡한 구조다.

예를 들면, “select” 요소는 ‘표시 영역, 드롭다운 목록, 버튼’ 표시를 위한 3개의 렌더러가 있다. 또한, 한 줄에 충분히 표시할 수 없는 문자가 여러 줄로 바뀔 때 새 줄은 별도의 렌더러로 추가된다.

여러 렌더러와 대응하는 또 다른 예는 깨진 HTML이다. CSS 명세에 의하면 인라인 박스는 블록 박스만 포함하거나 인라인 박스만을 포함해야 하는데 인라인과 블록 박스가 섞인 경우 인라인 박스를 감싸기 위한 익명의 블록 렌더러가 생성된다.

어떤 렌더 객체는 DOM 노드에 대응하지만 트리의 동일한 위치에 있지 않다. float 처리된 요소 또는 position 속성값이 absolute로 처리된 요소는 흐름에서 벗어나 트리의 다른 곳에 배치된 상태로 형상이 그려진다. 대신 자리 표시자가 원래 있어야 할 곳에 배치된다.

트리를 구축하는 과정

파이어폭스에서 프레젠테이션은 DOM 업데이트를 위한 리스너로 등록된다.

프레젠테이션은 형상 만들기를 FrameConstructor에 위임하고, FrameConstructor는 스타일을 결정하고 형상을 만든다.

Webkit에서는 스타일을 결정하고 렌더러를 만드는 과정을 “attachment”라고 부른다. (모든 DOM 노드에는 “attach” 메서드가 있다. )

attachment는 동기적인데 DOM 트리에 노드를 추가하면 새 노드의 “attach” 메서드를 호출한다.

html 태그와 body 태그를 처리함으로써 렌더 트리 루트를 구성한다. 루트 렌더 객체는 CSS 명세에서 포함 블록(다른 모든 블록을 포함하는 최상위 블록)이라 부르는 것과 일치한다.

파이어폭스는 ViewPortFrame, 웹킷은 RenderView라고 부른다. 이것이 문서가 가리키는 렌더 객체이고, 트리의 나머지 부분은 DOM 노드를 추가함으로써 구축된다.

스타일 계산

렌더 트리를 구축하려면 각 렌더 객체의 시각적 속성에 대한 계산이 필요한데 이것은 각 요소의 스타일 속성을 계산함으로써 처리된다.

스타일은 인라인 스타일 요소와 HTML의 시각적 속성과 같은 다양한 형태의 스타일 시트를 포함하는데 HTML의 시각적 속성들은 대응하는 CSS 스타일 속성으로 변환된다.

최초의 스타일 시트는 브라우저가 제공하는 기본 스타일 시트인데 페이지 제작자 또는 사용자도 이를 제공할 수 있다. 브라우저는 사용자가 선호하는 스타일을 정의할 수 있도록 지원하는데 파이어폭스의 경우 “파이어폭스 프로필” 폴더에 있는 스타일 시트를 변경함으로써 사용자 선호 스타일을 정의할 수 있다.

스타일 계산의 어려움

  1. 스타일 데이터는 구성이 매우 광범위한데 수 많은 스타일 속성들을 수용하면서 메모리 문제를 야기할 수 있다.

  2. 최적화되어 있지 않다면 각 요소에 할당된 규칙을 찾는 것은 성능 문제를 야기할 수 있다. 각 요소에 할당된 규칙 목록을 전체 규칙으로부터 찾아내는 것은 어렵다. 맞는 규칙을 찾는 과정은 얼핏 보기에는 약속된 방식으로 순탄하게 시작하는 것 같지만 실상 쓸모가 없거나 다른 길을 찾아야만 하는 복잡한 구조가 될 수 있다.

    예를 들어 ‘div div div div { … } ‘ 같은 복합 선택자가 있다. 이 선택자는 3번째 자손 <div>에 규칙을 적용한다는 뜻이다. 규칙을 적용할 ‘<div>’ 요소를 확인하려면 트리로부터 임의의 줄기를 선택하고 탐색하는 과정에서 규칙에 맞지 않는 줄기를 선택했다면 또 다른 줄기를 선택해야 한다.

  3. 규칙을 적용하는 것은 계층 구조를 파악해야 하는 꽤 복잡한 다단계 규칙을 수반한다.

스타일 정보 공유

웹킷 노드는 스타일 객체(RenderStyle)를 참조하는데 이 객체는 일정 조건 아래 공유할 수 있다. 노드가 형제이거나 사촌일 때 공유하며 아래와 같은 조건일 때 공유할 수 있다.

  1. 동일한 마우스 반응 상태를 가진 요소여야 한다. 예를 들어, 한 요소가 :hover 상태가 될 수 없는데 다른 요소는 :hover 상태가 될 수 있다면 동일한 마우스 상태가 아니다.
  2. 요소에 아이디가 없어야 한다.
  3. 태그 이름이 일치해야 한다
  4. 클래스 속성이 일치해야 한다.
  5. 지정된 속성이 일치해야 한다.
  6. link 상태가 일치해야 한다.
  7. focus 상태가 일치해야 한다.
  8. 문서 전체에서 속성 선택자의 영향을 받는 요소가 없어야 한다.
  9. 요소에 인라인 스타일 속성이 없어야 한다. (인라인 스타일: <p style=””></p>)
  10. 문서 전체에서 형제 선택자를 사용하지 않아야 한다. 웹 코어는 형제 선택자를 만나면 전역 스위치를 열고 전체 문서의 스타일 공유를 중단한다. 형제 선택자는 + 선택자와 :first-child, :last-child를 포함한다.

파이어폭스 규칙 트리

파이어폭스는 스타일 계산을 쉽게 처리하기 위해 규칙 트리와 스타일 문맥 트리라고 하는 두 개의 트리를 더 가지고 있다. Webkit도 스타일 객체를 가지고 있지만 스타일 문맥 트리처럼 저장되지 않고 오직 DOM 노드로 관련 스타일을 처리한다.

파이어폭스 스타일 문맥 트리파이어폭스 스타일 문맥 트리

스타일 문맥에는 최종 값이 저장되어 있다. 값은 올바른 순서 안에서 부합하는 규칙을 적용하고 논리로부터 구체적인 값으로 변환함으로써 계산된다.

예를 들어 논리적인 값이 화면의 백분율(%)이라면 이 값은 계산에 의해 절대적인 단위(px)로 변환된다. 이런 규칙 트리는 노드 사이에서 이 값을 공유함으로써 그것들을 다시 계산하는 일을 방지하기 때문에 현명한 아이디어이다.

부합하는 모든 규칙은 트리에 저장하는데 경로의 하위 노드가 높은 우선순위를 갖는다. 규칙 저장은 느리게 처리된다. 트리는 처음부터 모든 노드를 계산하지 않지만 노드 스타일이 계산될 필요가 있을 때 계산된 경로를 트리에 추가한다.

트리 경로를 단어라고 생각하고 이미 규칙 트리를 계산했다고 가정하면

규칙 트리 가정

컨텐츠 트리에서 또 다른 요소에 부합하는 규칙이 필요하다고 가정하고 부합하는 규칙이 순서에 따라 B-E-I 라고 하면, 브라우저는 이미 A-B-E-I-L 경로를 계산했기 때문에 트리 안에 이 경로가 있어서 할 일이 줄어든다.

트리가 작업량을 줄이는 방법

  • 구조체로 분리

    스타일 문맥은 구조체로 나뉘는데 선 또는 색상과 같은 종류의 스타일 정보를 포함한다. 구조체의 속성들은 상속되거나 상속되지 않는다. 속성들은 요소에 따라 정해져 있지 않은 한 부모로부터 상속된다. 상속되지 않는 속성들은 “reset” 속성이라 부르는데, 상속을 받지 않는 것으로 정해져 있다면 기본 값을 사용한다.

    트리는 최종으로 계산된 값을 포함하여 전체 구조체를 저장하는 방법으로 도움을 준다. 하위 노드에 구조체를 위한 속성 선언이 없다면 저장된 상위 노드의 구조체 속성을 그대로 받아서 사용하는 것이다.

  • 규칙 트리를 사용하여 스타일 문맥을 계산

    어떤 요소의 스타일 문맥을 계산할 때 가장 먼저 규칙 트리의 경로를 계산하거나 이미 존재하는 경로를 사용한다. 그 다음 새로운 스타일 문맥으로 채우기 위해 경로 안에서 규칙을 적용한다. 가장 높은 우선순위를 가진 경로의 하위 노드에서 시작하여 구조체가 가득 찰 때까지 트리의 상단으로 거슬러 올라간다. 규칙 노드 안에서 구조체를 위한 특별한 선언이 없다면 상당한 최적화를 할 수 있다. 선언이 가득 채워질 때까지 노드 트리의 상위로 찾아 올라가서 간단하게 적용하면 최상의 최적화가 되고 모든 구조체는 공유된다. 이것은 최종 값과 메모리 계산을 절약한다.

    선언이 완전하지 않으면 구조체가 채워질 때까지 트리의 상단으로 거슬러 올라간다.

    구조체에서 어떤 선언도 발견할 수 없는 경우 구조체는 “상속(inherit)” 타입인데 문맥 트리에서 부모 구조체를 향하면서 성공적으로 구조체를 공유한다. 재설정 구조체라면 기본 값들이 사용될 것이다.

    가장 구체적인 노드에 값을 추가하면 실제 값으로 변환하기 위해 약간의 추가적인 계산을 할 필요가 있는데 트리 노드에서 결과를 저장하기 때문에 자식에게도 사용할 수 있다.

    같은 트리 노드를 가리키는 형제 요소가 있는 경우 전체 스타일 문맥이 이들 사이에서 공유된다.

1
2
3
4
5
6
7

<div class="err" id="div1">  
    <p>
        this is a <span class="big"> big error </span>
        this is also a <span class="big"> very big error</span> error
    </p>
</div>  
<div class="err" id="div2">another error</div>

위의 HTML을 예로 들어 아래와 같은 규칙이 있다.

  1. div { margin:5px; color:black }
  2. .err { color:red }
  3. .big { margin-top:3px }
  4. div span { margin-bottom:4px }
  5. #div1 { color:blue }
  6. #div2 { color:green }

  • 규칙 트리는 아래처럼 노드 이름과 노드가 가리키는 규칙의 번호로 표시되어 있다.

    규칙 트리규칙 트리

  • 문맥 트리는 아래처럼 노드 이름과 노드가 가리키는 규칙 노드로 표시되어 있다.

    문맥 트리문맥 트리

HTML을 파싱하여 두 번째 <div> 태그인 <div class=”err” id=”div2”>에 이르렀다고 가정한다. 이 노드에 필요한 스타일 문맥을 생성하고 스타일 구조체를 채워야 한다.

두 번째 <div> 규칙에 맞는 것을 찾으면 1, 2, 6이 되는데 이것은 요소가 사용할 수 있는 트리 경로(규칙 트리의 B:1, C:2)가 이미 존재한다는 것을 의미하고 규칙 6(규칙 트리에서 노드 F:6)에 이르는 또 다른 노드를 문맥 트리에 추가하면 된다. 스타일 문맥을 생성하고 문맥 트리에 추가하면 새로운 문맥이 규칙 트리의 F:6 노드를 가리킨다.

스타일 구조체는 여백 구조체를 채우는 것으로부터 시작한다. 마지막 규칙 노드(F:6)가 여백 구조체를 포함하지 않기 때문에 이전 노드에 저장된 구조체를 찾을 때까지 위로 거슬러 올라가서 계산된 값을 사용한다. 여백 규칙이 선언된 최상위 노드의 구조체를 규칙 노드 B:1에서 찾는다.

색상 구조체 정의에는 저장된 구조체를 사용할 수 없다. 색상은 이미 하나의 속성 값을 가지고 있기 때문에 다른 값을 채우기 위해 규칙 트리 상단으로 거슬러 올라갈 필요가 없다. 최종 값을 계산하고 계산된 값(문자열에서 RGB 등으로 변환된)을 이 노드에 저장할 것이다.

두 번째 요소는 보다 수월하게 진행된다. 맞는 규칙을 찾다 보면 이전 span과 같이 규칙 트리의 G:3를 가리킨다는 결론에 이르는데 동일한 노드를 가리키는 형제가 있기 때문에 전체 스타일 문맥을 공유하고 이전 span의 문맥을 취하면 된다.

부모로부터 상속된 규칙을 포함하고 있는 구조체의 저장은 문맥 트리에서 처리된다. 색상 속성은 실제로 상속된다. 그러나 파이어폭스는 재설정으로 처리해서 규칙 트리에 저장한다.

예를 들어 문단 요소에 글꼴을 위한 규칙을 추가하면

1

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

문맥 트리에서 div의 자식인 p 요소는 그 부모의 동일 글꼴 구조체를 공유할 수 있다. p 요소에 지정된 규칙이 없는 경우라도 마찬가지이다.

규칙 트리가 없는 Webkit은 선언이 일치하는 규칙이 4번 탐색된다. 우선 중요하지 않은 상위 속성(display와 같은 속성이 의존하기 때문)이 적용되고, 그 다음 중요한 상위 속성이 적용된다. 그리고 나서 중요하지 않은 일반 속성이 적용되고, 마지막으로 중요한 일반 속성이 적용된다. 이것은 여러 번 나타나는 속성들이 정확한 다단계 순서에 따라 결정된다는 것을 의미하고 가장 마지막 값이 적용된다.

따라서 스타일 객체는 전체 또는 일부를 공유함으로써 스타일 계산의 어려움에서 1번과 3번 문제를 해결한다.

쉬운 선택을 위한 규칙 다루기

  • CSS 규칙을 외부 스타일 시트에서 선언하거나, style 요소에서 선언

    1

      p {color:blue}

  • 인라인 스타일 속성

    1

      <p style="color:blue"></p>

  • HTML의 시각적 속성(CSS 규칙으로 변환됨)

    1

      <p bgcolor="blue"></p>

마지막 두 가지 스타일은 자신이 스타일 속성을 가지고 있거나 HTML 속성을 이용하여 연결할 수 있기 때문에 요소에 쉽게 연결된다.

스타일 계산의 어려움에서 2번 문제에 따라 CSS 규칙을 연결하는 것은 까다로울 수 있는데 이 문제를 해결하려면 쉽게 접근할 수 있도록 규칙을 교묘하게 처리해야 한다.

스타일 시트를 파싱한 후 규칙은 선택자에 따라 여러 해시맵 중 하나에 추가된다. 아이디, 클래스 이름, 태그 이름을 사용한 맵이 있고 이런 분류에 맞지 않는 것을 위한 일반적인 맵이 있다. 선택자가 아이디인 경우 규칙은 아이디 맵에 추가되고 선택자가 클래스인 경우 규칙은 클래스 맵에 추가된다.

이런 처리 작업을 통해 규칙을 찾는 일은 훨씬 쉬워진다. 맵에서 특정 요소와 관련 있는 규칙을 추출할 수 있기 때문에 모든 선언을 찾아 볼 필요가 없다. 이러한 최적화는 찾아야 할 규칙의 95% 이상을 제거하기 때문에 규칙을 찾는 동안 모든 선언을 고려할 필요가 없다.

  • 스타일 규칙 예

    1
2
3

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

첫 번째 규칙은 클래스 맵에 추가된다. 두 번째는 아이디 맵에 추가된다. 세 번째는 태그 맵에 추가된다.

위 스타일과 관련된 HTML 코드는 아래와 같다.

1
2

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

우선 p 요소의 규칙을 찾아보면 클래스 맵은 발견된 “p.error”를 위한 규칙 하부의 “error” 키를 찾았다. div 요소는 아이디 맵(키는 아이디)과 태그 맵에 관련 규칙이 있다. 그러므로 이제 남은 작업은 키를 사용하여 추출한 규칙 중 실제로 일치하는 규칙을 찾는 것이다.

예를 들어 div에 해당하는 아래와 같은 또 다른 규칙이 있다고 가정하면

1

table div {margin:5px}

위 예는 여전히 태그 맵에서 규칙을 추출할 것이다. 가장 우측에 있는 선택자가 키이기 때문이다. 그러나 상위에 table이 없기 때문에 앞서 작성한 div 요소와는 일치하지 않는다.

Webkit과 파이어폭스 모두 이런 방식으로 처리하고 있다.

다단계 순서에 따라 규칙 적용하기

스타일 객체는 모든 CSS 속성을 포함하고 있는데 어떤 규칙과도 일치하지 않는 일부 속성은 부모 요소의 스타일 객체로부터 상속 받는다. 그 외 다른 속성들은 기본 값으로 설정된다.

문제는 하나 이상의 속성이 정의될 때 시작되고, 다단계 순서가 이 문제를 해결하게 된다.

  • 스타일 시트 다단계 순서

    스타일 속성 선언은 여러 스타일 시트에서 나타날 수 있고 하나의 스타일 시트 안에서도 여러 번 나타날 수 있는데 이것은 규칙을 적용하는 순서가 매우 중요하다는 것을 의미하며, “다단계(cascade)” 순서라고 한다.

    CSS2 명세에 다르면 다단계 순서는 아래와 같다.

    1. 브라우저 선언 (browser declarations)
    2. 사용자 일반 선언 (user nomal declarations)
    3. 저작자 일반 선언 (author nomal declarations)
    4. 저작자 중요 선언 (author important declarations)
    5. 사용자 중요 선언 (user important declarations)

    브라우저 선언의 중요도가 가장 낮으며 사용자가 저작자의 선언을 덮어 쓸 수 있는 것은 선언이 중요하다고 표시한 경우 뿐이다. 같은 순서 안에서 동일한 속성 선언은 특정성(specificity)에 의해 정렬되고 이 순서는 곧 특정성이 된다.

    HTML 시각 속성은 CSS 속성 선언으로 변환되고 변환된 속성들은 저작자 일반 선언 규칙으로 간주된다.

  • 특정성
    1. 선택자 없이 ‘style’ 속성이 선언된 것이면 1을 센다. 그렇지 않으면 0을 센다.
    2. 선택자에 포함된 아이디 선택자 개수를 센다.
    3. 선택자에 포함된 속성 선택자(클래스 선택자와 속성 선택자)와 가상 클래스 선택자의 숫자를 센다.
    4. 선택자에 포함된 요소 선택지와 가상 요소 선택자의 숫자를 센다.

    네 개의 연결된 숫자 a-b-c-d (큰 진법의 숫자)를 연결하면 특정성의 값이 된다.

    사용할 진법은 분류 중에 가장 높은 숫자에 의해서 정의된다.

    예를 들어 a=14이며 16진수를 사용할 수 있다. 흔치는 않겠지만 a=17과 같은 경우라면 17진법이 필요할 것이다. 17진법을 사용해야 하는 경우는 html body div div p … (선택자에 17개의 태그를 사용하는 경우로 흔치 않음)과 같이 선택자를 사용하는 경우에 발생할 수 있다.

    1
2
3
4
5
6
7
8
9
10

      *{} /* 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 */

  • 규칙 정렬

    맞는 규칙을 찾으면 다단계 규칙에 따라 정렬된다.

    Webkit은 목록이 적으면 버블 정렬을 사용하고 목록이 많을 때는 병합 정렬을 사용한다. Webkit은 규칙에 “>” 연산자를 덮어쓰는 방식으로 정렬을 실행한다.

    1
2
3
4
5
6

      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;
  }

점진적 처리

Webkit은 @import를 포함한 최상위 수준의 스타일 시트가 로드되었는지 표시하기 위해 플래그를 사용한다. DOM 노드와 시각 정보를 연결하는 과정(attaching)에서 스타일이 완전히 로드되지 않았다면 문서에 자리 표시자를 사용하고 스타일 시트가 로드됐을 때 다시 계산한다.

배치

렌더러가 생성되어 트리에 추가될 때 크기와 위치 정보는 없는데 이런 값을 계산하는 것을 배치 또는 리플로라고 부른다.

HTML은 흐름 기반의 배치 모델을 사용하는데 이것은 보통 단일 경로를 통해 크기와 위치 정보를 계산할 수 있다는 것을 의미한다. 일반적으로 “흐름 속”에서 나중에 등장하는 요소는 앞서 등장한 요소의 위치와 크기에 영향을 미치지 않기 때문에 배치는 왼쪽에서 오른쪽으로 또는 위에서 아래로 흐른다. (단, 표는 크기와 위치를 계산하기 위해 하나 이상의 경로를 필요로 하기 때문에 예외가 된다.)

좌표계는 기준점으로부터 상재적으로 위치를 결정하는데 X축과 Y축 좌표를 사용한다.

배치는 반복되며 HTML 문서의 <html> 요소에 해당하는 최상위 렌더러에서 시작한다. 배치는 프레임 계층의 일부 또는 전부를 통해 반복되고 각 렌더러에 필요한 크기와 위치 정보를 계산한다.

최상위 렌더러의 위치는 0.0이고, 브라우저 창의 보이는 영역에 해당하는 뷰포트 만큼의 면적을 갖는다.

모든 렌더러는 “배치” 또는 “리플로” 메서드를 갖는데 각 렌더러는 배치해야 할 자식의 배치 메서드를 불러온다.

더티 비트 체제

소소한 변경 때문에 전체를 다시 배치하지 않기 위해 브라우저는 “더티 비트” 체제를 사용한다. 렌더러는 다시 배치할 필요가 있는 변경 요소 또는 추가된 것과 그 자식을 “더티”라고 표시한다.

“더티”와 “자식이 더티” 두 가지 플래그가 있다. 자식이 더터하다는 것은 본인은 괜찮지만 자식 가운데 적어도 하나를 다시 배치할 필요가 있다는 의미이다.

전역 배치와 점증 배치

배치는 렌더러 트리 전체에서 일어날 수 있는데 이것을 “전역” 배치라 하고 아래와 같은 경우에 발생한다.

  1. 글꼴 크기 변경과 같이 모든 렌더러에 영향을 주는 전역 스타일 변경
  2. 화면 크기 변경에 의한 결과

배치는 더티 렌더러가 배치되는 경우에만 점증되는데 추가적인 배치가 필요하기 때문에 약간의 손실이 발생할 수 있다.

점증 배치는 렌더러가 더티일 때 비동기적으로 일어난다. 예를 들어 네트워크로부터 추가 내용을 받아서 DOM 트리에 더해진 다음 새로운 렌더러가 렌더 트리에 붙을 때이다.

비동기 배치와 동기 배치

점증 배치는 비동기로 실행된다. 파이어폭스는 점증 배치를 위해 “리플로 명령”을 쌓아 놓고 스케줄러는 이 명령을 한꺼번에 실행한다. 웹킷도 점증 배치를 실행하는 타이머가 있는데 트리를 탐색하여 “더티” 렌더러를 배치한다.

“offsetHeight” 같은 스타일 정보를 요청하는 스크립트는 동기적으로 점증 배치를 실행한다.

전역 배치는 보통 동기적으로 실행된다.

때때로 배치는 스크롤 위치 변화와 같은 일부 속성들 때문에 초기 배치 이후 콜백으로 실행된다.

최적화

배치가 “크기 변경” 또는 렌더러 위치 변화 때문에 실행되는 경우 렌더러의 크기는 다시 계산하지 않고 캐시로부터 가져온다.

어떤 경우는 하위 트리만 수정이 되고 최상위로부터 배치가 시작되지 않는 경우도 있다. 이런 경우는 입력 필드에 텍스트를 입력하는 경우와 같이 변화 범위가 한정적이어서 주변에 영향을 미치지 않을 때 발생한다. 만약 입력 필드 바깥쪽에 텍스트가 입력되는 경우라면 배치는 최상단으로부터 시작될 것이다.

배치 과정

배치는 보통 아래와 같은 형태로 진행된다.

  1. 부모 렌더러가 자신의 너비를 결정
  2. 부모가 자식을 검토
    1. 자식 렌더러를 배치(자식의 x와 y를 설정)
    2. (부모와 자식이 더티하거나 전역 배치 상태 또는 다른 이유로) 필요하다면 자식 배치를 호출하여 자식의 높이를 계산한다.
  3. 부모는 자식의 누적된 높이와 여백, 패딩을 사용하여 자신의 높이를 설정한다. 이 값은 부모 렌더러의 부모가 사용하게 된다.
  4. 더티 비트 플래그를 제거한다.

파이어폭스는 “상태” 객체(nsHTMLReflowState)를 배치(“리플로”를 의미)를 위한 매개 변수로 사용하는데 상태는 부모의 너비를 포함한다.

파이어폭스 배치의 결과는 “매트릭스” 객체(nsHTMLReflowMatrics)인데 높이가 계산된 렌더러를 포함한다.

너비 계산

렌더러의 너비는 포함하는 블록의 너비, 렌더러의 너비와 여백, 테두리를 이용하여 계산된다.

예를 들어 아래 div 요소의 너비를 보면

1

<div style="width:30%"></div>

Webkit은 아래(RenderBox 클래스의 calcWidth 메서드)과 같이 계산할 것이다.

  • 컨테이너의 너비는 컨테이너 availableWidth와 0 사이의 최대값이다. 이 경우 availableWidth는 clidentWidth() - paddingLeft() - paddingRight() 처럼 계산된 contentWidth이다.

    clientWidth와 clientHeight는 객체의 테두리와 스크롤바를 제외한 내부 영역을 의미한다.

  • 요소의 너비는 “width” 스타일 속성의 값이다. 이 컨테이너 너비의 백분율 값은 절대값으로 변환될 것이다.
  • 좌우측 테두리와 패딩 값이 추가된다.

여기까지 “미리 획득한 너비”의 계산이었고, 이제 최소 너비와 최대 너비를 계산해야 한다.

미리 획득한 너비가 최대 너비보다 크면 최대 너비가 사용된다. 미리 획득한 너비가 최소 너비(깨지지 않는 가장 작은 단위)보다 작으면 최소 너비가 사용된다.

배치할 필요가 있지만 너비가 고정된 경우 값은 캐시에 저장된다.

줄 바꿈

렌더러가 배치되는 동안 줄을 바꿀 필요가 있을 때 배치는 중단되고 줄 바꿀 필요가 있음을 부모에게 전달한다. 부모는 추가 렌더러를 생성하고 배치를 호출한다.

그리기

그리기 단계에서는 화면에 내용을 표시하기 위한 렌더 트리가 탐색되고 렌더러의 “paint” 메서드가 호출된다. 그리기는 UI 기반의 구성 요소를 사용한다.

전역과 점증

그리기는 배치와 마찬가지로 전역 또는 점증 방식으로 수행된다. 점증 그리기에서 일부 렌더러는 전체 트리에 영향을 주지 않는 방식으로 변경된다. 변경된 레더러는 화면 위의 사각형을 무효화 하는데 OS는 이것을 “더티 영역”으로 보고 “paint” 이벤트를 발생시킨다. OS는 몇 개의 영역을 하나로 합치는 방법으로 효과적으로 처리한다.

크롬은 렌더러가 별도의 처리 과정이기 때문에 조금 더 복잡하다. 크롬은 OS의 동작을 어느 정도 모방한다. 프레젠테이션은 이런 이벤트를 보고 렌더 최상위로 메시지를 전달한다. 그러면 트리는 적절한 렌더러에 이를 때까지 탐색되고 스스로(보통 자식과 함께) 다시 그려진다.

그리기 순서

CSS2는 그리기 과정의 순서를 정의했다. 이것은 실제로 요소가 stacking contexts에 쌓이는 순서이다.

스택은 뒤에서 앞으로 그려지기 때문에 이 순서는 그리기에 영향을 미치고, 블록 렌더러가 쌓이는 순서는 아래와 같다.

  1. 배경 색
  2. 배경 이미지
  3. 테두리
  4. 자식
  5. 아웃라인

파이어폭스 표시 목록

파이어폭스는 렌더 트리를 검토하고 그려진 사각형을 위한 표시 목록을 구성한다. 목록은 올바른 그리기 순서(배경, 테두리 등)에 따라 사각형을 위한 적절한 렌더러를 포함한다. 이런 방법으로 트리는 여러 번 리페인팅을 실행하는 대신 한 번만 탐색하면서 배경 색, 배경 이미지, 테두리 그리고 나머지 순으로 그려낸다.

파이어폭스는 다른 불투명 요소 뒤에 완전히 가려진 요소는 추가하지 않는 방법으로 최적화를 진행한다.

Webkit 사각형 저장소

리페인팅 전에 Webkit은 기존의 사각형을 비트맵으로 저장하여 새로운 사각형과 비교하고 차이가 있는 부분만 다시 그린다.

동적 변경

브라우저는 변경에 대해 가능한 한 최소한의 동작으로 반응하려고 노력한다. 따라서 요소의 색깔이 바뀌면 해당 요소의 리페인팅만 발생한다. 요소의 위치가 바뀌면 요소와 자식, 형제의 리페인팅과 재배치가 발생한다. DOM 노드를 추가하면 노드의 리페인팅과 재배치가 발생한다.

“html” 요소의 글꼴 크기를 변경하는 것과 같은 큰 변경은 캐시를 무효화하고 트리 전체의 배치와 리페인팅이 발생한다.

렌더링 엔진의 스레드

렌더링 엔진은 통신을 제외한 거의 모든 경우에 단일 스레드로 동작한다.

파이어폭스와 사파리의 경우 렌더링 엔진의 스레드는 브라우저의 주요한 스레드에 해당한다.

크롬에서는 이것이 탭 프로세스의 주요 스레드이다.

통신은 몇 개의 병렬 스레드에 의해 진행될 수 있는데 병렬 연결의 수는 보통 2개에서 6개로 제한된다. (파이어폭스3는 6개 사용)

이벤트 순환

브라우저의 주요 스레드는 이벤트 순환으로 처리 과정을 유지하기 위해 무한 순환된다.

배치와 그리기 같은 이벤트를 위해 대기하고 이벤트를 처리한다.

CSS2 시각 모델

캔버스

CSS2 명세는 캔버스를 “서식 구조가 표현되는 공간” 이라고 설명한다. 브라우저가 내용을 그리는 공간인 것이다.

캔버스 공간 각각의 면적은 무한하지만 브라우저는 뷰포트의 크기를 기초로 초기 너비를 결정한다.

CSS2 명세에 다르면 캔버스는 기본적으로 투명하기 때문에 다른 캔버스와 겹치는 경우 비쳐 보이고, 투명하지 않을 경우에는 브라우저에서 정의한 색이 지정된다.

CSS 박스 모델

CSS 박스 모델은 문서 트리에 있는 요소를 위해 생성되고 시각적 서식 모델에 따라 배치된 사각형 박스를 설명한다.

각 박스는 콘텐츠 영역(문자, 이미지 등)과 선택적인 패딩과 테두리, 여백이 있다.

CSS2 박스 모델CSS2 박스 모델

각 노드는 위 같은 박스를 0~n개 생성한다.

모든 요소는 만들어질 박스의 유형을 결정하는 “display” 속성을 갖는데 이 속성의 유형은 아래와 같다.

  • block: 블록 상자를 만든다.
  • inline: 하나 또는 그 이상의 인라인 상자를 만든다.
  • none: 박스를 만들지 않는다.

기본 값은 인라인이지만 브라우저의 스타일 시트는 다른 기본 값을 설정한다. 예를 들면 “div” 요소의 display 속성에 대한 기본 값은 block이다.

위치 결정 방법

  1. Normal: 객체는 문서 안의 자리에 따라 위치가 결정된다. 이것은 렌더 트리에서 객체의 자리가 DOM 트리의 자리와 같고 박스 유형과 면적에 따라 배치됨을 의미한다.
  2. Float: 객체는 우선 일반적인 흐름에 따라 배치된 다음 왼쪽이나 오른쪽으로 흘러 이동한다.
  3. Absolute: 객체는 DOM 트리 자리와는 다른 렌더 트리에 놓인다.

위치는 “position” 속성과 “float” 속성에 의해 결정된다.

  • static과 relative로 설정하면 일반적인 흐름에 따라 위치가 결정된다.
  • absolute와 fixed로 설정하면 절대적인 위치가 된다.

position 속성을 정의하지 않으면 static이 기본 값이 되며, 일반적인 흐름에 따라 위치가 결정된다.

static이 아닌 다른 속성 값(relatice, absolute, fixed)을 사용하면 top, bottom, left, right 속성으로 위치를 결정할 수 있다.

박스가 배치되는 방법은 아래와 같은 방법으로 결정된다.

  • 박스 유형(display, inline, …)
  • 박스 크기(width, height, …)
  • 위치 결정 방법(position, float)
  • 추가적인 정보: 이미지 크기와 화면 크기 등

박스 유형

  • 블록 박스

    브라우저 창에서 사각형 블록을 형성한다.

    블록 박스

  • 인라인 박스

    블록이 되지 않고 블록 내부에 포함된다.

    인라인 박스

  • 블록과 인라인 배치

    블록은 다른 블록 아래 수직으로 배치되고 인라인은 수평으로 배치된다.

    블록과 인라인 배치

  • 라인

    인라인 박스는 라인 또는 “라인 박스” 안쪽에 놓인다. 라인은 적어도 가장 큰 박스만큼 크지만 “baseline” 정렬일 때 더 커질 수 있다. 이것은 요소의 하단이 다른 상자의 하단이 아닌 곳에 배치된 경우를 의미한다. 포함하는 너비가 충분하지 않으면 인라인은 몇 줄의 라인으로 배치되는데 이것은 보통 문단 안에서 발생한다.

    라인

위치 잡기

상대적인 위치

상대적인 위치 잡기는 일반적인 흐름에 따라 위치를 결정한 다음 필요한 만큼 이동한다.

상대적인 위치 잡기

플로트

플로트 박스는 라인의 왼쪽 또는 오른쪽으로 이동한다. 흥미로운 점은 다른 박스가 이 주변을 흐른다는 것이다.

예를 들어 아래와 같은 HTML과 그 결과이다.

1
2
3
4

<p>  
    <img src="http://helloworld.naver.com/image.gif" alt="image.gif" width="100" height="100" style="float:right">  
    Lorem ipsum dolor sit amet, consectetuer...  
</p>

플로트 예시 결과

절대적인(absolute) 위치와 고정된(fixed) 위치

절대와 고정 배치는 일반적인 흐름과 무관하게 결정되고, 일반적인 흐름에 관여하지 않으며, 면적은 부모에 따라 상대적이다. 고정인 경우 뷰포트로부터 위치를 결정한다.

고정된 위치 잡기

층 표현

CSS의 z-index 속성에 의해 명시된다. 층은 박스의 3차원 표현이고 “z 축”을 따라 위치를 정한다.

박스는 (stacking contexts라고 부르는) 스택으로 구분된다. 각 스택에서 뒤쪽 요소가 먼저 그려지고 앞쪽 요소는 사용자에게 가까운 쪽으로 나중에 그려진다. 가장 앞쪽에 위치한 요소는 겹치는 이전 요소를 가린다.

스택은 z-index 속성에 따라 순서를 결정한다. z-index 속성이 있는 박스는 지역 스택(local stack)을 형성한다. 뷰포트는 바깥쪽의 스택(outer stack)이다.

예를 들어 아래와 같은 HTML과 그 결과이다.

1
2
3
4
5
6
7
8
9
10
11

<style type="text/css">  
    div {  
        position: absolute;
        left: 2in;
        top: 2in;
    }
</style>  
<p>  
    <div style="z-index:3;background-color:red;width:1in;height:1in"></div>
    <div style="z-index:1;background-color:green;width:2in;height:2in"></div>
</p>

고정 위치 잡기 예시 결과

붉은색 박스가 초록색 박스보다 마크업에서 먼저 나오기 때문에 일반적인 흐름이라면 먼저 그려져야 하지만, z-index 속성이 높기 때문에 더 앞쪽에 표시된다.

Reference

NAVER D2

Study - Internet
study Internet Browser Rendering Html DOM Parser CSS Tree
This post is licensed under CC BY 4.0 by the author.