내용 정리
- 우선 브라우저는 사용자의 요청에 따라 서버로부터 HTML, CSS, JavaScript, 그리고 이미지 파일을 포함한 에셋들을 응답 받습니다. HTML, CSS 파일은 랜더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 랜더 트리로 결합됩니다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 출력하게 됩니다.
- 다만 자바스크립트는 랜더링 엔진이 아닌 자바스크립트 엔진이 처리합니다. HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해서 진행 중이던 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘깁니다. 자바스크립트 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 다시 DOM 생성을 재개합니다.
- 이처럼 브라우저는 동기(Synchronous)적으로 HTML, CSS, JavaScript를 처리하기 때문에 script 태그의 위치에 따라 블로킹이 발생하여 DOM 생성 자체를 지연시킬 수도 있습니다. 따라서 떄에 따라 script 태그의 위치가 중요하게 작용합니다.
- 보편적으로 body 요소 아래에 자바스크립트를 위치하는 것이 좋은 것으로 알고 있습니다. HTML 요소들이 스크립트 로딩 지연으로 인해 랜더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축되고, DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 에러가 발생할 수밖에 없는데 그런 부분을 미연에 방지할 수 있습니다.
꼬리 질문
- body 태그를 기준으로 script 태그는 어디에 위치하는 편이 좋을까요? 만약 상단에 script 태그가 위치해야 하는 상황이라면 어떻게 제어해야 할까요?
- 보편적으로 body 태그 아래에 스크립트 태그를 위치하는 편이 좋고, 만약 상단에 위치해야 한다면 defer, async 문법을 통해서 비동기적으로 처리가 가능합니다.
- DOM 생성 중에 style이나 link 태그를 만나게 되면 어떻게 처리되게 되나요?
- script 태그와 동일하게 DOM 생성을 일시 중단하고 CSSOM을 생성합니다.
- inline style 사용을 지양해야 하는 이유에 대해서 설명해주실 수 있나요?
- 성능 최적화와 관련이 있는데, React의 경우 변화 감지 메커니즘을 사용하기 때문에 매번 스타일 객체를 생성할 경우 해당 style 객체의 비교가 항상 false로 나오게 됩니다. 그 과정에서 불필요한 리랜더링이 발생할 가능성이 높아집니다. 그리고 일반적인 개발 환경에서도 reflow가 발생하기 때문에 최적화가 적합하지 못합니다.
- repaint, reflow란?
참고자료
평소엔 책과 영화와 음악을 좋아합니다. 보편적이고 보통사람들을 위한 서비스 개발을 꿈꾸고 있습니다.