티스토리 뷰

Programming/Browser

웹 브라우저의 렌더링 과정

smyoon 2019. 11. 22. 11:04

 

워낙 잘 정리된 글이 많지만, 머릿속에 한 번 더 새길 겸 적어봅니다...!

 

 

 

[과정 요약]

  1. 불러오기 : 로더가 서버로부터 전달 받는 리소스를 읽는 과정을 의미한다.

  2. 파싱 : HTML 파서가 문서를 파싱해서 DOM Tree 를 만들게 된다.

  3. 렌더링 트리 만들기 : DOM Tree는 내용을 저장하는 트리로 자바스크립트에서 접근하는 DOM 객체를 쓸 때 이용하므로 별도로 그리기 위한 트리가 만들어져야 하는데 그것을 렌더링 트리라고 의미한다.

  4. 스타일 구조체 생성 : CSS 선택자에 따라서 적용되는 태그가 다르기에 모든 스타일을 분석하여 태그에 스타일 규직이 적용되게 결정한다.

  5. 레이아웃 : 렌더링 트리에서 위치, 크기를 가지고 있지 않기 때문에 객체들에게 위치, 크기를 지정해주는 과정을 의미한다.

  6. 그리기(=페인트) : 렌더링 트리를 탐색하며 그린다.

 

 

 

Q. css는 어디에 위치하면 좋을까?

문서를 파싱해서 DOM Tree를 만들어도 스타일 규칙이 없으면 렌더링 할 수가 없다.

즉, 최대한 빨리 스타일 규칙을 알아야 렌더링트리가 완전히 만들어지므로 스타일시트 파일을 모두 다운로드시키기 위해 <head></head>태그 사이에 놓는 것이다.

 

Q. 자바스크립트는 왜 아래에 놓아야 성능이 좋아질까?

자바스크립트는 DOM객체를 이용해서 컴포넌트들을 조작하는데 <head></head>태그 사이 처럼 상단에 놓게 되면 HTML파서가 파싱을 멈추고 스크립트파일을 읽기 때문이다.

파싱을 멈추고 읽기 때문에 위에서 스크립트파일이 많거나 파일이 크면 읽는 시간이 오래 걸려 사용자 입장에서 웹 페이지가 느리게 보이게 되므로 느리다고 느낄 수 있다.

심지어 잘못 코딩했을 경우 HTML 파싱보다 자바스크립트 파일이 먼저 실행되서 적용이 안되는 모습도 볼 수 있다.

따라서 일반적으로 </body>태그 위에 스크립트를 모아둔다.

 

이렇게 하다보면 자바스크립트 애니메이션같은 것이 늦게 적용되서 처음 웹페이지를 들어갔을 때 아주 잠깐 다른 웹페이지가 보이다가 애니메이션이 적용되는 것을 볼 수 있는데, 이런 부분은 감안하는 방법이 있는 반면 애니메이션 관련된 부분만 <head></head>태그 사이로 올려서 적용하는 방법이 있다.

 

 

 

[제이쿼리 실행 순서]

- $(document).ready() : DOM Tree 생성 후 바로 실행

- $(window).load() : 화면이 모두 그려진 후 실행, body 안에 이벤트 적용할 시 실행되지 않을 수 있다.

                          외부 링크나 파일 include 안에 있으면 둘 중 하나만 실행.

                          웹 페이지에 이미지가 많으면 로딩 속도 딜레이.

 

$(document).ready()이 $(window).load() 보다 먼저 실행 된다.

 

 

 

 

 

 

참고 및 출처 : https://jeong-pro.tistory.com/90