[JavaScript] HTML 렌더링과 JavaScript 실행

HTML 렌더링 순서

1. 서버에서 HTML 문서를 받아옴

2. HTML 문서를 파싱하여 DOM 트리를 생성함

3. CSS 파일을 로드/파싱하여 CSSOM 트리를 생성함

4. DOM 트리와 CSSOM 트리를 결합하여 렌더트리를 생성함

5. 렌더트리를 기반으로 레이아웃을 계산하고, 실제로 화면에 표시될 요소를 결정함

6. 브라우저에서 화면에 표시함

 

JavaScript 실행 순서

1. HTML 파싱 중 <script> 태그를 만나면, 해당 스크립트를 다운로드함

2. 스크립트를 파싱하여 실행 가능한 코드를 생성함

    - 이때, 오류가 있으면 실행되지 않음

3. 생성된 코드를 실행함

4. 다음 <script> 태그를 만날 때까지 파싱과 실행을 반복함

 

#  유의사항

  - 스크립트 코드가 HTML 파싱 과정에서 실행되는 순서에 따라 예기치 못한 결과가 발생할 수 있음