티스토리 뷰

프로그래밍/Front end

[Front end] JavaScript 브라우저 HTML 동작 방식과 스크립트 선언

Reference M1 2020. 12. 15. 10:26

 

HTML 파싱&렌더링

1. DOM 트리 구성
HTML 파서로 파싱 해서 HTML 데이터를 메모리에 1:1로 로딩하는데, 이때 모든 데이터는 트리 구조로 처리된다. 이 자료구조의 최상위를 document라고 하고, 이렇게 구성된 메모리의 데이터를 DOM(document Object Model)이라고 한다.

2. Render 트리 구성
화면에 보이는 시각적인 구성 요소들을 분류해 두고 화면에 보일 수 있도록 데이터를 담는 과정이라고 할 수 있다.

3. Render 트리 배치
이전 과정에서 분류한 데이터를 화면의 어디에 두어야 할지 배치하는 작업이다. 이 작업을 Layout을 구성한다고 한다.

4. Render 트리 페인팅
Layout을 모두 구성하고 그 결과를 UI 백엔드를 통해서 화면에 출력하는 과정이다. 이 작업을 Painting이라고 한다.

 

자바스크립트가 코드의 마지막 부분에 위치하는 이유

자바스크립트는 실행 자체가 모든 작업을 멈추고 처리를 하는 방식으로 동작하기 때문에 DOM이나 Render 트리 구성을 완료한 다음에 위치하는 것이 좋다. </body> 태그를 닫기 직전에 선언하는 것이 일반적이다.
중단점을 만나면 화면 표출 렌더 시간이 지연된다. 또한 DOM 트리가 생성되기 전에 DOM의 조작을 시도하기도 한다.

 

async & defer

async, defer는 Boolean타입의 속성 값이기 때문에, 선언하는 것 자체로 true의 값을 갖는다. async를 만나면 병렬로 js파일을 다운로드를 하며 다시 HTML를 파싱 하다가 다운로드가 완료되면 파싱을 멈추고 다운로드된 js를 실행하게 된다. defer 역시 병렬로 js파일을 다운로드하며, HTML파싱을 모두 완료한 후 js를 실행한다는 차이점이 있다.

async

  • load-first order. 문서 내 순서와 상관없이 먼저 다운로드된 스크립트가 먼저 실행된다.
  • 비동기 스크립트는 HTML 문서가 완전히 다운로드되지 않은 상태라도 로드 및 실행될 수 있다. 스크립트 크기가 작거나 캐싱 처리 되어있을 때 혹은 HTML 문서 길이가 아주 길 때 이런 일이 발생한다.

defer

  • 문서에 추가된 순서로 실행된다.
  • 지연 스크립트는 문서 다운로드와 파싱이 완료된 후에, DOMContentLoaded 이벤트 발생 전에 실행된다.


CSS가 HTML 문서의 위쪽에 위치하는 이유

CSS를 이용해 렌더링 엔진이 화면에서 어떤 방식으로 처리하는가 기준을 빨리 제공할수록 Render 트리를 구성하기가 쉬워진다. 브라우저가 전달받은 HTML은 항상 맨 위에서부터 차례대로 처리된다. 따라서 렌더링 엔진이 참조할 수 있는 부분을 미리 파악할 수 있다.
실제로 렌더링 엔진이 본격적으로 작업하는 부분이 바로 화면에 나오는 <body> 태그이기 때문에 특별한 경우가 아니라면 <body> 태그가 나오기 전에 CSS를 지정하는 것이 일반적이다.

 

스크립트 선언

<script type="text/javascript">
...
</script>

<script type="text/javascript" src="링크주소 및 파일 위치"></script>
<script type="text/javascript" async src="링크주소 및 파일 위치"></script>
<script type="text/javascript" defer src="링크주소 및 파일 위치"></script>

CSS 선언

<style type="text/css">
...
</style>

<link rel="stylesheet" type="text/css" href="링크주소 및 파일 위치">

 

'프로그래밍 > Front end' 카테고리의 다른 글

[Front end] React 절대경로 설정  (0) 2021.02.04
[Front end] textarea 자동 높이 조절  (0) 2021.01.13
[Front end] JavaScript 공통 Ajax Call  (0) 2020.08.30
[Front end] range slider click event block  (0) 2020.08.10
[Front end] contenteditable change event scroll controll  (0) 2020.08.08
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함