브라우저 동작방식

October 27, 2024

1. 웹페이지 랜더링

초기의 웹사이트는 대부분 텍스트와 이미지를 로드하고 HTML 문서의 순서대로 나타내는 간단한 렌더링 과정을 가졌다. 하지만 오늘 날의 웹 디자인은 정교하고 시각적이며 매우 동적이다.
웹 개발자는 CSS(Cascading Style Sheets)로 인코딩하여 브라우저에 표시되는 방법을 정확하게 지시한다.

렌더링 파이프라인 (Rendering Pipeline)

1. 개념 브라우저가 웹 페이지의 HTML, CSS, JavaScript를 해석하고 화면에 최종적으로 시각적으로 표시하는 일련의 과정을 말한다.
파이프라인을 통해 브라우저는 코드에서 웹 페이지의 구조, 스타일, 스크립트를 처리하여 사용자가 볼 수 있는 페이지로 변환할 수 있다.

2. 단계

DOM 생성 (DOM Construction) 브라우저는 HTML 파일을 파싱하여 DOM(Document Object Model)이 생성된다. DOM은 HTML 문서의 구조를 트리 형태로 표현한 것으로, 문서의 각 요소와 그 계층 관계가 포함된다. DOM 트리는 각 HTML 태그가 노드로 변환되어 트리 구조로 구성된다.

2.CSSOM 생성 (CSSOM Construction) 브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model)이 생성된다. CSSOM은 스타일 규칙을 트리 형태로 나타내고, DOM에 각 요소의 스타일 정보가 추가된다. 이 CSSOM은 페이지의 스타일 정의를 포함하며, 렌더 트리를 만들 때 사용된다.
1. 렌더 트리 생성 (Render Tree Construction) DOM과 CSSOM이 결합되어 렌더 트리(Render Tree)가 생성된다. 렌더 트리는 화면에 표시될 요소들만 포함하며, 각 요소의 스타일과 레이아웃 정보가 반영된다. 예를 들어 display none;처럼 화면에 보이지 않는 요소는 렌더 트리에 포함되지 않는다
2. 레이아웃 단계 (Layout) 렌더 트리를 기반으로 화면에 표시될 각 요소의 크기와 위치가 계산된다. 레이아웃은 페이지의 각 요소가 정확히 어디에 위치할지를 결정하는 단계로, 브라우저 창 크기와 요소의 스타일 규칙에 따라 배치가 결정된다.
3. 페인트 단계 (Paint) 레이아웃 정보를 바탕으로 각 요소가 실제 화면에 그려지게 된다. 색상, 이미지, 그림자 같은 스타일이 렌더 트리에 따라 캔버스에 그려져.
4. 합성 및 디스플레이 (Compositing) 브라우저는 복잡한 레이아웃의 경우 레이어로 나누어 관리하고, 이를 통해 최종 화면이 구성된다. 나눠진 레이어들이 합쳐져 최종 페이지가 사용자 화면에 표시된다.

3.렌더링 파이프라인 최적화 렌더링 파이프라인을 최적화하면 페이지 로딩 속도와 사용자 경험이 크게 개선 할 수 있다.

Critical CSS 사용 첫 화면에 필요한 CSS만 빠르게 로드하여 렌더링이 빨라진다
Lazy Loading 이미지나 비디오 같은 리소스가 필요할 때만 로드되어 초기 렌더링이 빨라진다
JavaScript 최적화 JavaScript가 렌더링을 방해할 수 있기때문에, 필요한 스크립트는 비동기로 로드하거나 페이지 하단에 배치하는 게 좋다

DOM(Document Object Model)

1. 개념 브라우저는 HTML이 포함된 HTTP 응답을 수신하면, HTML 문서를 구문 분석하여 DOM(Document Object Model)이라는 데이터 구조를 생성한다.
DOM은 HTML 문서를 노드(node)라는 일련의 중첩된 요소로 구성하는 트리 구조 형태를 가지며, 브라우저와 JavaScript가 HTML 문서의 요소에 접근하고 조작할 수 있도록 동작과 레이아웃을 제어한다.

2. DOM의 특징

노드(Node)의 역할 DOM의 각 노드는 HTML 문서의 특정 요소나 속성에 대응한다.
예를 들어, <div>나 <p>와 같은 HTML 태그는 각각 하나의 DOM 노드로 표현된다. DOM 노드
- 크게 요소 노드(element node), 속성 노드(attribute node), 텍스트 노드(text node)로 구분된다. 요소 노드
- HTML 태그 요소에 대응하며, 화면에 렌더링되는 구조적 요소를 나타낸다 속성 노드
- 각 요소의 속성(attribute)을 나타내며, id, class와 같은 HTML 속성을 포함한다 텍스트 노드
- 요소 안에 포함된 텍스트를 나타내며, 실제로 화면에 표시되는 콘텐츠를 포함한다 <br/>
DOM 트리 구조 DOM은 트리 형태로 구성되며, 최상위 루트 노드(보통 <html> 요소)가 다른 하위 노드를 포함하는 방식으로 분기 구조를 형성한다.
각 요소는 부모-자식 관계를 가지며, 이를 통해 DOM 트리에서 노드 간의 계층 구조가 형성된다. 이 계층 구조 덕분에 웹 개발자는 특정 노드를 쉽게 찾아내고, 이를 조작하거나 추가할 수 있다.

DOM과 화면 렌더링 DOM의 각 노드는 브라우저의 렌더링 엔진에서 해석되어 화면에 표시되며, 사용자와의 상호작용을 가능하게 해준다.
다만, 모든 DOM 노드가 화면에 직접 렌더링되는 것은 아니다. 예를 들어, <script> 태그나 <style> 태그와 같은 요소는 화면에 표시되지 않고, 페이지의 동작이나 스타일을 제어하는 데 사용된다.
DOM의 동적 조작 JavaScript는 DOM 트리에 접근하고 조작할 수 있는 메서드를 제공하여, HTML 문서를 동적으로 업데이트하거나 수정하는 데 사용할 수 있다.
예를 들어, document.getElementById()나 document.querySelector() 같은 메서드를 사용하면 특정 요소를 선택할 수 있고, 요소의 내용이나 속성, 스타일을 변경할 수 있다.

CSS

브라우저가 DOM 트리를 구성하면 화면의 요소에 해당하는 DOM 노드와 상대적인 요소를 배치하는 방법, 적용한 스타일링을 결정해야한다.
CSS는 DOM 요소에 색상, 크기, 위치, 여백, 글꼴 등의 시각적인 스타일을 적용하여 페이지를 더 보기 좋게 만들고, 사용자 경험을 향상시킬 수 있다.

1. CSS 스타일링 방법 CSS 스타일링을 적용하는 방법은 크게 두 가지로 나눌 수 있다.

인라인 방식 ` HTML 태그에 style 속성을 직접 지정`하여 개별 요소에 스타일을 적용하는 방식이다.
```
 
 <p style="color: red;>Hello World!</p>
```
장점: 특정 요소에 간단히 스타일을 적용할 때 빠르게 사용할 수 있다 단점: 유지보수가 어렵고, HTML 문서와 스타일이 혼합되어 가독성이 떨어진다
외부 CSS 파일 방식 별도의 .css 파일을 만들어 HTML 문서와 독립적으로 스타일 정보를 작성하는 방식이다
```


<rel ="stylesheet" href="styles.css"></rel>
```
장점: HTML 구조와 스타일이 분리되므로 코드가 깔끔하고, 여러 HTML 페이지에서 같은 CSS 파일을 재사용할 수 있어 유지보수가 용이하다. 단점: 파일이 많아질 경우 초기 로딩 시 스타일 파일을 모두 다운로드하는 시간이 걸릴 수 있다.

2. CSS의 장점 웹 개발자들은 HTML을 깔끔하게 유지하고 재사용성과 가독성을 높이기 위해 주로 외부 CSS 파일 방식을 선호한다.
이 방식은 Screen Reader 같은 대체 브라우징 기술에서도 HTML 구조를 쉽게 해석할 수 있게 도와주며, 웹 접근성을 높이는 데 기여한다.
HTML과 CSS가 분리되어 있기 때문에 HTML 문서가 가볍고 구조적이어서 유지보수와 협업이 훨씬 효율적이다.

3. CSS의 적용 우선순위 (CSS Specificity) 브라우저는 CSS 규칙을 적용할 때 우선순위를 기준으로 스타일을 결정해. CSS 우선순위는 다음과 같은 순서로 적용된다.

인라인 스타일 style 속성을 사용한 인라인 방식이 가장 높은 우선순위를 가진다.
ID 선택자 #header와 같이 특정 요소의 ID를 지정하는 선택자가 그 다음 우선순위를 갖고, 클래스, 속성, 가상 클래스 선택자: .nav-item, [type=”text”], :hover와 같은 선택자들은 ID보다 낮은 우선순위를 가진다.
태그 선택자 <p>, <div>와 같은 태그 자체에 스타일을 지정하는 선택자는 우선순위가 가장 낮다. 이렇게 스타일의 우선순위에 따라 최종적인 스타일이 적용되며, 상황에 따라 특정 스타일을 덮어쓸 수 있다.

JavaScript

자바스크립트는 웹 페이지가 렌더링 될때 브라우저의 자바스크립트 엔진으로 실행되는 프로그래밍 언어이다. <script>태그를 사용하거나 inline으로 HTML문서에 사용할 수 있다.

1. 동작 과정 자바스크립트는 <script> 태그를 DOM 노드로 분석하는 즉시 브라우저로 실행된다.
이는 렌더링 파이프라인이 HTML문서가 완료되지않으면 자바스크립트 코드는 DOM에 존재하지 않는 페이지의 요소와 상호작용하는 문제가 발생한다.
그래서 <script>태그는 DOM이 구성된 후 실행되도록 지연속성으로 표시하는 경우가 많다.

2. DOM과 상호작용 과정

HTML을 객체화하여 DOM tree를 구성

JS가 document 객체를 통해 DOM에 접근 (getElementById, querySelector,getElementsByClassName)

다양한 메서드를 사용하여 DOM 조작 (텍스트, 스타일, 속성을 조작 & 요소의 추가 삭제)

이벤트 처리

DOM의 변경사항이 브라우저에 반영

3. 보안 문제 자바스크립트는 브라우저 보안 모델에 의해 보호되며, 샌드박스(sandbox) 내에서 실행된다.
이는 자바스크립트가 특정 제한된 환경에서만 실행되어야 함을 의미하며, 보안을 위해 다음과 같은 작업을 수행할 수 없다

로컬 파일 액세스 자바스크립트는 브라우저 외부에 있는 파일 시스템에 직접 접근할 수 없다.
서버 간 요청 다른 도메인으로 요청을 보낼 수 없는 동일 출처 정책(Same-Origin Policy)이 적용된다. 다만, CORS 설정을 통해 일부 허용할 수 있다.
로컬 하드웨어 접근 제한 자바스크립트는 컴퓨터의 파일, 프린터 등 하드웨어에 직접 접근할 수 없다. 이러한 제한은 사용자의 개인정보 및 시스템을 보호하기 위한 것으로, 자바스크립트는 주로 웹 페이지 내의 DOM 조작 및 사용자 상호작용을 처리하는 데 사용된다.

이러한 제한 덕분에 자바스크립트는 아직 웹 페이지의 DOM 조작과 사용자 상호작용을 처리하는 데 사용된다.
그러나 이러한 제한만으로는 XSS 같은 공격을 방지할 수 없기 때문에, 추가적인 보안 설정이 필요하다.

브라우저에서 수행하는 모든 작업

브라우저는 렌더링 파이프라인과 자바스크립트 엔진보다 더 많은 일을 담당한다.
운영체제와 연결해 DNS 주소를 확인 및 캐싱하고, 보안인증서 해석 및 검증, HTTPS 요청을 인코딩하거나 웹서버에 따라 쿠키를 저장하고 전송한다.
그 과정은 아래와 같다.

브라우저 로그인 과정

사용자가 브라우저에서 www.google.com을 방문
브라우저는 도메인을 IP주소로 변환

운영체제의 DNS 캐시를 참조
정보가 없을 경우 ISP에 제공자의 DNS 캐시 조회 요청
ISP에서도 첫 방문인경우 DNS 서버에서 도메인을 변환

보안 접속을 설정하여 TCP 세션 설정 (IP주소에 해당하는 서버와 TCP handshake 개시)
브라우저가 HTTP GET 요청을 생성 & TCP는 HTTP 요청을 패킷으로 분할하여 재조립할 서버로 전송
HTTP 통신이 HTTPS로 보안 통신으로 업그레이드

브라우저와 서버가 TLS handshake 수행
암호화에 동의 & 암호키를 교환

서버가 보안 채널을 이용해 HTTP 응답을 회신하고 요청을 트리거
사용자는 로그인을 통해 자격증명을 하고, 로그인 양식을 POST 요청
서버는 자격증명을 확인하고 응답에 Set-Cookie 헤더를 반환하여 세션을 설정
브라우저는 정해진 시간동안 쿠키를 저장 & 이후 요청과 함께 다시 google로 전송

Twitter Facebook LinkedIn

Kimsu