브라우저 렌더링 과정 + 자바스크립트 (browser rendering process & javascript)

 

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다.

자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다.

자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다.

 

 

브라우저의 주요 구성 요소.

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시.
4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행.
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
7. 자료 저장소 - 자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. 

 

 

렌더링 엔진 동작 과정

http://---.com 

주소창을 통해 자원의 주소(URI) 를 받아오면 그것을 바탕으로 브라우저는 서버에 자료를 요청합니다. (request)

 

서버는 브라우저로 자료를 회신(response) 하고 브라우저는 자료를 (loading) 합니다.

브라우저는 html을 한줄 한줄씩 읽어나가면서 브라우저가 이해할 수 있는 자신들만의 오브젝트로 변환합니다. (scripting)

 

 

= 브라우저는 렌더링 엔진을 통해 HTML 문서의 태그들을 각각 노드로 변환합니다. *파싱.

 

*파싱

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미합니다.

2+3-1 표현식을 파싱한 예시

 

 

브라우저에서 html 파일을 분석해서 DOM요소로 변환했는데 그렇다면 CSS는?

브라우저에서 DOM을 만들게 되면 우리가 만든 CSS를 파싱, 병합해서 CSSOM 이라는 것을 만들게 됩니다.

cascading rule(낙수효과 - html의 폰트를 14라고 했다면 그 아래 body, span도 폰트가 14로 지정되게 된다)

을 따르며, 모든 것들이 계산된 스타일 즉 computed style.

 

 

그리고 스타일 정보와 HTML 표시 규칙은 "렌더 트리" 라고 부르는 또 다른 트리를 생성합니다.

이 때 사용자 눈에 보이지 않는 head부분과 display:none 부분은 제외됩니다. (visibility : hidden, opacity : 0 은 아님)

 

 

 자바스크립트는?

HTML 문서를 파싱한 결과물로서 생성된 DOM은 HTML 문서의 구조 정보뿐 아니라 HTML 요소와 스타일 등을 변경할 수 있는 프로그래밍 인터페이스로서 DOM API를 제공합니다. 자바스크립트 코드에서 DOM API를 사용하면 이미 생성된 DOM을 동적으로 조작할 수 있습니다.

 

CSS 파싱 과정, (link rel="stylelsheet" href="./css.css")를 만났을 때 처럼. 렌더링 엔진은 자바스크립트 파일을 로드하는 <script> 태그나 자바스크립트 코드를 콘텐츠로 담은 <script> 태그를 만나면 DOM 생성을 일시 중단합니다.

 

그리고 script 태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 서버에 요청하여 로드한 자바스크립트 파일이나 script 태그 내의 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘깁니다.

 

자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있습니다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다.

이후 자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML 파싱이 중단된 지점부터 HTML 파싱 및 DOM 생성을 재개합니다. 자바스크립트 파싱과 실행은 브라우저의 렌더링 엔진이 아닌 자바스크립트 엔진이 처리합니다.

 

자바스크립트 엔진은 자바스크립트 코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어(low-level language)로 변환하고 실행하는 역할을 합니다. 구글 크롬와 Node.js의 V8, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore 등 다양한 종류가 있습니다.

자바스크립트 엔진은 ECMAScript 사양을 준수합니다.

 

자바스크립트 엔진은 자바스크립트를 해석해 AST(Abstract Syntax Tree, 추상적 구문 트리)를 생성하며, 이를 기반으로 인터프리터가

실행할 수 있는 중간 코드인 바이트코드를 생성하여 실행합니다.

 

 

 

 

여기까지의 과정 렌더링 트리를 만드는 데까지의 과정을 construction 파트라고 합니다. 

어떻게 하면 렌더링 트리를 빠르게 만들 수 있을까요?

DOM 요소가 작을수록 CSS 규칙이 작을 수록 tree가 작아지기 때문에 성능이 개선됩니다. 

불필요한 태그 div, wrapping 클래스와 같은 것들을 자제 해야 좋습니다. 최대한 요소들을 작게 만드는 것이 중요합니다. 

 

 

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

 

 

layout

만들어진 렌더링트리를 기반으로 이 요소는 이 위치에 이 정도 크기로 배치하겠다. 

각각의 요소들의 얼만큼의 크기로 어떤 위치에 표시 할 건지 계산하는 단계입니다.

 

paint

레이아웃에 따라, 즉 어떤 위치에 요소들을 어떻게 배치할 계획이냐에 따라서

화면의 각 부분들을 파트별로 잘게 나누어서 이미지를 준비해 놓는 것.

컴퓨터가 이해할 수 있는 이미지를 비트맵 데이터 형태로 변환하여 준비해 두는 것입니다. (아래그림 참고)

('아 왼쪽 위에 얘네들은 비슷한 영역이니까 같이 묶어 두어야겠다')

 

composition

준비된 레이어들을 표기하는 것

 

 

그냥 바로 전체화면을 그리지 않고 굳이 paint라는 작업을 통해 파트를 나누고 준비해 두는 이유는 브라우저의 성능 개선을 위해서 입니다.

이 단계가 없다면, 요소의 위치나 크기, 투명도의 변화가 생기게 될 때 한 부분을 바꾸기 위해 다시 전체적으로 그림을 그려야 하게 됩니다. 하지만 paint 단계를 통해 화면이 여러 부분으로 나뉘어져 있다면 그 부분만 수정하면 되기 때문에 성능이 좋아질 수 있습니다. 

 

 

* CSS: will-change 라는 속성이 있는데, 이 요소가 바뀔것이다. 라고 브라우저에 먼저 얘기해 두는 것입니다. 그러면 브라우저에서 이 요소는 변화될 예정이라고 알아듣고 그 요소에 새로운 레이어를 추가해 두게 됩니다. 하지만 will change를 너무 남발하면 불필요한 레이어가 너무 많이 생기게 되어 이것 또한 좋지 않습니다. 

 

Operation 파트에서 성능 개선을 위해 중요한 점은 paint가 자주 일어나지 않도록 만드는 것 입니다.

어떤 박스가 움직였을때 composition만 다시 하면되는지, paint 작업부터 다시해야 하는지, 아니면 layout자체를 다시 해야 하는지.

최대한 적게 만드는게 중요합니다. 박스를 움직임으로써 다른 주변에 있는 요소들의 포지션이 바뀌게 되면 브라우저는 Layout을 처음부터 다시 시작해야 하기 때문에, 다시 paint하고 composition을 이어서 또 해야하기 때문에 성능이 좋지 않다고 할 수 있습니다.

 

 

일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요합니다. 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작합니다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것입니다.

 

 

https://baeharam.github.io/posts/javascript/jshow-javascript-works/

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

https://academy.dream-coding.com/courses/browser101