웹 브라우저

고은찬·2021년 8월 10일

Web

목록 보기

1/3

웹 브라우저에 대한 전반적인 공부한 내용을 정리함

1. 웹 브라우저란?

웹 브라우저란 웹 상에 있는 페이지들의 HTML 언어를 해석해서 내용을 화면에 정리하여 보여주는 프로그램이다.
웹 브라우저란 월드 와이드 웹(www)에서 정보를 검색,표현하고 탐색하기 위한 소트프웨어이다.
브라우저는 인터넷에서 특정 정보로 이동할수 있는 주소입력창(인터페이스)를 포함, 서버와 HTTP로 정보를 받을 수있는 네트워크 모듈도 포함한다.

2. 웹 브라우저의 역사

1989 영국에서 처음 만들어짐

CERN(유럽 입자 물리 연구소)에서 "Tim Berners-Lee"라는 사람이 회사의 인사이동기록을 효율적으로 관리하기 위해서 만듬
(ENQUIRE 라는 회사 내부 연구원들 정보 저장시스템 만듬- 하이퍼텍스트로)
이것을 토대로 회사 내부를 묶은것 처럼 전 세계망를 묶기 위해 HTTP라는 규칙을 만듬 (HyperText Transfer Protocol: 하이퍼텍스트 전송 규칙)
각각의 페이지를 구분할 수 있도록 URL이라는 방식 만듬
이 전세계를 묶는 큰 망을 WWW (Word Wide Web) 이라고 칭함
이때 사용되는 공통언어 HTML(HyperText Markup Language)를 만듬

2. 1993년 인터넷이 세계적으로 상용되기 시작함

미국의 Marc Andreessen 가 최초로 인터넷에 이미지가 포함된 브라우저 "Mosaic"을 만듬 -> 흥행 성공

3. 1994년 Marc Andreessen가 넷스케이프 회사를 설립함

이전 회사의 Mosaic 소유권 주장으로 새로운 브라우저라는 네비게이터 만듬
1995년 "네비게이터" 시자 점유율 90% 이상
Free but Not Free ( 한달에 39달러, 결제창 끌수 있게 선택 )

4. 마이크로소프트가 "인터넷 익스플로어(IE)를 만듬" , 2000년대 초 경쟁 승리

"Mosaic" 인수해 발전시켜 IE를 만듬
넷스케이프와 경쟁 구도 시작 ( 1996년 IE점유율13%, 네비게이터 80%)
window os를 활용해 IE를 기본설치
평생 무료
2002년 (IE 점유율 90%)

5. 2004년 넷스케이프 개발 중지

오픈소스로 공개
이 오픈소스를 활용하는 비영리 재단 "Mozilla" 등장
파이어폭스 만듬
2007년 넷스케이프 공식 지원 종료
( IE 67% / FireFox 25% / Safari 2.4% / Opera 1.8%)

6. 2008년 구글이 Chrome 만듬

FireFox의 Webkit엔진을 활용
JS를빨리 실행하기위한 V8엔진을 도입

7. 2010년 웹 브라우저의 트렌드 변화

과도한 플러그인과 부가기능으로 인해 웹 표준과 멀어진 브라우저들
- 다시 가벼운 상태로 돌아가려함

8. 2010~2015 브라우저들 꾸준한 업데이트

IE : 2015년 개발 중단, Edge 등장 (Actice X 중단)
- 크롬이 50% 이상을 차지함

3. 웹 브라우저의 작동 원리

브라우저가 어떻게 동작하는지 알게 되면, 어떠한 과정을 거쳐서 화면에 페이지가 보이는지 알게 된다.

1) 브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
자원의 주소는 Url에 의해 정해진다.
자원은 HTML, PDF, 이미지 혹은 다른 형태이다.

2) 브라우저의 구조

사용자 인터페이스 : 요청한 페이지를 보여주는 창 제외한 나머지 모든 부분 (예 : 주소 표시줄, 북마크 메뉴)
브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
렌더링 엔진 : 요청한 컨텐츠 표시 - HTML을 요청하면 HTML과 CSS를 파싱하여 표시
통신 : HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행
UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
자료저장소 : 모든 종류의 자원을 하드 디스크에 저장.
자바스크립트 해석기

크롬은 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 각 탭은 독립된 프로세스로 처리된다.

3) 랜더링 엔진

렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시한다.
주로 HTML, XML, 이미지를 표시하고, 확장 기능을 이용하면 PDF와 같은 다른 유형의 문서도 표시할 수 있다.
렌더링 엔진 종류
-게코 엔진 (Gecko) - 파이어폭스에서 사용
-웹킷 엔진 (Webkit) - 사파리, 크롬이 사용

4) 랜더링 엔진의 동작 과정

요약

1. HTML 마크을 처리하여 DOM트리 생성
2. CSS 마크업을 처리하여 CSSOM트리 생성
3. DOM트리와 CSSOM을 결합해 랜더링 트리 생성
4. 랜더 트리 배치(Layout) : 각 노드에 대해 화면에서의 정확한 위치와 크기 계산
5. 랜더 트리 그리기(Painting) : UI 백엔드에서 랜더링 트리의 각 노드를 가로지르며 렌더링

위 과정들은 점진적으로 진행되며, 랜더링 엔진은 좀 더 나은 사용자 경험을 위해 모든 HTML을 파싱할때까지 기다리지 않고 배치와 그리기 과정을 시작한다.
네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 내용의 일부를 먼저 화면에 표시한다.

노드란?
노드는 HTML DOM을 구성하는 계층적 단위이다.
쉽게 말하면 HTML 문서의 모든 것은 노드로 이루어져 있다.
(각 태그, 속성, 텍스트 하나하나가 다 노드가 되는것)
참고 링크

-> 웹킷 엔진(사파리, 크롬의 랜더링 엔진)의 동작과정

-> 모질라 - 게코 엔진(파이어폭스)의 동작과정

용어가 약간다르긴 하지만 동작과정은 기본적으로 동일하다는 것을 알 수 있다.

[1] HTML 파싱 후 DOM 트리 만들기

렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서를 파싱하여 각 요소들을 DOM 트리의 각 노드들로 전환한다.

▶예시 1) HTML문서를 DOM TRee로 변환

 <html>
  <body>
   <p>Hello World</p>
   <div><img src="example.png" /></div>
  </body>
</html>

▶예시 2) DOM Tree로 변환되는 좀 더 구체적인 과정

<!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이 DOM트리로 변환되는 과정>
1) Byte를 문자로 변환
2) 문자를 토큰화 (태그)
3) 노드로 변환
4) DOM 트리 생성

DOM 트리는 랜더링될 때 어떻게 표시할지는 알려주지 않는데, 그 정보는 CSSOM이 알려주게 된다.

DOM이란?
Document Object Model 의 준말로 마크업 형태의 HTML문서를 Object 모델의 형태로 바꿔놓은 것이다. 당연히 HTML문서의 각 Markup과 DOM의 각 요소는 1:1 매칭된다.

MarkUp이란?
MarkUp은 어떤 표시를 뜻하며 MarkUp Language는 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어를 지칭한다. (XML,HTML 등 "<div.>내용</div.>" 형태)
즉 HTML은 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어이다.

HyperText란?
HyperLink로 연결된 텍스트를 의미한다. 종이의 텍스트 범주를 벗어났다는 뜻

[2] CSSOM (CSS Object Model) Tree 생성

DOM Tree를 생성할 때 거쳤던 과정을 그대로 CSS 에 반복하고 브라우저가 이해하고 처리할 수 있는 형식(Tree형식)으로 변환된다.
이때, 우리가 정의한 style뿐만 아니라 브라우저 상에서 기본적으로 가지고 있는 style에 대한 정보도 포함된다.

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

[3] Lender Tree 생성

DOM Tree + CSSOM Tree = Render Tree

랜더링 트리에는 페이지를 랜더링하는데 필요한 노드만 포함된다.
(시각적인 요소들만 랜더트리에 포함된다. ex) head태그같은건 시각적으로 없으므로 랜더트리에 포함되지 않는다.)

랜더링 트리는 페이지에 표시되는 모든 DOM 콘텐츠와 각 노드에 대한 모든 스타일 정보를 갖고 있다.

<랜더링 트리 생성 과정>

DOM 트리의 루트에서 시작하여 순회한다.

렌더링이 되지 않는 script, meta 태그와 같은 노드들은 렌더링 트리에서 생략된다.
일부 노드는 CSS를 통해 숨겨지며, 렌더링 트리에서도 생략된다.
예를 들면 'display:none' 속성을 갖는 노드는 렌더링 트리에서 생략된다.
( Tip : Opacity = 0 or dvisibility = hidden 요소들은 포함됨! )

표시된 각 노드에 대해 매칭되는 CSSOM규칙을 찾고, 적용한다.
표시된 노드를 컨텐츠와 스타일과 함께 내보낸다.

[4] Lender Tree Layout(배치)

Layout을 만든다는 것은 각 노드들에게 스키린의 어느 공간에 위치해야할지 각각의 값(Poisition, size) 를 부여하는 것을 의미

ViewPort 내에서 노드의 정확한 위치와 크기 계산
페이지 내에서 각 객체의 정확한 위치와 크기를 계산하기 위해 브라우저는 랜더링 트리의 root에서 시작하여 트리를 순회한다.
Layout과정의 결과는 BoxModel이다. 박스 모델은 ViewPort 내에서 각 노드의 정확한 위치와 크기 정보를 담고있고, 모든 상대적인 측정값은 화면에서의 절대적인 픽셀로 변환된다.
윈도우 사이즈를 줄이거나 font가 변경되면 다시 계산이 필요하고, Reflow가 재발생한다. (Reflow : 랜더 트리 배치)

<.Box Model>

개발자 도구에서 볼 수 있는 Box Model
Reflow (랜더 트리 배치)가 일어나는 대표적 속성

[5] Lender Tree painting , rasterizing (그리기)

마지막으로, 렌더링 트리의 각 노드를 화면에서의 실제 픽셀로 변환한다.

이 경우 브라우저가 처리해야할 작업량이 많아 시간이 약간 걸릴 수 있다.

<Lender Tree painting 순서>

Layout 이벤트는 타임라인에서 랜더링 트리 생성,위치,크기 계산을 캡처한다.
레이아웃이 완료될때 브라운저가 Paint 이벤트를 발생시킨다.
Paint 이벤트가 일어나면 랜더링트리를 화면의 픽셀로 변환한다.

DOM 이나 CSSOM 이 수정되면 이 과정을 다시 반복하는데, Rendering Engine 은 좀 더 나은 사용자 경험을 위해 모든 HTML 을 파싱할 때까지 기다리지 않고 Reflow 와 Repaint 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

여기까지 브라우저가 HTML문서를 랜더링하여 화면에 보여주는 동작 원리를 알아보았다.

<참고링크>
브라우저의 작동 원리 - VLOG
웹 브라우저의 동작 방식 - VLOG
브라우저는 어떻게 동작하나요 ? - naverD2
웹 브라우저의 역사 - Youtube
HTML,HyperText,Markup Language - Groom Service
CSSOM이란? - Blog
Render:Tree Construction - Google Developer Web
Render Tree의 생성,배치,그리기 - Tistory