[JavaScript] 브라우저 동작 원리

브라우저 동작 원리

1. HTML, CSS 렌더링

HTML과 CSS문서는 렌더링 엔진에 의해 각각 DOM, CSSOM 트리를 구성하게 됩니다.

2. JavaScript 렌더링

Script는 JavaScript 해석기에 의해 반영됩니다.

3. 렌더링 트리

• DOM, CSSOM 트리 생성
• 렌더링 엔진이 HTML 내에 Script를 만나면 DOM 생성 프로세스를 중지하고 권한을 자바스크립트 엔진으로 넘김
• 자바스크립트 파싱 후, 다시 HTML 파서로 권한을 넘겨서 DOM 생성 재개

HTML 안의 script 태그는 body태그의 아래에 작성하는 것이 좋습니다.
DOM 트리 생성 도중 자바스크립트를 파싱하게 되면 시간지연과 에러가 발생할 수 있기 때문입니다.

참고자료

https://developer.mozilla.org/ko/docs/Learn/Common_questions/How_does_the_Internet_work
https://velog.io/@surim014/HTTP%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko