[CS] 브라우저 렌더링 원리

브라우저 렌더링 원리

브라우저 렌더링의 과정은 HTML, CSS, JavaScript 등을 브라우저 화면에 그리는 과정

1. 렌더링 엔진에서 HTML문서를 파싱하여 태그들을 노드로 변환시켜 계층구조를 형성 DOM(Document Object Model)을 만든다.
   • 파싱 중  <script> 태그를 만나면 렌더링 엔진은 정지
   • 자바스크립트 엔진이 처리를 하고 정지된 시점에서 다시 렌더링 엔진 실행
2. CSS을 파싱하여 스타일시트 객체를 노드화 시켜 CSSOM(Css Object Model)을 만든다.
3. DOM과 CSSOM을 결합시켜 실제 배치될 요소만 렌더 트리를 형성한다.
4. 렌더 트리에 위치를 알려줄 위치와 크기를 알려줘서 레이아웃 구성을 한다.
5. 렌더 트리를 그린다.

 

 

참고링크

https://bbangson.tistory.com/87

https://zero-base.co.kr/event/media_insight_contents_FE_frontend_tech_Interview