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

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

1. 주소창에 입력된 주소를 통해 서버를 찾아간다.
2. 이후 DNS가 연결해줄 곳을 찾는다.(실제 서버)
3. 서버에서 HTML 파일을 클라이언트로 보낸다.
4. HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식)
5. 중간에 css를 로드한ㄴ link 혹시 style 태그를 만나면 DOM 생성을 중지한다.
6. CSS를 파싱하고 CSSOM을 생성한다.
7. 이렇게 만들어진 DOM과CSSOM은 렌더링(브라우저에 시각적으로 출력하는 것)을 위해 렌더 트리로 결합된다.
8. 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단한다.
9. 이후 JS엔진을 실행하고 JS코드를 파싱한다.

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

리플로우: 레이아웃 계산을 다시 하는 것
리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것

여기서 script태그를 만날때마다 파싱이 중단되는 문제를 script 태그 뒤에 async 혹은 defer를 붙여줌으로써 해결할 수 있다.

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