Web

브라우저 렌더링 과정

밤밭황제 2023. 9. 3. 18:36

브라우저의 렌더링 과정

 

브라우저의 렌더링 과정

렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.

medium.com

 

  1. 서버에서 HTML, CSS 등 웹사이트에 필요한 리소스를 다운받는다.
  2. HTML 코드를 DOM Tree로 변환한다
  3. CSS파일을 CSSOM(CSS Object Model) 로 변환한다.
  4. DOM Tree와 CSSOM을 결합하여 Render Tree를 만든다.
  5. 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 Box 모델이 출력
    • 상대적 측정값 → 절대적인 픽셀
  6. 페인팅: 화면에 요소를 그리기
728x90