반응형
자바스크립트 처리 과정
출처 : https://www.html5rocks.com
렌더링 엔진 : 웹 서버로부터 응답 받은 내용을 UI에 표현한다.
자바스크립트 해석기 : 자바스크립트 코드를 파싱하고 실행한다.
- 렌더링 엔진
- 클라이언트는 웹 서버가 응답한 HTML 문서를 HTML과 CSS로 파싱하여 화면을 구성한다.
- HTML 파싱 후 DOM 트리(Document Object Model)를 생성한다.
- DOM 트리란 HTML 문법을 브라우저에서 사용할 수 있는 객체 데이터로 생성한 것이다.
- 렌더링 엔진은 아래와 같이 HTML 각 태그들로 DOM 트리를 구성하여 브라우저가 코드를 이해하고
사용할 수 있는 구조로 변환한다.
- 브라우저마다 다른 렌더링 엔진을 사용한다. (IE-Trident, chrome-Webkit FireFox-Gecko)
자바스크립트 처리 순서
<!DOCTYPE html> <html> <head> <title>Document</title> <script src="main.js"></script> </head> <body></body> </html>- 렌더링 엔진이 HTML 파싱 중에 script 태그를 만나면 HTML 파싱을 중단한다.
- 자바스크립트 엔진은 자바스크립트 파일을 다운받고 실행한다.
- 스크립트 실행 후 렌더링 엔진은 다시 HTML 파싱을 시작한다.
- 단점
- 큰 용량의 자바 스크립트인 경우 페이지 로딩을 지연시킨다.
- 스크립트가 css보다 먼저 로딩되면 스크립트가 로딩되는 시간동안은 css 요소를 제공할 수 없다.
- DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.
- 위 단점 때문에 head 태그가 아닌 body 요소의 가장 아래에 자바스크립트를 위치시켜
페이지가 준비된 다음 실행하도록 한다. - 그러나 자바스크립트에 의존적인 페이지라면 정상적인 페이지를 보기전까지는 계속 기다려야 한다.
async
<html> <head> <title>Document</title> <script async src="a.js"></script> </head> <body></body> </html>- 비동기(Asynchronous) 실행 방식이며 async 속성은 외부 스크립트 파일만 사용 가능하다.
- 렌더링 엔진이 html 파싱 하면서 script 파일을 다운로드 한다.
- script 파일 다운로드가 완료되면 html 파싱을 중단하고 자바스크립트 엔진이 스크립트를 실행한다.
- 장점
- 자바스크립트 파일 다운 시간을 절약할 수 있다.
- 단점
- 자바스크립트 파일이 순서에 의존하면 문제가 발생한다. 예를들어 a.js가 실행되고 b.js가 실행되어야 하는데
b.js가 먼저 실행되는 경우이다. - html이 아직 로딩되지 않았을 때 DOM을 조작하면 에러가 발생한다.
- HTML 파싱 중 자바스크립트가 실행되면 HTML 파싱을 일시 중단하기 때문에 페이지 로딩이 지연된다.
defer
<html> <head> <title>Document</title> <script defer src="a.js"></script> <script defer src="b.js"></script> <script defer src="c.js"></script> </head> <body></body> </html>- defer("연기하다, 미루다")
- html을 파싱하는 동안 script를 다운로드 한다.
- html이 모두 파싱되면 다운받은 자바스크립트를 실행한다.
- 장점
- html 파싱을 먼저해서 페이지를 보여주기 때문에 페이지 로딩 지연 시간이 적다.
- html 파싱이 끝난 시점에 미리 자바스크립트를 실행할 준비를 하고 있기 때문에
시간 측면에서 절약되며 이용자가 브라우저를 보는데 문제가 발생할 일도 적다.
요약
async : 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행된다. defer : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행된다. none : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행한다.
※ 참고
https://it-ist.tistory.com/110
https://helloinyong.tistory.com/286
https://hsp0418.tistory.com/144
반응형
'프로그래밍 > 웹' 카테고리의 다른 글
| Jquery 동적 생성 태그 이벤트 부여 (0) | 2021.02.28 |
|---|---|
| Python Flask 요청 처리 예제 (0) | 2021.02.20 |
| Content-TYPE 헤더와 MIME-TYPE (0) | 2021.02.13 |
| 스프링 실행 과정 및 요청 처리 순서 (0) | 2021.02.06 |
| Spring MVC 개발 프로세스 (0) | 2021.01.31 |
