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>를 표기하는 위치에 따라서 로딩 속도가 달라지게 되는 것 이다.