Replies: 5 comments
-
1. 브라우저 렌더링 과정에 대해서 설명해 주세요브라우저에서 페이지를 렌더링하려면 우선, DOM(Dcument Object Model) 및 CSSOM(CSS Object Model) 트리를 구성해야 합니다. HTML 마크업은 DOM으로 변환되고, CSS 마크업은 CSSOM으로 변환됩니다. 둘은 각각의 독립적인 자료구조입니다. 브라우저에서 페이지를 렌더링하려면 첫 번째로 DOM 트리를 구성해야 합니다. DOM 트리는 HTML 마크업을 파싱한 결과로 생성되는 객체 모델입니다. DOM 트리는 트리 형태의 자료구조로, 문서 내 각 요소, 속성, 텍스트 노드 등을 객체로 표현하고 객체들 간의 부모-자식 관계를 나타냅니다. 이 후, CSS 마크업을 처리하고 DOM을 스타일링하기 위한 CSSOM 트리를 구성합니다. DOM 트리와 CSSOM 트리는 각각 독립적인 자료구조입니다. CSSOM까지 생성이 완료되면, DOM 트리와 CSSOM 트리를 결합한 렌더 트리를 생성합니다. DOM 트리의 루트부터 시작하여 사용자의 눈에 보이는 요소들만 순회하며 만들어집니다. 눈에 보이는 모든 요소를 순회하면서 어떤 CSS 규칙을 적용할지 결정합니다.
처럼 화면에 나타나지 않는 태그의 경우 렌더링 결과에 포함될 필요가 없기 때문에 렌더 트리에 포함되지 않습니다. 반면,
속성을 가진 요소는 자리를 차지하기 때문에 렌더 트리에 포함됩니다. 생성된 렌더 트리를 기반으로, 페이지의 구조를 결정하는 레이아웃 단계가 실행됩니다. 이 단계에서 뷰포트를 기준으로 노드의 구체적인 크기나 위치를 계산합니다. 페이지에서 각 노드의 정확한 크기, 위치를 계산하기 위해서 브라우저는 렌더 트리의 루트에서 시작하여 순회합니다. 레이아웃이 결정되면 렌더 트리의 각 노드를 화면에 픽셀을 그리는 페인트 단계가 실행됩니다. 페인트 작업은 몇 개의 레이어로 구분해서 할 수 있고, 만약 레이어를 구분해서 페인트 작업을 한다면 구분한 레이어를 다시 합치는 합성 단계가 추가로 발생합니다. |
Beta Was this translation helpful? Give feedback.
-
2. 리플로우와 리페인트는 무엇이고, 각각은 언제 실행되나요?
리플로우는 페이지의 레이아웃을 다시 계산하는 것을 말하고, 리페인트는 변경된 레이아웃을 화면에 반영하기 위해서 다시 그리거나, 화면에 특정 요소를 다시 페인팅하는 것을 말합니다. 리플로우는 DOM 요소의 너비 높이 위치 변경, 새로운 DOM 요소 추가 및 삭제, 브라우저 창의 크기 변경 등이 발생했을 때 실행됩니다. 페이지의 레이아웃을 다시 계산하는 것을 말합니다. 리페인트는 페인트 전용 속성인 background-color, color, box-shadow의 변경이 생겼을 때, 리플로우가 실행되어 페이지 레이아웃이 변경되었을 때 변경 사항을 반영하기 위해서 다시 페인트 작업을 해야할 때 실행됩니다. |
Beta Was this translation helpful? Give feedback.
-
3. 렌더링을 차단하는 리소스들은 어떤 것들이 있고, 어떻게 해결할 수 있을까요?브라우저의 렌더링을 차단하는 리소스는 두 가지가 있습니다. 첫 번째로는
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" /> |
Beta Was this translation helpful? Give feedback.
-
3-1. HTML을 파싱해서 DOM 트리를 생성하다가, script 태그를 만나면 멈추는 이유는 무엇인가요?
HTML을 파싱하다가 그리고, 자바스크립트는 DOM API를 사용해서 DOM 트리를 변경할 수 있습니다. 만약 자바스크립트를 실행하는 중에도 HTML을 계속해서 파싱한다면 HTML이 파싱하려는 DOM 트리와 자바스크립트의 DOM 조작에서 충돌이 발생할 수 있습니다. 이와 같은 이유로 <script /> 태그를 만다면 DOM 트리 생성을 일시중단하게 됩니다. DOM 트리 생성이 차단되기 때문에, 초기 렌더링 관점에서 좋지 않습니다. 따라서 <script /> 태그를 태그 제일 아래에 위치시키거나 async나 defer 설정으로 비동기로 다운로드 받을 수 있도록 해서 초기 렌더링 문제를 해결할 수 있습니다. |
Beta Was this translation helpful? Give feedback.
-
3-2. <script /> 태그의 async, defer 속성의 차이를 알고 계실까요?두 설정 모두 스크립트를 비동기적으로 다운로드 한다는 관점에서는 같습니다. 하지만, 다운로드 후 스크립트를 실행하는 시점에서는 차이가 있습니다. 
|
Beta Was this translation helpful? Give feedback.
-
Questions
자바스크립트 엔진이 코드를 실행하는 과정을 알고있나요?
Beta Was this translation helpful? Give feedback.
All reactions