프론트엔드에 대해 공부하면서 단순히 언어에 대한 공부를 해왔었다.
javascript 를 어떻게 쓰는게 유용할지 , HTML 을 시멘틱하게 작성하려면 어떻게 해야하는지 , 반응형으로 CSS 적용하기 등 ...
항상 vscode 에서 코드를 실행하고 확장프로그램인 Live server 를 이용해서 크롬으로 바로 결과를 확인하고
"음 .. ! 만족스러운 결과다 "하고 넘어갔었는데 갑자기 브라우저에서 어떻게 내 코드가 변환되어 화면으로 나타나는지에 대한 궁금증이 생겨버렸다 .. !!!
그래서 오늘 포스트는 브라우저의 렌더링 원리에 대해 작성해보고자 한다. 프론트엔드 개발자라면 꼭 알고 있어야할 지식중에 하나라고 생각한다 👍
브라우저 렌더링이란 ?
HTML, CSS 및 JavaScript와 같은 웹 페이지의 요소들을 해석하고 화면에 표시하는 과정
브라우저는 어떻게 웹 페이지 요소들을 해석하고 화면에 표시할까 ?
브라우저는 렌더링 할 때 Blink(Chrome 기반) 나 Webkit (Safari 기반) 등과 같은 렌더링 엔진을 사용함.
브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전 브라우저가 페이지의 초기 출력을 위해 Critical Rendering Path(CRP) 실행
본격적으로 CRP 에 대해 알아보자
CRP 순서
순서는 아래와 같다.
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. DOM 트리 구축(Constructing the DOM Tree)
DOM(Document Object Model) 트리는 완전히 구문 분석된 HTML 페이지의 Object 표현이다. 루트 요소 <html>로 시작하여 페이지의 각 element/text에 대한 노드가 만들어진다. 다른 요소 내에 중첩된 요소는 자식 노드로 표시되며 각 노드에는 해당 요소의 전체 특성이 포함된다. 예를 들어, <a> 요소는 노드와 관련된 href 속성을 갖는다.
2. CSSOM 트리 구축(Constructing the CSSOM Tree)
CSSOM(CSS Object Model)은 DOM과 연관된 스타일의 Object 표현이다. 이것은 DOM과 비슷한 방식으로 표현되지만 명시적 또는 암시적 선언과 상속 여부에 관계없이 각 노드의 관련 스타일로 표시된다.
CSS는 "렌더링 차단 리소스(render blocking resource)"로 간주된다. 즉, 먼저 리소스를 완전히 파싱하지 않으면 렌더링 트리를 구성 할 수 없다. HTML과 달리 CSS는 계단식 상속 특성 때문에 부분적으로 실행될 수 없다. 문서의 뒷부분에 정의된 스타일은 이전에 정의된 스타일을 무시하고 변경할 수 있다. 따라서 스타일 시트 전체가 파싱되기 전에 스타일 시트에서 앞에서 정의한 CSS 스타일을 사용하기 시작하면 잘못된 CSS가 적용되는 상황이 발생할 수 있다. 즉, 다음 단계로 넘어 가기 전에 CSS를 완전히 파싱 해야 한다.
CSS 파일은 현재 장치에 적용되는 경우에만 렌더링 차단 리소스로 간주된다. <link rel = "stylesheet"> 태그는 미디어 속성을 받아 들일 수 있다. 미디어 속성은 스타일이 적용되는 미디어 쿼리를 지정할 수 있다. 예를 들어 media 속성이 orientation:landscape 인 스타일 시트가 있고 페이지를 세로 모드로 보고 있는 경우 해당 리소스는 렌더링 차단 리소스로 간주되지 않는다.
3. JavaScript 실행(Running JavaScript)
JavaScript는 "파서 차단 리소스(parser blocking resource)"로 간주된다. 즉, HTML 문서 자체의 구문 분석은 JavaScript에 의해 차단된다.
파서가 내부 태그이든 외부 태그이든 <script> 태그에 도달하면 (외부 태그 인 경우) fetch를 중단하고 실행한다. 따라서 문서 내의 요소를 참조하는 JavaScript 파일이 있는 경우 해당 문서가 표시된 후에 배치 해야 한다.
4. 랜더링 트리 구축(Creating the Render Tree)
렌더링 트리는 DOM과 CSSOM의 조합이다. 페이지에서 최종적으로 렌더링 될 내용을 나타내는 트리다. 즉, 표시되는 내용만 캡쳐하가 때문에 display:none을 사용하여 CSS로 숨겨진 요소는 포함하지 않는다.
위의 예제 DOM과 CSSOM을 사용하여 다음 렌더링 트리가 생성된다.
5. 레이아웃 생성(Generating the Layout)
레이아웃은 뷰포트의 크기에 관련된 CSS 스타일에 대한 컨텍스트에 의해 뷰포트의 크기를 결정한다. 비율 또는 뷰포트 단위. 뷰포트 크기는 문서 헤드에 제공된 메타 뷰포트 태그에 의해 결정되거나, 태그가 제공되지 않으면 기본 뷰포트 너비 인 980px가 사용된다.
예를 들어 가장 일반적인 메타 뷰포트 값은 뷰포트 크기를 장치 너비에 맞게 설정하는 것이다.
6. 페인팅(Painting)
마지막으로 Painting 단계에서 페이지의 가시적인 내용을 픽셀로 변환하여 화면에 표시 할 수 있다.
페인트 단계에서 처리에 걸리는 시간은 DOM의 크기와 적용되는 스타일에 따라 다르다. 어떤 스타일은 다른 스타일보다 더 많은 작업을 필요로 한다. 예를 들어, 복잡한 그래디언트 배경 이미지는 단순한 단색 배경색보다 더 많은 시간을 필요로 한다.
'HTML-CSS-JavaScript' 카테고리의 다른 글
| [javascript] 배열 split 사용하기 (0) | 2023.02.27 |
|---|---|
| [CSS] CSS selector (0) | 2023.02.15 |
| [CSS] CSS 박스 모델 (0) | 2023.02.15 |
