GitHub - junsu1220/TIL: Today I Learned.
Today I Learned. Contribute to junsu1220/TIL development by creating an account on GitHub.
github.com
브라우저?
- web browser 또는 browser 는 웹 서버에서 이동하며, 쌍방향으로 통신하고, HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어입니다.
브라우저의 핵심 기능
- 브라우저의 주요 기능은 웹 자원을 브라우저 화면상에 표현해 주는 기능을 합니다.
- 서버에 리소스를 요청하고 수신하는 과정을 수행합니다.
- HTML과 CSS에 따라 HTML 파일을 해석하여 표시하며, 이는 W3C에서 정합니다.
- 자원의 주소는 URI에 의해 정해집니다.
- 자원은 HTML, PDF, 이미지 혹은 다른 형태입니다.
- 웹브라우저가 웹서버에 웹페이지 요청을 하면 웹서버는 웹페이지 응답을 합니다.
- 서버가 브라우저에게 전달한 응답인 HTML문서를 브라우저는 읽어들이고 해석한 후 사용자(client)에게 보여줍니다.
브라우저의 구조
- 사용자 인터페이스
- 주소표시줄, 이전/다음 버튼, 북마크 메뉴 등, 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분입니다.
- 브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
- Data storage 컴포넌트와 통신할 수 있습니다.
- 렌더링 엔진
- 요청한 콘텐츠를 표시합니다.
- 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시합니다.
- 웹서버로부터 응답 받은 내용을 UI상에 나타내줍니다.
- 플러그인의 도움으로 PDF, XML등의 문서도 나타낼 수 있습니다.
- 통신(네트워크)
- HTTP 요청과 같은 네트워크 호출에 사용됩니다.
- 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됩니다.
- 웹서버와 통신이 가능하게 해줍니다.
- 네트워크 작업의 처리를 담당합니다.(HTTP요청, WebSocket, WebRTC, ...)
- UI 백엔드
- 콤보 박스와 창 같은 기본적인 장치(위젯)를 그립니다.
- 플랫폼에서 명시하지않은 일반적인 인터페이스로서, OS사용자 인터페이스 체계를 사용합니다.
- UI 구동이 가능하게 합니다.
- 자바스크립트 해석기
- 자바스크립트 코드를 해석하고 실행합니다.
- 전통적으로는 런타임 인터프리터가 자바스크립트를 실행하는데 사용되었으나, 현재는 모든 주요 브라우저는 Just-In-Time Complation 방식의 JS Engine을 사용합니다.
- 인터프리터 방식은 프로그램을 실행중에 언어를 기계어로 번역하면서 기능을 실행하는 반면, JIT Complation 방식은 실행중에 번역한 기계어를 캐싱하면서 중복되는 기계어의 생성을 방지합니다.
- 자료저장소(데이터 스토리지)
- 이 부분은 자료를 저장하는 계층입니다.
- 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장합니다.
- HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있습니다.
- 쿠키와 같은 로컬 데이터를 저장합니다.
- HTTP Cookies, Browser Caching, Web Storage, Indexed DB ...)
렌더링 엔진
- 렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시합니다.
- 주로 HTML, XML, 이미지를 표시하고, 확장기능을 이용하면 PDF와 같은 다른 유형의 문서도 표시할 수 있습니다.
- 렌더링 엔진 종류
- 게코 엔진(Gecko) - 파이어폭스에서 사용
- 웹킷 엔진(Webkit) - 사파리, 크롬이 사용
렌더링 엔진의 동작 과정
- 렌더링은 화면에 나타낼 수 있는 모델(도형)의 정보(색깔, 크기, 위치, 투명도 ...)들을 가지고 적절한 계산을 통해 실물을 만들어낸다고 할 수 있습니다.
- 렌더링 엔진은 서버로부터 받은 지원을 렌더링 과정을 통해 화면에 나타냅니다.
- HTML + CSS 외에도 XML, PDF, JSON 등의 문서들도 나타낼 수 있지만 핵심적인 동작인 HTML + CSS를 렌더링 하는 과정을 다룹니다.
- 렌더링 엔진은 웹서버로부터 전달받은 HTML문서를 맨 처음 네트워크 레이어에서 불러옵니다. 그리고 아래와 같은 기본적인 flow를 거칩니다.
- HTML파일이 실시간으로 파싱되면서 파싱된 부분이 DOM 트리를 구성합니다. 동시에 CSS파일도 파싱되면서 CSSOM트리를 구성합니다.
- DOM트리가 진행됨과 동시에 DOM트리와 CCSOM트리를 결합하여 렌더트리를 생성합니다. 렌더트리는 시각적 스타일 정보와 element가 어떤 순서로 화면에 표시되야하는지에 대한 정보를 포함합니다.
- 렌더트리의 노드들이 배치과정을 거칩니다. 렌더트리가 막 생성되었을떄에는 size, position 값이 할당되지 않습니다. 배치 과정에서 계산을 통해 이 값들이 할당되면서 렌더트리의 모든 노드가 정확한 좌표를 얻게 됩니다. 각 노드에 대해 화면에서의 정확한 위치와 크기를 계산합니다.
- 렌더트리를 순회하면서 각 노드들은 paint 메서드를 호출해 UI Backend를 함께 사용하여 화면에 그립니다.
- 위 과정들은 점진적으로 진행됩니다.
- 렌더링엔진은 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작합니다.
- 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시합니다.
- 모든 과정이 부분적이고 비동기적으로 진행되는 프로세스입니다.
1 HTML 파싱 후 DOM트리 만들기
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
- 렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서(Source code)를 파싱(Parsing)하여 각 요소들을 DOM Tree(Contents Tree)의 각 DOM노드들로 전환합니다.
- DOM이란 Document object model의 준말로 마크업 형태의 HTML문서를 오브젝트 모델의 형태로 바꿔놓은 것입니다.
- 당연히 HTML문서의 각 마크업과 DOM의 각 요소는 1:1 매칭됩니다.
- HTML, Body 부모 태그 안에 단락을 나타내는 p 태그, 한 요소를 나타내는 div 태그가 자식 태그로 존재합니다.
- 이 코드를 DOM Tree로 전환할 때 아래와 같이 구성됩니다.
- HTML 페이지는 바이트를 문자로 변환 -> 토큰화 -> 노드로 변환 -> DOM 트리 생성 과정을 거치게 됩니다.
- DOM 트리는 렌더링될 때 어떻게 표시할지는 알려주지 않는데, 그 정보는 CSSOM이 알려주게 됩니다.
2 CSSOM(CSS Object Model) 트리 만들기
- 브라우저가 DOM을 생성하는 동안 head 섹션에서 style.css를 참조하는 문서의 링크 태그를 만나게 됩니다.
- 브라우저는 이 리소스에 대한 처리를 요청하고, 요청의 결과는 다음과 같습니다.
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
- CSS 또한 HTML과 마찬가지로, 바이트를 문자로 변환 -> 토큰화 -> 노드로변환 -> CSSOM 트리 구축과정을 거치게 됩니다.
- CSSOM이 트리구조를 갖는 이유?
- 스타일은 하향식으로 규칙을 적용하게 됩니다.
- 페이지의 객체에 있는 스타일을 계산할 때, 브라우저는 해당 노드에 적용 가능한 가장 일반적인 규칙에서 더욱 구체적인 규칙을 적용하게 됩니다.
- 위의트리는 완전한 CSSOM 트리가 아닙니다.
- 브라우저가 기본적으로 제공하는 user agent styles에서 스타일 시트가 재정의 하도록 결정한 스타일만 표시합니다.
- CSSOM이 트리구조를 갖는 이유?
3 렌더트리 만들기
- 먼저 DOM트리와 CSSOM트리를 결합하여 렌더트리를 형성합니다.
- DOM 트리가 웹 상에 나타날 내용(Content)를 구성한다면 렌더 트리는 시각적 요소, 어떻게 나타날지 그 스타일을 지정합니다.
- 렌더트리는 색상, 차원 등 시각적 지침들을 담은 정사각형들로 구성됩니다. 그 정사각형들은 스크린에 맞는 순서대로 정렬되어야 합니다.
- 렌더트리에는 페이지를 렌더링 하는데 필요한 노드만 포함됩니다.
- 렌더트리는 페이지에 표시되는 모든 DOM 컨텐츠와 각 노드에 대한 모든 스타일 정보를 가지고 있습니다.
- 시각적이지 않은 DOM요소들은 렌더트리에 삽입될 수 없습니다.
- 렌더링 트리 생성 과정
- DOM 트리의 루트에서 시작하여 순회한다. -렌더링이 되지 않는 script, meta 태그와 같은 노드들은 렌더링 트리에서 생략됩니다. -일부 노드는 CSS를 통해 숨겨지며, 렌더링 트리에서도 생략됩니다. 예를 들면 'display:none' 속성을 갖는 노드는 렌더링 트리에서 생략됩니다.
- 표시된 각 노드에 대해 매칭되는 CSSOM규칙을 찾고, 적용합니다.
- 표시된 노드를 컨텐츠와 스타일과 함께 내보냅니다.
4 렌더 트리 레이아웃 만들기
- 레이아웃을 만든다는 것은 각 노드들에게 스크린의 어느 공간에 위치해야 할지 각각의 값을 부여하는 것을 의마합니다.
- 뷰포트 내에서 노드의 정확한 위치와 크기를 계산합니다.
- 페이지 내에서의 각 객체의 정확한 위치와 크기를 계산하기 위해, 브라우저는 렌더릴 트리의 루트에서 시작하여 트리를 순회합니다.
- 레이아웃 과정의 결과는 Box Model입니다. 박스 모델은 뷰포트 내에서 각 노드의 정확한 위치와 크기 정보를 담고 있습니다.
- 모든 상대적인 측정값은 스크린화면에서의 절대적인 픽셀로 변환됩니다.
5 렌더 트리 페인팅
- 마지막으로 렌더트리의 각 노드를 화면에서의 실제 픽셀로 변환합니다.
- 렌더트리가 만들어져 레이아웃이 구성되었다면, UI 벡엔드가 동작하여 각 노드들을 정해진 스타일 및 위치값대로 화면에 배치합니다.
- 더 나은 UX(User experience)를 위해, 렌더링 엔진은 각 콘텐츠를 가능한한 빨리 스크린에 띄워야 합니다.
- 따라서 모든 HTML 요소들을 렌더링 엔진으로 넣어서 한번에 출력하는 것이 아니라, 일부 콘텐츠는 먼저 트리 과정을 거쳐 스크린에 나타나고, 그 와중에 웹의 다른 요소들은 네트워크를 통해 렌더링엔진으로 읽어들어 오는 순차적인 방식으로 입출력이 진행됩니다.
참고 :
https://it-ist.tistory.com/110
'프론트엔드 기초 > Internet' 카테고리의 다른 글
| 6.호스팅이란? (0) | 2022.01.07 |
|---|---|
| 5.도메인 이름이란? (0) | 2022.01.07 |
| 4.DNS와 그 작동 원리 (0) | 2022.01.07 |
| 2.HTTP란? (0) | 2022.01.07 |
| 1.인터넷의 작동원리 (0) | 2021.10.25 |