연습장
11. 브라우저 , 렌더링 , DOM 본문
브라우저란?
웹 브라우저는 인터넷을 통해 웹 페이지를 검색하고 표시하는 소프트웨어입니다.
사용자가 입력한 URL을 기반으로 웹 서버로부터 데이터를 요청하고,
이를 화면에 렌더링하여 사용자가 볼 수 있도록 합니다.
ex) 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러/마이크로소프트 엣지, 오페라, 삼성 인터넷, 사파리, 브레이브
사용자 인터페이스
대부분의 웹 브라우저는 주소 표시줄(주소창)과 검색 상자(검색 엔진 사용 시), 뒤로/앞으로 이동하는 버튼, 새로 고침 버튼, 북마크 기능 등의 사용자 인터페이스 요소를 제공합니다.
보안 기능
많은 웹 브라우저들은 사용자 개인 정보 보호를 위한 다양한 보안 기능을 제공합니다. 이는 HTTPS 프로토콜 지원, 쿠키 관리, 팝업 차단, 위조 사이트 경고 등을 포함할 수 있습니다.
확장성
많은 브라우저는 사용자 환경에 맞추어 기능을 확장할 수 있는 플러그인이나 확장 프로그램을 지원합니다. 이들은 광고 차단, 다양한 웹 개발 도구, 특정 웹 서비스와의 통합 등 다양한 기능을 추가할 수 있습니다.
동작 과정
- URL 요청과 서버 통신
- 사용자가 웹 브라우저에서 URL을 입력하면, 웹 브라우저는 해당 URL을 해석하여 서버에 HTTP 요청을 보냅니다
- 이 요청에는 필요한 정보(메서드, 헤더 등)가 포함되며, 서버는 이를 받고 요청된 리소스(웹 페이지, 이미지, 데이터 등)를 제공하기 위해 처리를 시작합니다.
- 서버의 응답:
- 서버는 받은 요청을 처리하고, 클라이언트(브라우저)에 응답을 보냅니다.
- 응답은 주로 HTML 문서와 함께 CSS, JavaScript, 이미지 등의 리소스를 포함할 수 있습니다.
- HTTP 응답 상태 코드는 요청의 성공 여부를 나타내며, 성공적으로 처리된 경우 200번대 코드가 반환됩니다.
- HTML 렌더링:
- 웹 브라우저는 받아온 HTML 문서를 해석하여 DOM(Document Object Model) 트리를 구성합니다. 이는 웹 페이지의 구조화된 표현을 제공하며, CSS와 결합하여 렌더 트리로 변환됩니다.
- CSS 스타일링:
- 브라우저는 CSS 파일과 <style> 태그 안의 스타일 정보를 사용하여 각 DOM 요소에 스타일을 적용합니다. 이 과정을 통해 페이지의 레이아웃과 디자인이 결정됩니다.
- JavaScript 실행:
- 페이지에 포함된 JavaScript 코드는 DOM을 수정하거나 다양한 동적 기능을 추가할 수 있습니다.
- 예를 들어 사용자 입력에 반응하여 콘텐츠를 변경하거나 서버와의 데이터 통신을 처리할 수 있습니다.
- 그래픽 렌더링:
- 브라우저는 렌더 트리를 기반으로 화면에 요소들을 배치하고 그려내며, 픽셀 단위로 페이지를 구성하여 사용자가 볼 수 있도록 합니다.
- Layout (레이아웃):
- 의미: 레이아웃 단계는 브라우저가 요소의 위치와 크기를 계산하는 과정입니다.
- 동작: HTML 요소가 브라우저에 의해 파싱되고 DOM 트리로 변환된 후, 각 요소에 CSS 스타일이 적용됩니다. 이후 브라우저는 각 요소의 크기와 위치를 결정하고, 이들의 상대적인 배치를 계산합니다.
- 예시: 예를 들어, position, display, width, height 등의 CSS 속성이 레이아웃 단계에서 요소의 크기와 배치에 영향을 미칩니다.
- Reflow: 요소의 구조적 변경이나 레이아웃 계산이 필요한 경우 발생합니다.
- Paint (페인트):
- 의미: 페인트 단계는 요소들의 실제 화면 픽셀을 색칠하는 과정입니다.
- 동작: 브라우저는 각 요소의 레이아웃 단계에서 계산된 크기와 위치를 기반으로 실제 픽셀에 색상과 스타일을 적용합니다. 이 과정에서 배경색, 테두리, 그림자 등이 렌더링됩니다.
- 예시: CSS의 background-color, border, box-shadow 등의 속성이 페인트 단계에서 요소의 외관을 결정짓습니다.
- Repaint: 요소의 시각적인 스타일이 변경될 때 발생하며, 요소의 외관을 다시 그리는 과정입니다.
- Composite (합성):
- 의미: 합성 단계는 각 요소들이 계층적으로 쌓인 후, 최종 화면을 구성하는 과정입니다.
- 동작: 브라우저는 각 요소의 페인트 결과를 받아들여 화면의 최종 이미지를 생성합니다. 이 과정에서 Z-index, 투명도, CSS 변환(translate, rotate 등)이 고려됩니다.
- 예시: 요소들이 화면에 쌓이는 순서와 각 요소의 투명도가 합성 단계에서 영향을 미칩니다.
Reflow (다시 Layout)이 발생하는 경우
주로 요소의 크기나 위치가 바뀔 때
혹은 브라우저 창의 크기가 바뀌었을 때
Repaint가 발생하는 경우
주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생
이와 같은 경우는 Layout 과정이 발생하지 않기 때문에 성능상으로 좀 더 이점을 가진다.
레이어의 합성만 다시 발생하는 경우
Layout과 Paint를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가짐.
(여러 블로그를 참고해서 이미지로 그려봤는데, 정확한지는 모르겠다.)
DOM(Document Object Model)
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
-> JavaScript를 통해 이 구조에 접근하고 조작가능
웹 브라우저는 HTML 문서를 로드하고, 이를 파싱하여 계층적인 트리 구조, DOM 으로 변환합니다.
- 트리 구조: DOM은 문서의 요소들을 부모-자식 관계로 구성된 트리 구조로 표현합니다. 문서의 최상위 요소는 document 객체로 시작하여, 그 하위에 <html>, <head>, <body>와 같은 요소들이 포함됩니다.
- 객체로 표현: 각 HTML 요소(element), 속성(attribute), 텍스트 노드(text node) 등은 JavaScript의 객체로 표현됩니다. 각 요소는 메서드와 속성을 가지며, 이를 통해 동적으로 문서의 내용을 수정하거나 스타일을 변경할 수 있습니다.
- 동적 상호작용: JavaScript를 사용하여 DOM을 수정하면, 웹 페이지의 내용이나 스타일을 실시간으로 변경할 수 있습니다. 예를 들어, 새로운 요소를 추가하거나 삭제하거나, 이벤트를 처리하여 사용자와 상호작용할 수 있습니다.
- 문서 구조의 표현: DOM은 문서의 구조와 콘텐츠를 추상화하여 프로그래밍적으로 접근 가능하게 만듭니다. 이는 웹 개발에서 페이지의 동적인 변경, 데이터 조작, 애니메이션 등을 구현하는 데 중요한 역할을 합니다.
위의 이미지와 같은 DOM 구조를 코드로 구현하면 다음과 같은 느낌일꺼같다.
브라우저란?
렌더링이란?
DOM 이란?
가상 DOM 이란?
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://joooing.tistory.com/entry/rendering
https://velog.io/@mercurios0603/%ED%8C%8C%EC%8B%B1Parsing%EC%9D%B4%EB%9E%80
https://co-natus.tistory.com/entry/Browser-rendering-process
'HTML5' 카테고리의 다른 글
| 10. 웹 페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그 (0) | 2024.06.25 |
|---|---|
| 9. 사용자와의 커뮤니케이션을 위한 폼 태그 (0) | 2024.06.24 |
| 8. 이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그 (0) | 2024.06.24 |
| 7. 목록(List)와 표(table) 형식 표현을 위한 태그 (1) | 2024.06.24 |
| 6. HTML의 핵심 개념인 Hyperlink (0) | 2024.06.24 |
