Browser Rendering

Browser Rendering

• HTML, CSS, JavaScript의 웹페이지 리소스를 브라우저가 화면에 그리는 과정

Node에 대한 사전지식

• HTML문서 내의 요소(element), 속성(attribute), 텍스트(text) 등을 나타내는 개별적인 객체를 의미

Browser Rendering 원리와 순서

1. DOM을 생성
   -> 브라우저가 HTML문서를 파싱하여 DOM트리를 생성
   -> 이때, HTML태그를 노드로 변환하고, 노드간의 계층관계를 형성
   
   
2. CSSOM을 생성
   -> 브라우저가 CSS파일을 파싱하여 CSSOM트리를 생성
   -> 이때, CSS속성을 노드로 변환하고, 노드간의 계층관계를 형성
   
   
3. DOM트리와 CSSOM을 결합하여 렌더트리를 생성
   -> 이때, 실제 화면에 표시될 요소만을 선택하여 렌더트리를 형성
   
   
4. 브라우저는 렌더트리를 이용하여 각 요소의 크기와 위치를 계산하는 과정인 레이아웃을 거쳐 화면에 요소를 그리는 페인팅과정을 거치게됨
   -> 이때, 요소의 배경, 테두리, 글자 등을 그리게됨

Reflow와 Repaint를 왜 피해야 하는가?

• 배치과정이 다시 일어나기 때문에, 비효율적인 계산을 하게됨
  -> 브라우저 성능 저하

HTML이 렌더링 중에 JavaScript가 실행되면
렌더링이 멈추는데 그 이유는 무엇인가?

• 브라우저가 문서를 파싱할때 위에서 아래로 진행하게됨
  -> 이때, script를 만나면 해당 script렌더링을 마칠때까지 다른 작업들은 중단됨
  -> 따라서 script를 body 하단에 두도록 권장함
  -> async속성을 이용해서 비동기적으로 로딩해도됨