해당 포스팅은 브라우저 렌더링 원리에 대해 다룹니다. 면접시 바로 말할 수 있는 답과 그외 자세한 내용이 적혀 있습니다.
브라우저 렌더링 과정은?
1. HTML 파싱 -> DOM 트리구축, CSS 파싱 -> CSSOM 트리 구축
2. DOM과 CSSOM을 조합하여 렌더 트리(Render Tree) 구축
3. 렌더 트리 배치 (Layout)
4. 렌더 트리 그리기 (Paint)
첫 번째 DOM 트리 구축을 위한 HTML 파싱, 두 번째는 렌더 트리 구축, 세 번째는 렌더 트리 배치, 네 번째는 렌더트리 그리기입니다.
일단 HTML 구문을 분석하여 브라우저가 이해하도록 바꿔주는 작업이 필요합니다. 이를 위해 HTML 파서가 사용되는데 이는 HTML 마크업을 DOM 트리로 변환합니다. 이때 중간에 <script> 태그를 만나면 파싱이 중단되고 해당 자원부터 가져옵니다. 만약 defer 속성을 사용한 스크립트 태그를 만날 시 파싱이 중단되지 않습니다.
DOM과 마크업은 1:1의 관계를 가지지만 렌더 트리와 DOM 트리는 1:1로 대응하지 않습니다. 대신 렌더 트리는 DOM 요소에 포함됩니다. 예를 들어 display: none 값이 부여된 요소는 DOM 트리에는 나타나나 렌더 트리에는 나타나지 않습니다.
렌더 트리 요소를 위에서 아래로 왼쪽에서 오른쪽으로 배치합니다. 위치와 크기를 계산하는 과정입니다. 배치 후 그 위에 화면을 그립니다.(paint)
홈페이지가 사용자에게 보이는 순서는?
HTML→ Css → 레이아웃 배치 → 배경 색과 이미지 같은 꾸밈값 그리기
그리기 순서
- 배경색
- 배경 이미지
- 테두리
- 자식
- 아웃라인
브러우저의 오류 처리
<html>
<mytag></mytag>
<div>
<p>
</div>
Really lousy HTML
</p>
</html>위의 예시에서 오류는 두가지가 있다. <mytag> 는 표준 태그가 아닙니다. 그리고 <p>와 <div> 태그는 중첩의 오류가 있다. 그러나 실제 브라우저에 돌려보면 멀쩡히 돌아가는 걸 볼 수 있습니다. 이건 파서가 알아서 실수를 수정했기 때문입니다. 이와 같은 브라우저의 똑똑한 오류 처리는 여러 가지가 있습니다.
<br> 대신 </br>
<p> O’er all the hilltops</br>
Is quiet now,<br>
In all the treetops<br>
Hearest thou
</p>
HTML은 공식적으로 <br>태그만 지원하고 있습니다. 그러나 XHTML 같은 경우는 <br> </br> 를 사용기에 여전히 </br> 태그만을 사용하는 사이트가 많습니다. 무엇을 쓰든 똑같이 작동하는 건 브라우저가 내부적으로 오류를 처리한 덕분입니다.
기타
그 외에도 중첨된 폼 요소 같은 경우 안쪽의 폼은 무시됩니다. 테이블이 어긋난 경우 알아서 처리해주기 때문입니다. 참고로 태그 중첩이 너무 깊으면 최대 20개의 중첩만 허용합니다. 또한 html, body 태그를 닫지 않은 경우 알아서 처리합니다.
'FrontEnd' 카테고리의 다른 글
| [JS📜] 자바스크립트 클로저란 무엇인가? (0) | 2022.12.04 |
|---|---|
| [React🍇]Webpack build시 최적화하기 (1) | 2022.10.10 |
| [HTTP✨] 캐쉬헤더 (0) | 2022.09.23 |
| [JS📜] Undefined와 null의 차이점, check (0) | 2022.09.05 |
| [React🍇] TDD용 Eslint 설정하기 (0) | 2022.09.04 |