※ 본 내용은 해당 교재를 참고하여 공부한 내용과 생각을 정리한 글입니다.
https://www.yes24.com/Product/Goods/105608999
바닐라 자바스크립트 - 예스24
실무 역량까지 한 번에 잡을 수 있는바닐라 자바스크립트 이론서자바스크립트는 이제 브라우저를 넘어 웹 애플리케이션뿐만 아니라 마이크로 컨트롤러까지 점점 사용하는 곳이 늘어나고 있다.
www.yes24.com
내가 지금 하고 있는 웹 사이트가 어떻게 동작하는지 궁금하다고 생각한 적이 없는가? 웹 개발자면 어느 정도 궁금증을 갖고 있지 않을까 하고 생각한다. 데이터 통신부터 시작하여 깊게 파고들어서 파악하라는 것이 아니다. 모든 과정을 다 외울 필요는 없다고 생각하지만, 브라우저가 어떻게 웹 페이지를 띄우는지 과정 정도는 머릿속에 있어야 한다고 생각한다.
부록으로 뺀 이유는 솔직히 몰라도 개발하는데 어느 수준까지는 지장이 없다고 생각하기 때문이다.
생각해보면 통신이 이루어지는 과정에서 우리가 사용하는 html, css, 자바스크립트의 형태로 데이터가 전달되는 것은 바람직 하지 못하다. 그리하여 통신에 유리한 형태로 전달을 받아서 그것을 다시 DOM 트리 형태로 변환해주는 과정이 필요하다. 이것이 바로 렌더링(Rendering)이다.
렌더링이란 HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다.
● DOM(Document Object Model), CSSOM(CSS Object Model) 생성
사용자가 브라우저를 통해 웹 사이트에 접속되면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드 받는다. 브라우저가 렌더링하려면 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 한다.
ㆍDOM 트리 생성
1. 변환 : 브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩(ex. UTP-8)에 따라
개별 문자로 변환
2. 토큰화 : 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환
3. 렉싱 : 방출된 토큰은 해당 속성 및 규칙을 정의하는 "객체"로 변환
4. DOM 생성 : 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결
※ 브라우저는 HTML 마크업을 처리할 때 마다 위의 모든 단계를 수행
이렇게 받아온 HTML의 원시 바이트를 위에 과정을 거쳐서 DOM 트리가 된다.
ㆍCSSOM 트리 생성
HTML 마크업 내에 직접(inline) 스타일을 선언할 수도 있지만, head 태그에 외부(external) css 파일을 참조하거나, head 태그에 style 태그(internal)를 정의할 수 있다. HTML과 마찬가지로 외부(external) css 파일에 정의된 스타일과 style 태그에 작성된 스타일을 브라우저가 이해하고 처리할 수 있는 형식으로 변환해야 한다.
DOM 트리와 생성하는 과정은 동일하다.
● 렌더링 트리(Rendering Tree) 생성
DOM 트리와 CSSOM 트리가 만들어지면, 이 둘을 결합해서 렌더링 트리를 생성. 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함된다.
● 레이아웃(Layout) 단계
레이아웃 단계에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 Box 모델이 출력됩니다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환.
● 페인팅 단계
마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하게 된다. 레이아웃 단계에서 모든 계산이 완료되면, 화면에 요소들을 그리게 된다. 이 단계를 “페인팅” 또는 “래스터화” 라고 한다.
● 리플로우(Reflow), 리페인트(Repaint)
사용자가 웹 페이지에 처음 접속하면, 렌더링 과정을 거쳐서 화면에 모든 요소가 그려지게 된다. 이후에 사용자는 다양한 액션을 수행하게 되고, 여기서 발생되는 이벤트로 인해서 새로운 HTML 요소가 추가되거나, 기존 요소의 스타일이 바뀌거나 하는 변경이 일어나게 된다. 이런 변경을 통해 영향을 받게 되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하는데 이것을 리플로우라고 한다.
리플로우는 단순히 변경사항을 반영하기 위해서 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것이고, 실제 이 결과가 화면에 그려지기 위해서는 다시 페인팅 단계를 수행해야 하는데 이것을 리페인트라고 한다.
레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우 수행 없이 바로 리페인트만 수행한다. (리플로우가 일어나면 반드시 리페인트가 일어난다)
ㆍ 리페인트(Repaint)만 일어나는 대표적인 속성들
background, color, text-decoration, border-style, border-radius
ㆍ리플로우(Reflow)가 일어나는 대표적인 속성들
position, width, height, margin, padding, border, border-width, font-size,
font-weight, line-height, text-align, overflow
서버로 요청(웹 페이지 들어가는)하면 나(클라이언트)한테 응답을 함.
이것을 원시 바이트 코드로 받았음.
이것을 변환해서 DOM 트리, CSSOM 트리를 생성.
이 둘을 합체해서 렌더링 트리 만듬.
웹 페이지 설정, 사용자 화면 등을 고려하여 띄어줄 화면 크기 계산. 이것을 절대적인 픽셀값으로 계산함.
완료되면 화면에 요소를 그림.
단순 색상 변경인건 리페인트
단순 색상 변경 등이 아닌 렌더링 트리가 다시 생성되어서 레이아웃 과정이 일어나는건 리플로우(리페인트도 같이 발생)
이정도로 정리하면 되지 않을까 싶다.