일반적으로 CSS를 불러오기 위해 link 요소를 head 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 script 요소를 body 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
브라우저의 동작 원리
- 사용자가 연결된 주소의 서버에 데이터 요청(Request)
- 웹브라우저가 다운로드 받은 서버의 데이터를 해석 후 사용자가 보는 UI 완성(Response)
- 웹브라우저는 서버에서 다운로드 받은 서버의 데이터(HTML, CSS, JS)를 어떻게 해석할까?
- 불러오기(loading)
- 파싱(parsing): DOM 트리를 만드는 일반적 과정으로 HTML, XML 파서를 가지고 있음
- 렌더링 트리 만들기: 화면에 표시하기 위한 위치와 크기 정보, 그리는 순서 등을 저장하기 위한 별도의 트리 구조(DOM 트리는 내용 자체를 저장)
- CSS 스타일 결정
- 레이아웃(layout)&그리기(painting)
렌더징 엔진
- 요청받은 컨텐츠를 브라우저에 표시(예를 들어, HTML 요청 시 HTML과 CSS를 파싱하여 화면에 표시
- 파싱이란?
- 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것, 파싱의 결과는 노드 트리로 나타남
- 렌더링 엔진에서는 HTML과 CSS를 파싱하고 JS의 경우 JavaScript 해석기라는 별도의 레이어에서 언어 해석
CSS와 JS 파일이 연결된 HTML 문서 파싱 과정
- 브라우저는 일반적으로 HTML을 파싱하고 외부 자원인 CSS, JS 파일 로드
- JS인 script tag를 만나면 스크립트가 해석 및 실행되는 동안 html문서의 파싱은 중단(DOM 트리 직접 수정 가능성이 있기 때문)
- 스타일 시트(CSS)는 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단하지 않음
- 만약 css 파일보다 js 파일을 먼저 불러 올 경우 문제가 생김
- 이 경우 스크립트가 문서를 파싱하는 동안 브라우저는 다른 작업을 수행하지 않기 때문에 스타일이 파싱되지 않은 상태(화면 레이아웃이 제대로 구성되지 않은 상태)로 사용자에게 뷰를 제공 -> 사용자 경험(UX)를 떨어뜨림
- 사용자 경험을 떨어뜨리지 않기 위해 script 태그를 body 태그 끝에 위치시키는 것을 권장 -> 이 경우 HTML 문서를 화면에 표시하는 속도가 빨라지기 때문에 사용자 불편을 초래하지 않을 수 있음
질문에 대한 답변
link 요소의 위치
페이지가 처음 로드되면 HTML과 CSS가 동시에 파싱되는데 HTML은 DOM을 만들고 CSS는 CSSOM을 만드는데 파싱 과정에서 DOM 트리가 생성되어도 CSSOM 트리가 없으면 렌더링 되지 않기 때문에 최대한 빠르게 CSS 파일을 읽어와 렌더링을 완성하기 위해 head 요소 안에 link 요소를 자식 요소로 하여 css 파일을 불러온다.
script 요소의 위치
scirpt 요소가 head의 자식 요소로 있거나 body 요소의 중간에 위치하게 되면 HTML 문서가 파싱되지 않은 상태에서 파싱을 멈추고 js 파일을 읽게 되면 렌더링 과정에 방해가 되어 사용자에게 제대로 된 뷰를 제공하지 못해 사용자 경험을 떨어뜨리게 되므로 body 요소가 끝나기 직전 script 요소를 넣어 사용자의 불편을 초래하지 않도록 한다.
