브라우저의 렌더링 원리
이번엔 어떻게 브라우저가 우리 눈 앞에 보여지는지 알게 될 차례다.
https://d2.naver.com/helloworld/59361
이 글에 따르면 굉~ 장히 복잡한 과정을 통해서 우리 눈 앞에 보여진다. 너무 신기해....
하지만 정말 너무 어렵기 때문에 간단하게 정리해 본다.
브라우저란?
웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다.
출처: https://bbangson.tistory.com/87 [뺑슨 개발 블로그:티스토리]
브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다.
- HTML 파싱 후, DOM(Document Object Model) 트리 구축
- CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축
- Javascript 실행
- 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.
- DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축
- 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
- 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow 단계) -> 렌더 트리 배치 단계
- 계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계)
자바스크립트는?
자바 스크립트는 렌더링 엔진에서 처리하지 않는다. 자바스크립트는 자바스크립트 엔진이 처리한다. 따라서 HTML 파서는 스크립트 태그를 만나면 DOM 생성 프로세스를 중지한다. -> 자바스크립트 코드를 body 태그 하단에 작성하는 이유 ,
생성도 안됐는데 조작하려고 하면 에러가 발생하기 때문에!
출처와 참고:
https://bbangson.tistory.com/87
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/browser-rendering.md