Browsers and how they work?
브라우저란 무엇인가?
브라우저는 *월드 와이드 웹 상에서 사용자에게 정보를 제공할 수 있도록 도와주는 응용 프로그램을 의미하는데, 사용자에게 제공될 수 있는 정보로는 HTML 문서, 이미지, 동영상 등이 있다. 크롬, 사파리, 파이어 폭스 등이 잘 알려진 브라우저들이다.
* 월드 와이드 웹 (World Wide Web, WWW, W3)
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유하는 공간으로, 컴퓨터 간의 거대한 네트워크를 의미한다.
브라우저의 주요 기능은 사용자가 선택한 정보 즉 자원을 서버에 요청하고 이를 사용자가(즉 사람) 인식할 수 있는 모양으로 출력하여 주는 것이다. 사람이 인식할 수 있는 정보로 구현해내는 과정에서 과거에는 각각의 브라우저가 서버로부터 받은 자원을 화면에 표시할 때에 각기 다른 방식으로 구현해내어 호환성의 문제가 존재했다. 하지만 현재에는 대부분의 브라우저가 W3C(World Web Consortium)에 의해 표준화된 명세를 따름으로써 호환성 문제를 어느 정도 극복하였다. 동일한 자원에 대해 브라우저별로 다른 화면을 구현해내는 것을 방지하기 위해 개발자는 언제나 *크로스 브라우징을 고려하여야 한다.
* 크로스 브라우징
브라우저마다 각기 다른 렌더링 엔진을 사용함으로 인해 동일한 자원에 대해 사용자 화면에 동일하게 구현되지 않는 문제를 극복하기 위해, 어떠한 플랫폼에서도 동등하게 화면이 구현되고 기능이 가능하도록 제작하는 것을 의미한다.
* W3C(World Web Consortium)
웹기술의 표준을 정의하는 공식 기관이다.
- 사용자는 브라우저를 통해 서버에 접근 가능하다.
- HTTP에 따라 웹 서버는 특정 정보를 브라우저에 전송하고, 브라우저는 전송받은 정보를 화면에 출력한다.
- 브라우저는 웹서버에서 HTML 등으로 작성된 코드를 불러온 후 해석하여 사용자에게 웹페이지로 보여준다.
- 개발자는 브라우저 간 지속성 유지를 위해 웹 표준을 고려해야 한다.
브라우저의 주요 구성 요소
1. 사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 사용자가 요청한 부분을 제외하고 기본 틀로써 존재하는 모든 부분을 의미한다.
2. 브라우저 엔진, 렌더링 엔진
브라우저 엔진과 렌더링 엔진은 HTML, XML, CSS 등 화면 구성을 위한 자료를 해석하여 사용자가 인식할 수 있는 정보로 변환하여 주는 역할을 하는 부분이다. 브라우저 엔진과, 렌더링 엔진은 밀접하게 연관되어 있어, 함께 묶어 이야기하는 경우가 많다. 구분하여 보면 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 역할을 하고, 렌더링 엔진은 요청된 자원 예를 들면 특정 웹사이트에 대하여 HTML과 CSS를 파싱하여 화면에 표시하는 역할을 한다.
3. 통신
HTTP프로토콜을 통해 서버에 자원을 요청하는 역할을 담당하는 부분이다. 플랫폼의 독립적인 인터페이스로, 각 플랫폼 하에서 실행된다.
4. UI 백엔드
콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.
5. 자바스크립트 해석기 ( 자바스크립트 엔진 )
자바스크립트 코드를 해석하고 실행한다. 크롬의 경우 V8 Engine, 파이어폭스의 경우 SpiderMonkey, 사파리의 Webkit 등이 있다.
6. 자료 저장소
자료를 저장하는 계층으로, 쿠키와 같은 자원을 저장하여 둔다.
렌더링 엔진
렌더링 엔진은 HTML, CSS, JAVASCRIPT 등의 코드가 브라우저에 의해 일반 사용자가 이해할 수 있는 모습으로 출력하여 주는 역할을 한다.
- 사파리 -> Webkit 엔진
- 크롬 -> Blink 엔진
- 모질라 -> Gecko 엔진
렌더링 과정
1) 사용자가 브라우저에 접속
2) 브라우저는 URL을 통해 해당 URL에 일치하는 웹서버를 찾고 해당 서버에서 HTML, CSS, JAVASCRIPT 등 웹 페이지 출력을 위해 필요한 리소스를 전달받는다.
3) 브라우저는 페이지 렌더링을 위해 HTML-DOM, SCC-CSSOM 트리를 생성한다.
HTML 문서를 파싱하고, 태그들을 DOM 노드로 변환한다. 이후 외부 CSS 파일과 함께 포함된 스파일 요소도 파싱한다.
4) 렌더링 트리 생성
위의 과정을 통해 만들어진 DOM 트리와 CSSOM트리를 결합하여 렌더링 트리를 생성한다.
* DOM(Document Object Model = 문서 객체 모델)
5) 레이아웃=리플로우 ( 렌더링 트리 배치 )
뷰포트 내에서 각 요소(노드)의 크기와 위치를 정확하게 측정, 상대적 측정값은 화면에서 절대적 픽셀로 변환된다.
6) 페인팅(레스터화)
렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환한다.
* DOM 트리
Bytes -> Characters -> Tokens -> Nodes -> DOM
- 변환 : 브라우저가 바이트를 HTML에 정의된 인코딩 (ex) utf8)에 따라 개별 문자로 변환
- 토큰화: 문자열을 다시 한 번 W3C 표준에 의해 지정된 고유 토큰으로 변환.
- 렉싱: 토큰을 특정 속성이나 규칙이 정의된 객체(Node)로 변환한다.
L HTML Parser와 CSS Parser를 이용한다.
ex) body -> html에서 실질적으로 내용을 보여주는 부분을 의미한다. br -> 한 줄 뛰우는 기능.
- DOM : 각각의 태그 간 관계를 해석하여 트리 구조로 연결한다.
* 리플로우(Reflow)
최초 렌더링 이후 사용자의 액션에 의해 영향을 받는 노드에 대해서만 렌더링 트리 생성과 레이아웃 과정을 재수행하는 것.
* 리페인드(Repaint)
리플로우에 의해 변화된 렌더링 트리와 레이아웃 과정에 대해 다시 화면에 그리기 위해 다시 페인팅 단계를 수행하는 것.
- 단순한 변경사항은 리플로우 과정없이 리페인트만 재수행한다.
- 리페인트가 반드시 리플로우를 동반하지는 않는다.
- 리플로우는 반드시 리페인트를 동반한다.
* 토큰 : HTML에서 토큰은 시작 태그, 종료 태그, 속성 이름과 속성 값을 의미한다.
렌더링 최적화 방안
- Reflow 최소화 ( Reflow 없이 Repaint만 발생하는 속성을 사용 )
> Reflow가 발생하는 속성
position, width, height, left, top, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, min-height,overflow, text-align, vertical-align, white-space...
> Repaint가 발생하는 속성
background, background-image, background-position, background-repeat, background-size, border-radius, border-style, box-shadow, color, line-style, outline, outline-color, outline-style, outline-width, text-decoration, visibilty...
- 영향을 주는 노드 최소화 : position, absolut, fixed 등의 속성은 노드간 영향을 최소화 할 수 있다.
- 프레임 줄이기
파싱이란?
브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
DOM
<html>
<body>
<p>Hello World</p>
<div><img src="example.png" /></div>
</body>
</html>위의 코드는 아래와 같은 DOM 트리로 변환될 수 있다.
출처
https://d2.naver.com/helloworld/59361
브라우저의 렌더링 과정
렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.
medium.com
https://chanyeong.com/blog/post/43
브라우저 렌더링과 최적화 :: chanyeong
렌더링이란? 단어 그대로 렌더링이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서들을 브라우저가 화면에 그려주는 동작을 말한다. 각 브라우저는 렌더링을 하기 위해 각각의 렌더링 엔진을 가지
chanyeong.com
'이론' 카테고리의 다른 글
| [ WEB ] - 호스팅이란 무엇인가? (0) | 2022.06.09 |
|---|---|
| [ WEB ] - DNS는 어떻게 작동하는가? (0) | 2022.06.09 |
| [ WEB ] - HTTP란 무엇인가? (0) | 2022.06.03 |
| [ WEB ] - 인터넷은 어떻게 작동하는가? (0) | 2022.06.01 |
| [ Web이론 ] - 네트워크 인터페이스 카드 / 트랜시버 / 허브 / 스위치 / 라우터 / 로드밸런서 / 스케일 아웃 / 스케일 업 / Rack (0) | 2022.05.26 |