-
[WEB] 웹 브라우저 HTML문서 렌더링 과정개발 끄적끄적/Web 2020. 5. 23. 21:49반응형
개발한 웹 페이지가 느려서? 마음 고생 많이 하셨을 겁니다.
더 빠른 웹 페이지를 만들기 위해서는 무엇을 해야할까?
그래서 지금부터 웹 브라우저에서 HTML이 어떠한 방법으로 실행이 되는지 간단하게 알아볼 예정입니다.
렌더링이란?
컴퓨터 프로그램을 사용하여 모델(또는 이들을 모아놓은 장면인 씬 파일)로부터 영상을 만들어내는 과정으로
간단히 설명하면 어떠한 웹 페이지를 접속 시, 그 페이지를 화면에 그려주는 것을 말합니다.
렌더링 엔진
브라우저 별로 모두 같은 렌더링 엔진을 사용하고 있지 않습니다.
브루우저 별로 어떤 렌더링 엔진을 사용하는지 보고 싶으면 이전 포스팅을 확인해 주세요!
브라우저 소개 및 역할 그리고 기능
우리가 항상 사용하고 있는 브라우저! 과연 무엇을 해주며 어떤 차이가 있는지 간단하게 알아봅니다. 브라우저의 역할 사용자가 선택한 자원(URL)을 서버에 요청하고 받아 화면에서 표시한다. 주
gdbagooni.tistory.com
각기 다른 엔진을 사용함에 따라서 개발자가 개발한대로 반영이 안될 수도 있습니다.
각각의 브라우저에서 호환성 문제가 없는지 항상 검사하여야 합니다.
렌더링 과정
-
DOM 트리 구축
-
CSS 결정
-
랜더 트리 구축
-
렌더 트리 배치
-
렌더 트리 그리기
1. DOM 트리 구축
<html> <head> <title>테스트</title> </head> <body> <p> Hello World </p> <div> <img src="example.png" /> </div> </body> </html>HTML 태그들을 파싱하여 DOM 트리를 구성합니다.
DOM은 데이터의 표현식으로 모든 HTML 태그에는 그에 상응하는 노드가 있으며,
태그 사이에는 텍스트 데이터가 포함될 수 있습니다. 이 또한 텍스트 노드의 표현식 입니다.2. CSS 생성
외부 CSS 파일과 함께 포함된 스타일 요소도 파싱합니다.
CSS는 단계적으로 처리되며, 가장 마지막 단계의 스타일 정보가 이전 스타일 정보보다 우선으로 적용됩니다.
스타일 정보는 다음과 같이 3단계로 나누어 처리됩니다.
-
브라우저 자체에 포함된 기본 스타일 정보(User Agent 스타일시트)
-
사용자 정의 스타일(외부 파일 또는 내부 정의 스타일)
-
HTML 태그에 style 속성을 사용해 기술되는 인라인 스타일 정보
<!-- 외부 파일 --> <link rel="stylesheet" type="text/css" href="/css/main.css"> <!-- 내부 정의 스타일 --> <style type="text/css"> body{background-color:#ffffff; background-image:none; background-reapeat:repeat;} </style>3. 렌더 트리 구축
DOM 트리와 스타일 구조를 통해 렌더 트리를 생성합니다.
렌더 트리는 DOM 트리와는 다르게 각 노드에 스타일 정보가 설정돼 있고 화면에 표현되는 노드로 구성됩니다.
어떤 노드는 스타일이 'display:none'으로 설정돼 있으면 해당 노드는 렌더 트리에 포함되지 않습니다.
DOM 트리와 렌더 트리의 노드는 서로 1:1로 대응되지 않습니다. DOM 트리의 구성원 가운데 일부 노드(<head>, <title>, <script> 등)는 화면에 표현되는 노드가 아니므로 DOM 트리의 구성원이지만 렌더 트리의 구성원은 아닙니다. 또한 DOM 트리의 단일 구성원이지만 렌더 트리에서는 여러 개의 노드로 구성되는 경우도 있습니다. <br> 태그로 인해 줄이 바뀌거나 노드 내에서 자연스럽게 줄이 바뀐 경우 등 단일 텍스트 노드가 여러 줄로 출력되는 경우가 여기에 해당합니다.
렌더 트리에서 각 노드는 '프레임(frame)'이나 '박스(box)'로 불리며, CSS박스 속성 정보가 있습니다.
4. 렌더 트리 배치
렌더 트리 생성이 끝나면 배치가 시작됩니다. 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미합니다.
이 과정은 CSS 비주얼 렌더링 모델(CSS Visual Rendering Model)에 의해 제어되며, 루트에서 하위 노드로 반복되며 진행됩니다.또한 브라우저는 레이아웃 계산을 출력되는 화면의 해상도보다 높은 해상도로 처리합니다. 그래서 사용자가 화면을 확대 또는 축소했을 경우를 대비해 추가적인 계산없이 원본 크기 상태의 픽셀 좌푯값과 매핑해 배율에 상관없이 올바르게 배치되게 합니다.
렌더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는 과정
5. 렌더 트리 그리기이제 렌더링 엔진은 요소가 어디에 표현돼야 할지 알고 있으므로 렌더 트리를 순회하면서 페인트 함수를 호출해 노드를 화면에 표현합니다.
일련의 과정들은 점진적으로 진행됩니다.
렌더링 엔진은 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하며 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작합니다. 서버로 부터 나머지 내용을 전송되기를 기다리지 않으며 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것입니다.
반응형'개발 끄적끄적 > Web' 카테고리의 다른 글
[WEB] 브라우저 소개 및 역할 그리고 기능 (0) 2020.05.23 -