렌더링 엔진의 의미와 과정(feat.스크립트 로드)

Web-Publishing/About Web 2021. 6. 16. 18:29

렌더링 엔진

렌더링 엔진의 사전적 의미는

'HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 상호작용적인 시각 표현으로 변환시키는 것'

이라고 설명이 되어있다.

쉽게 말해 우리가 문서로 작성된 코드들을 브라우저에서 이해하는 코드로 재구성하여 우리의 디바이스로 보여주는 프로그램이라고 생각하면 될 것 같다.

렌더링 엔진 종류

파이어 폭스는

모질라에서 직접 만든 게코(Gecko) 엔진을 사용하며,

사파리, 크롬은

웹킷(Webkit) 엔진을 사용합니다.

+ 크롬은 '블링크'엔진으로 넘어갔다고 함. 그리고 삼성 인터넷도 '블링크'엔진을 사용한다고 합니다.

렌더링 엔진 동작 과정

모든 과정은 비동기적으로 진행이, HTML을 파싱이 다 될 때까지 기다리지 않으며 렌더 트리 배치와 그리기 과정을 시작합니다.

보통의 순서는 아래와 같습니다.

1. DOM 트리 구축을 위한 HTML파싱을 먼저 해서 파싱 트리로 DOM트리를 구축합니다.

2. 렌더 트리를 구축

3. 렌더트리 배치

4. 렌더트리 그리기

예를 들어 Webkit은

이런 식으로 순서가 이어진다.

출처 링크:

https://d2.naver.com/helloworld/59361

https://feel5 ny.github.io/2018/05/29/rendering_engine_0/

이렇게 보면 한가지 안나오는게 있습니다.

js파일이 로드되거나 뭐 어떤 과정의 이야기가 없는데.

JS파일은 언제 로드될까

HTML을 파싱하고, 외부 자원인 CSS, JS를 로드 하게 됩니다.

그런데,

HTML을 파싱을 할땐 차례로 파싱을 하게 되는데 <script> 태그를 만나면

JS엔진이 JS파일을 해석하고 실행하는 동안 HTML 파싱은 중단이 됩니다

그리고 외부에 JS파일이 있는경우 네트워크로 자원을 받아올동안 파싱이 중단 됩니다.

이 모델은 오랫동안 지속되어 왔고, HTML4, HTML5의 명세에도 정의가 되어 있다고 합니다.

+ 스타일시트는 이론적으로 DOM트리를 변경하지 않기 때문에 문서파싱을 기다리거나 중지하지 않습니다.

보통은, CSS를 로드 하고 JS가 로드되어도 에러가 나오지 않지만,

반대로 JS가 먼저 로드가 되어 버린다면,

HTML 전체가 파싱되지 않은 상태 + CSS도 파싱이 완료가 되지 않은 상태 에서 JS가 로드가 되면

화면의 레이아웃도 완전히 나오지 않은채 JS가 로드가 되어 UX에 안좋은 영향을 미치게 됩니다.

(쉽게 말씀드리면 사용자 입장에선 화면이 제대로 다 나오지도 않고 팝업이 떠버리거나, 어떤 실행이 시작이됩니다)

그래서 이러한 문제를 잡기위해 BODY태그 끝에 SCRIPT 코드를 배치 하는것을 권장 하고 있습니다.

<html>
<head>
</head>

<body>
---내용-----
<script></script>
</body>
</html>

이렇게 배치를 하게 되면,

HTML 문서를 화면에 표시하는 속도가 빨라지고, 사용자가 화면을 보는데 필요한 문서를 왠만한건 다 로드가 된 시점에해석까지 한 상태이기 때문에 사용자의 불편을 초래하는 현상을 막을 수 있습니다.

JS파일의 로드 시점 -async, defer

스크립트의 일반적인 실행 순서 부터 이해를 하고 가겠습니다.

해당 HTML 파싱을 중단합니다.

아래 그림 처럼 스크립트를 다운받는 시점 부터 HTML의 파싱이 중단되고 실행이 끝난 후에야 파싱이 다시 시작이 되어

HTML의 파싱의 시간이 길어집니다.

(defer, async의 속성이 없는 스크립트는 브라우저가 페이지를 파싱하면서 로드하고 실행을 합니다.)

문서의 <head>영역에 스크립트가 삽입 되거나, 외부의 파일에 정의가 되어 있다면 이벤트 연결은 문서의 로드 시점에 맞게 처리를 해야 할 경우가 생기는데,

이럴때 유용하게 쓸수 있는 asyn, defer를 알아 보고자 합니다.

개발자 도구에서 네트워크 탭으로 가면 위와 같이 보실수 있습니다.

네트워크 탭은

웹 페이지를 구성하는데 쓰이는 모든 자원들을 서버에서 다운받을 때 시간과, 자원들의 이름 등등을 시각적으로 보여 줒보여줍니다

화살표 처럼 DOMContentLoaded와 Load를 확인 할 수 있습니다.

DOMContentLoaded: DOM트리가 완성되는 시점입니다.

Load: 문서의 모든 컨텐츠(img, script, css, 등등)가 로드된 상태를 말합니다.

그래서, DOMContentLoaded와 Load사이, 또는 Load가 로드가 된 시점 이후에도 image 파일들을 로드 하게 됩니다.

async 속성이 추가된 스크립트의 실행

async 속성이 추가된 스크립트는 비동기적으로 실행이 됩니다.

HTML이 파싱을 할 때 async 스크립트를 만나면 파싱을 중지하지 않고 스크립트와 병렬적으로 순서를 이어갑니다.

HTML 파싱과 병렬적으로 이루어지며, 스크립트가 준비될 때 마다 즉시 실행이 가능해집니다.

그래서,

실행의 순서가 다운로드 완료 시점에 결정되므로, 실행 순서가 중요한 스크립트들에 async를 사용 할때는 주의해야합니다.

예를들면

'jquery.js' 파일(100mb)이 있고

jquery로 작성한 'main.js(10mb)'라는 파일이 있고

파일의 용량이 'jquery.js'가 'main.js'보다 10배가량 커서 다운로드의 시점이 'main.js'가 더 빠르다고 가정을 하면

'main.js'은 'jquery.js'가 먼저 로드가 된후에 읽을 수 있기 때문에 의존성이 있는 파일과 async속성을 사용하면

에러가 날 수 있음을 알 수 있습니다.

이처럼 의존적인 파일이라면, async의 사용을 좀 더 신중히 사용을 해야합니다.

*HTML 5 스펙이 async='false'라는 속성이 추가 되어 호출 순서대로 실행되도록 추가가 되었습니다.

기본 default = 'true'입니다.

defer 속성이 추가된 스크립트의 실행

defer 속성은 HTML파싱이 완전히 완료가 되면 실행이 될 수 있게 합니다.

마찬가지로 비동기적으로 다운로드가 되며, async와 차이점은 HTML파싱이 완전히 완료가된 후에

실행이 된다는점 입니다

그리고 호출된 순서대로 실행이 됩니다.

*defer 속성은 src를 가진 script에서만 유효합니다. 즉 외부 스크립트에서만 속성을 지정할 수 있습니다

먼저 선언된 스크립트 다운로드가 늦더라도 호출 순서대로 실행이 됩니다.

그럼 언제 사용을 해야 하나

의존성의 차이를 두고 사용을 합니다.

다른 파일의 의존성 없이 독립적으로 실행이 가능하면 async

다른 파일을 의존하여 실행을 하여야하고 순서가 중요하다가면 defer

출저

https://webclub.tistory.com/630

'Web-Publishing > About Web' 카테고리의 다른 글

DOM이란?(feat.CSSOM) (0)	2021.06.16
렌더트리의 의미와 과정 (0)	2021.06.16
파싱, 파서란? (0)	2021.06.16
브라우저의 동작 원리 (0)	2021.06.16
웹의 기본 동작 원리 . (0)	2021.06.16

ABOUT ME

윤똘이의 웹 이모저모 윤똘이의 웹 이모저모