[Javascript] 브라우저 동작 원리, 렌더링 트리

1. 브라우저 기본 구조

1. 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 웹페이지가 보여지는 창 등
2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
3. 렌더링 엔진 : 요청한 콘텐츠를 표시하기 위해 요청된 HTML과 CSS를 파싱해 화면에 표시합니다.
4. 통신 : HTTP 요청과 같은 네트워크 호출에 사용됩니다. 독립적인 인터페이스로 각 플랫폼 하부에서 실행됩니다.
5. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행합니다.
6. 자료 저장소 : 자료를 저장하는 계층으로 로컬 스토리지, 쿠키와 같이 모든 종류의 자원을 하드디스크에 저장합니다.

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 인스턴스를 유지해서 독립된 프로세스로 처리합니다(이래서 메모리를 많이 먹는 걸수도?)

 

 

2. 렌더링 엔진

요청받은 HTML, XML 문서, 이미지와 같은 내용을 브라우저 화면에 표시합니다.

파이어폭스는 게코(Gecko) 엔진을 사용하고, 사파리와 크롬은 웹킷(Webkit) 엔진을 사용합니다.(많이 들어본?)

 

동작과정은

위와 같이 HTMl 문서를 파싱하고, [콘텐츠 트리] 내부에서 태그를 DOM 노드로 변환합니다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱합니다.

위에서 파싱한 정보를 바탕으로 스타일 정보와 HTML 표시 규칙이 포함된 렌더 트리를 생성합니다.

렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데, 정해진 순서대로 화면에 표시됩니다.

렌더 트리 생성이 끝나면 배치가 시작되는데, 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미합니다.

*파싱, 파서: 분석하는 것이라는 의미로, 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미합니다. 파싱 결과는 문서 구조를 나타내는 DOM 노드 트리로 구현됩니다.

 

 

 

 

3. 웹킷의 동작 과정

 

 

브라우저가 문서(HTML)을 해석하면서 하는 수행하는 과정

• 불러오기(loading) : HTTP 모듈 또는 파일시스템으로 전달받은 리소스 스트림(resource stream)을 읽는 과정으로 로더(Loader)가 이 역할을 맡고 있습니다. 로더는 단순히 읽기만 하는 것이 아니라 데이터를 읽었는지 확인하고, 팝업창을 열지 말지, 파일을 다운로드 받을지를 결정합니다.
• 파싱: 파싱은 DOM(Document Object Model)트리를 만드는 과정으로 HTML, XML 파서 2개의 파서를 가지고 있습니다. XML 파서는 XML 형식을 따르는 SVG, MathML등을 처리하는데 사용합니다.
• 렌더링 트리 : DOM 트리와 다르게 화면에 표시하기 위한 위치와 크기 정보, 그리는 순서 등을 저장하기 위한 별도의 트리 구조를 말합니다.

 

일반적으로 브라우저가 HTML 문서를 만나게 되면 HTML을 파싱하고 외부 자원인 css와 js 파일을 로드합니다.

Javascript는 전달된 시점에서 실행되고, DOM 트리의 구축을 완료한 이후에 이미지 파일 및 플래시 등의 외부 리소스를 로드하면서 모든 작업이 완료됩니다.

 

여기서 스크립트를 만나게 될 경우, <script> 태그를 만나면 스크립트가 해석 및 실행되는 동안 문서의 파싱은 중단되게 됩니다. 또한 스크립트가 외부에 있는 경우 네트워크로부터 자원을 가져와야 하는데 이 또한 실시간으로 처리되고 자원을 받을때까지 파싱은 중단됩니다.

*css는 이론적으로 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단하지 않습니다.

 

 

 

 

4. 자바스크립트 로드 async, defer 속성

앞서 살펴보았던 브라우저가 HTML을 해석하는 과정 대로 진행하게 되면

1번 -> 2번 -> 3번 순서로 코드가 실행됩니다.

이때, script가 해석 및 실행되는 동안 문서의 파싱이 중단되기 때문에, 2번에서 2초~3초가 걸릴 경우 홈페이지 전체적인 로딩이 늦어진다고 느껴지게 됩니다.

 

이런 경우에 async, defer 속성을 이용합니다.

Async : html 렌더링을 멈추지 않고 동시에 js 파일을 다운로드하고 다운로드가 끝난후에 자바스크립트를 실행합니다.

Defer : html 렌더링을 멈추지 않고 동시에 js 파일을 다운로드하고 html 렌더링이 끝난 후에 자바스크립트를 실행합니다.

 

 

 

참고

https://webclub.tistory.com/m/630

https://realmojo.tistory.com/m/96