1. 클라이언트 웹 페이지 접속 시 서버로 요청을 보낸다. (클라이언트는 웹 브라우저)
2. 서버에서 html파일을 응답하고 클라이언트는 html파일을 파싱한다.
3-1. DOM(Document Object Model)트리를 생성한다.
3-2. html 파싱에서 <link>의 css파일 요청이 있다면 서버에 css 파일을 요청한다.
3-3. 서버에서 css파일을 응답하고 클라이언트는 이를 파싱하여 CSSOM(CSS Object Model)트리를 생성한다.
4. 생성된 DOM과 CSSOM은 결합되어 Render 트리를 만든다.
5. 디스플레이에 보여지게 된다.
기본적으로 이 과정을 거치게 되는데 이때 javascript를 삽입하는 <script>태그가 들어가게 된다면 3번에 다음과 같은 과정이 추가된다.
3-4. 서버에 js파일을 요청하고 서버는 이를 전송한다.
3-5. 클라이언트는 js파일을 파싱하여 신택스(syntax)트리를 생성한다.
※ 이때 렌더 트리의 생성은 자바스크립트파일의 처리가 끝날 때 까지 멈춰있어야한다.
우리 눈에 보이기 위해서는 render 트리가 생성되어 디스플레이가 이루어져야 하는데, 자바스크립트 파일 요청시 렌더트리의 생성이 멈추기 때문에 <script>를 표기하는 위치에 따라서 로딩 속도가 달라지게 되는 것 이다.
<head>태그 내에는 html 문서에 대한 정보나 css파일 등의 링크가 있기 때문에 이곳에 넣을 경우 렌더링에 영향을 준다. 물론 가벼운 스크립트의 경우에는 미비하겠지만 무겁거나 많은 스크립트를 처리할 경우 위에 말한대로 렌더 트리 생성을 방해하기 때문에 로딩이 늦어지게된다. 그래서 다음과 같은 두가지 경우에만 사용한다.