홈페이지가 사용자에게 보이는 순서 (브라우저 렌더링 과정)

1. 주소창에 원하는 주소를 입력한다. ex)www.naver.com
2. 입력한 주소의 정확한 주소를 DNS서버에서 ip주소로 변환하여 실제 서버를 찾는다.
3. 서버에서 클라이언트가 요청한 자원을 보내준다. (보통 HTML문서)
4. 클라이언트는 HTML문서를 파싱하여 DOM을 생성한다.
   4-1. 중간에 CSS나 JS스크립트를 다운받는 태그를 만나면 DOM생성을 중지하고 해당 자원들을 다운로드 한다.
5. HTML -> DOM, CSS -> CSSOM을 생성한다.
6. 이렇게 만들어진 DOM과 CSSOM은 브라우저에 시각적으로 출력하기(렌더링) 위해 렌더트리로 결합한다.

자바스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링을 하게 된다.

리플로우 : 레이아웃 계산을 다시 하는 것 (Geko엔진에서 DOM 배치 단계)
리페인트 : 재결합된 렌더트리를 기반으로 다시 그림그리는 것

script태그를 비동기적으로 다운받는 방법

async : HTML파싱, JS파일 로드가 동시에 진행
defer : DOM생성이 완료된 직후, JS의 파싱과 실행이 진행된다.