Browser

lingodingo·2020년 5월 31일
0

frontend

목록 보기
5/5
post-thumbnail

1. <!doctype HTML>

대다수의 HTML 문서 중에서 최상단에 위치한 <!doctype HTML> 구문은 이 문서가 어떤 버전의 HTML으로 작성되었가를 브라우저에 알려준다는 뜻으로 알고 있을 것입니다. 그리고 많은 개발자가 웬만하면 저 구문을 꼭 첫 번째 줄에 넣으라고 합니다. 이러한 이유는 MDN에서 찾을 수 있었습니다.

  • DOCTYPE은 반드시 HTML 문서 첫 부분에 기술하자. 인터넷 익스플로러 9 또는 그 이전 버전에서는 DOCTYPE 이전에 주석이나 XML 선언부 등 무엇이든 작성된 상태라면 해당 문서를 호환 모드로 렌더링하게 된다.
  • HTML5에서 DOCTYPE의 유일한 목적은 완전 표준 모드를 활성화하기 위함이다. 이전 버전의 HTML 표준에서는 DOCTYPE이 추가적인 의미를 갖지만, 실제로 이를 호환 모드와 표준 모드의 판단 이외의 목적으로 사용한 브라우저는 없다. - MDN

어쨌든, 저 구문은 HTML4를 표시하기 위해선 상당히 복잡했지만, HTML5에서는 많이 완화되었습니다. 저 구문이 없으면 브라우저는 다음과 같은 모드로 렌더링을 시작합니다.

  1. 표준모드(Full Standards)
  2. 거의 표준 모드(Almost standards)
  3. 호환모드(Quirks)

이런 모드가 있는 이유는 HTML과 CSS 표준을 제정하기 이전에 개발된 브라우저들을 호환 시키기 위함입니다.

1. 표준 모드

표준 모드는 W3C, IETF의 표준을 엄격히 준수하여 문서를 해석합니다.

2. 거의 표준 모드

거의 표준 모드는 표준 모드와 같지만 inline-box의 몇 가지 요소가 다릅니다. - MDN

3. 호환 모드

이 모드로 실행되게 되면 같은 코드라도 웹 브라우저마다 서로 다르게 해석하므로 전혀 다른 결과물을 보여주게 됩니다. - MDN

2. Critical Rendering Path

브라우저가 HTML, CSS, JavsScript를 사용하여 화면에 렌더링된 픽셀로 변환하는 과정은 어떻게 이루어 질까요? 서버에서 해당 파일들을 받고, 사용자의 모니터에 픽셀 단위로 변환하기 까지의 단계를 Critical Rendering Path라고 합니다. - Google developers

Critical Rendering Path의 6단계

  1. DOM 트리 구축(Constructing the DOM Tree)
  2. CSSOM 트리 구축(Constructing the CSSOM Tree)
  3. JavaScript 실행(Running JavaScript)
  4. 랜더링 트리 구축(Creating the Render Tree)
  5. 레이아웃 생성(Generating the Layout)
  6. 페인팅(Painting)

1. Constructing Document Object Model tree

TL;DR

  • 바이트 → 문자 → 토큰 → 노드 → 객체 모델.
  • HTML 마크업은 DOM(Document Object Model)으로 변환되고, CSS 마크업은 CSSOM(CSS Object Model)으로 변환됩니다.
  • DOM 및 CSSOM은 서로 독립적인 데이터 구조입니다.
  • Chrome DevTools Timeline을 사용하면 DOM 및 CSSOM의 생성 및 처리 비용을 수집하고 점검할 수 있습니다.

  1. 변환: 브라우저가 HTML의 원시 바이트를 디스크나 네트워크에서 읽어와서, 해당 파일에 대해 지정된 인코딩(예: UTF-8)에 따라 개별 문자로 변환합니다.
  2. 토큰화: 브라우저가 문자열을 W3C HTML5 표준에 지정된 고유 토큰으로 변환합니다(예: '', '' 및 꺽쇠괄호로 묶인 기타 문자열). 각 토큰은 특별한 의미와 고유한 규칙을 가집니다.
  3. 렉싱: 방출된 토큰은 해당 속성 및 규칙을 정의하는 '객체'로 변환됩니다.
  4. DOM 생성: 마지막으로, HTML 마크업이 여러 태그(일부 태그는 다른 태그 안에 포함되어 있음) 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결됩니다. 이 트리 데이터 구조에는 원래 마크업에 정의된 상위-하위 관계도 포합됩니다. 즉, HTML 객체는 body 객체의 상위이고, body 는 paragraph 객체의 상위인 식입니다.

이 전체 프로세스의 최종 출력이 바로 이 간단한 페이지의 DOM(Document Object Model)이며, 브라우저는 이후 모든 페이지 처리에 이 DOM을 사용합니다.

브라우저는 HTML 마크업을 처리할 때마다 위의 모든 단계를 수행합니다. 즉, 바이트를 문자로 변환하고, 토큰을 식별한 후 노드로 변환하고 DOM 트리를 빌드합니다. 이 전체 프로세스를 완료하려면 시간이 약간 걸릴 수 있으며, 특히 처리해야 할 HTML이 많은 경우 그렇습니다.

DOM 트리는 문서 마크업의 속성 및 관계를 포함하지만 요소가 렌더링될 때 어떻게 표시될지에 대해서는 알려주지 않습니다. 이것은 CSSOM의 책임입니다.

2. Constructing CSS Object Model tree

CSS Object Model은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다. - MDN

3. Running Javascript

4. Creating Rendering Tree

  1. DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성합니다.
  2. 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함됩니다.
  3. 레이아웃은 각 객체의 정확한 위치 및 크기를 계산합니다.
  4. 마지막 단계는 최종 렌더링 트리에서 수행되는 페인트이며, 픽셀을 화면에 렌더링합니다.

  1. DOM 트리의 루트에서 시작하여 표시되는 노드 각각을 순회합니다.
    • 일부 노드는 표시되지 않으며(예: 스크립트 태그, 메타 태그 등), 렌더링된 출력에 반영되지 않으므로 생략됩니다.
    • 일부 노드는 CSS를 통해 숨겨지며 렌더링 트리에서도 생략됩니다. 예를 들어, 위의 예시에서 span 노드의 경우 display: none 속성을 설정하는 명시적 규칙이 있기 때문에 렌더링 트리에서 누락됩니다.
  2. 표시된 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용합니다.
  3. 표시된 노드를 콘텐츠 및 계산된 스타일과 함께 내보냅니다.

참고: visibility: hiddendisplay: none과 다릅니다. 전자는 요소를 보이지 않게 만들지만, 레이아웃에서 공간을 차지합니다(즉, 비어 있는 상자로 렌더링됨). 반면, 후자(display: none)는 요소가 보이지 않으며 레이아웃에 포함되지도 않도록 렌더링 트리에서 요소를 완전히 제거합니다.

5. Generating Layout

최종 출력은 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 모두 포함하는 렌더링 트리입니다. 렌더링 트리가 생성되었으므로 레이아웃 단계로 진행할 수 있습니다.

지금까지 표시할 노드와 해당 노드의 계산된 스타일을 계산했습니다. 하지만 기기의 뷰포트 내에서 이러한 노드의 정확한 위치와 크기를 계산하지는 않았습니다. 이것이 바로 레이아웃 단계이며, 경우에 따라 리플로우라고도 합니다.

페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트에서 시작하여 렌더링 트리를 순회합니다.

레이아웃 프로세스에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 상자 모델이 출력됩니다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환됩니다.

6. Painting

마지막으로, 이제 표시되는 노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악했으므로, 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계로 이러한 정보를 전달할 수 있습니다. 이 단계를 흔히 페인팅 또는 래스터화라고 합니다.

이 경우 브라우저가 처리해야 할 작업이 상당히 많으므로 시간이 약간 걸릴 수 있습니다.

렌더링 트리 생성, 레이아웃 및 페인트 작업을 수행하는 데 필요한 시간은 문서의 크기, 적용된 스타일 및 실행 중인 기기에 따라 달라집니다. 즉, 문서가 클수록 브라우저가 수행해야 하는 작업도 더 많아지며, 스타일이 복잡할수록 페인팅에 걸리는 시간도 늘어납니다. 예를 들어, 단색은 페인트하는 데 시간과 작업이 적게 필요한 반면, 그림자 효과는 계산하고 렌더링하는 데 시간과 작업이 더 필요합니다.

이 작업들이 모두 끝난 뒤 페이지가 드디어 뷰포트에 표시됩니다.

DOM 또는 CSSOM이 수정된 경우, 화면에 다시 렌더링할 필요가 있는 픽셀을 파악하려면 이 프로세스를 다시 반복해야 합니다.

7. 정리

  • Send Request - index.html에 대한 GET 요청 전송
  • Parse HTML and Send Request - HTML 및 DOM 구문 분석을 시작. style.css 및 main.js에 대한 GET 요청
  • Parse Stylesheet - CSSOM이 style.css 용으로 생성
  • Evaluate Script - main.js 평가
  • Layout - HTML의 메타 뷰포트 태그를 기반으로 레이아웃 생성
  • Paint - 문서의 픽셀을 페인트
profile
Frontend developer

0개의 댓글