웹 페이지의 랜더링 과정 1편

참고 블로그 : http://12bme.tistory.com/140

참고 블로그에 워낙 잘 설명되어 있어서 따라 포스팅을 쓰지 말까 하다가

그래도 내가 정리한 글이 더 기억에 남기에 글로 써본다. 🙏

우선 렌더링이란, 사전에서는 아직은 실제로 제품화되어 있지 않은, 

계획 단계에 있는 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도 라고 설명하고,

 블로그에서는 "논리적인 문서의 표현식을 그래픽 표현식으로 변형 시키는 과정" 이라고 되어있다.

뭔가 딱딱한 문장에 처음엔 음..? 하다가 그냥 내가 생각해서 쉽게 풀어서 설명하자면

html, css등 글로 ( 코드로 ) 적어 논 것이 웹 사이트에 나타나게 되는 과정이다.

렌더링은 총  5단계 로 이루어 진다.

( + html을 dom으로 만들기 위한 파싱 작업이 이루어진 후의 5단계의 작업이다. )

첫번째 단계부터 차근 차근 살펴 보자 :-)

.

.

① DOM 트리 생성

예전에 jQuery를 공부하기 전에 DOM이 뭔지 언급한 적이 있다.

DOM이 무엇인지 모른다면 아래에 링크건 글을 보면된다.

참고 - [Web Programming] - JQuery를 공부하기 전 자바스크립트 DOM에 관해 알아보자 !

말그대로 노드를 트리형태로 나타내는 것.

그림이 더 이해하기 쉬운것 같아 그림으로 설명을 대체하겠다.

② 스타일 구조체 생성

첫번째와 같이 트리가 완성 됐다면 스타일 구조체를 생성한다.

브라우저의 자체 스타일, 사용자 정의 스타일 ( 내가 만든 CSS ), html태그의 style 속성 단계로 처리된다.

후에 처리되는 스타일을 따르게 된다.

( css에 높이를 줘도 html 태그에 스타일 속성에 높이를 지정했다면 후자가 적용 된다. )

③ 랜더 트리 생성

첫번로 만든 DOM트리와 그다음 스타일 구조를 더해 렌더 트리를 만든다.

렌더 트리는 노드에 스타일 정보가 설정돼 있고 화면에 표시되는 노드다.

( 따라서, display속성이 none으로 되어 있다면 이는 랜더 트리에 속하지 않는다. 또한 head body태그 또한 동일)

④ 레이아웃 처리

스타일을 적용했으니 이제 노드의 크기 계산과 해당 위치에 배치를 해야한다.

해당 작업이 4번이다.

⑤ 페인트

마지막으로 페인트 ( Paint ) 작업이다. 영어 뜻 그대로다.

스타일, 크기, 배치가 끝났으니 화면에 노드를 표현하는 작업이다.

.

.

사실 공부를 하면서 매번 드는 생각은 쉬운걸 장황하게 설명하는 것 같다. 😣

이름도 심지어 어렵기도 하다..

랜더링또한 정리된 노드와 정리된 스타일을 합친 친구에 크기를 정해주고 배치 시킨걸 보여주는 것 아닌가!

당연한 이야기같지만 또 이렇게 생각은 안하게 되는 것같다.

.

.

이어서, 만약 웹 페이지의 화면의 일부가 변경 될시 '리플로'와 '리페인트' 에 대해 알아보겠다.