.png%3Ftable%3Dblock%26id%3Db06785f0-5ea3-4b47-9323-3ae8cf4b0e26%26cache%3Dv2&w=3840&q=75)
Web Browser란?
웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다.
Script 태그 위치
- 목적
페이지 로딩 시간 단축
- 방법
Script 태그를 body 태그 하단에 위치
DOM 조작과 Script 실행 순서
- 에러 방지
DOM이 완성된 후에 script 실행
- 장점
페이지 구조가 로드된 상태에서 script 실행으로 에러 예방
자바스크립트 엔진 처리
- 위치
렌더링 엔진이 아닌 자바스크립트 엔진에서 처리
- 결과
HTML 및 CSS 렌더링 후에 자바스크립트 실행
웹 브라우저와 웹 서버 동작
- 프로세스
브라우저가 서버에 자원 요청, 서버 응답을 받아 해석, 사용자에게 표시
웹 브라우저 종류
- 다양성
크롬, 네이버 웨일, 파이어폭스, 사파리 등
자원 요청 및 응답
- 요청
브라우저가 웹 서버에 필요한 자원 요청
- 응답
서버가 요청에 대한 응답을 제공
- 자원
HTML, CSS, 이미지, PDF 등 다양한 형태
Web Browser의 구조
사용자 인터페이스
사용자가 상호 작용할 수 있는 부분으로, 주소 표시 줄, 이전/다음 버튼, 북 마크 메뉴, 새로 고침 버튼, 로드를 중단할 수 있는 정지 버튼, 홈 버튼 등이 포함됩니다.
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 간의 동작을 제어하며, Data Storage를 참조하여 로컬 데이터에 쓰고 읽는 등 다양한 작업을 수행합니다.
렌더링 엔진
웹 서버로부터 받은 자원을 브라우저 화면에 나타냅니다. HTML 문서를 받으면 HTML과 CSS를 파싱하여 렌더 트리로 변환하고, 이를 기반으로 웹 페이지를 표시합니다.
통신
서버와의 통신을 가능하게 하는 부분으로, HTTP 요청 등의 네트워크 호출에 사용됩니다.
UI 백엔드
기본적인 위젯을 그리는 인터페이스를 담당합니다. 예를 들어, select나 input과 같은 UI 요소를 처리합니다.
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행하는 역할을 수행합니다. 웹 페이지에 포함된 자바스크립트를 실행하여 동적인 기능을 활성화합니다.
자료 저장소
브라우저 메모리를 활용하여 데이터를 저장하는 공간으로, Cookie, Local Storage, Indexed DB 등이 포함됩니다.
Rendering Engine
렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진입니다.
주요 렌더링 엔진
- Blink: 크롬, 오페라
- Webkit: 사파리
- Trident: 익스플로러
- EdgeHTML: 마이크로소프트 엣지
브라우저 및 코드 예시
- **`-moz-border-radius: 1em;`** // 파이어폭스 브라우저에 적용 - **`ms-border-radius: 2em;`** // 익스플로러에 적용 - **`o-border-radius: 3em;`** // 오페라에 적용 - **`webkit-border-radius: 4em;`** // 크롬, 사파리 브라우저에 적용
Blink 엔진
- 구글이 Webkit을 대체하기 위해 개발한 엔진
렌더링 엔진의 특징
- 사용자 경험 향상을 위해 렌더링 엔진은 가능한 빠르게 내용을 표시하려고 노력합니다.
- 렌더링 엔진은 일련의 과정들을 동기적으로 진행하지 않고, HTML 파싱이 완료되기를 기다리지 않고 렌더 트리 배치와 그리기 과정을 시작합니다.
Rendering Engine 동작 과정
렌더링 엔진은 HTML 문서를 받아와 화면에 표시하기 위한 중요한 역할을 수행합니다.
렌더링 엔진 동작 과정
- HTML 문서를 파싱하여 DOM 트리를 생성합니다.
- 외부 CSS 파일과 스타일 요소를 파싱합니다.
- DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.
- 렌더 트리의 각 노드에 대해 화면에서의 배치를 결정합니다.
- UI 백엔드에서 렌더 트리의 각 노드를 화면에 그립니다.
렌더링 엔진은 HTML, CSS, 이미지 등 다양한 자원을 조합하여 화면에 표시함으로써 사용자가 웹 페이지를 시각적으로 이해할 수 있게 합니다.
웹킷 동작 과정
- HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 구축합니다.
- CSS 파일을 스타일 시트 객체로 파싱하여 CSSOM(Css Object Model)을 생성합니다.
- DOM 트리가 생성되면서 동시에 CSSOM을 이용하여 렌더 트리를 생성합니다.
- 렌더 트리의 객체들에게 위치와 크기를 할당하여 레이아웃을 구성합니다.
- 렌더 트리를 화면에 그려 사용자에게 시각적인 경험을 제공합니다.
웹킷 엔진은 다양한 플랫폼에서 사용되었으며, Safari 브라우저를 비롯하여 일부 다른 브라우저에서도 채택되었습니다. 그러나 현재는 크롬과 오페라 등이 Blink 엔진을 사용하며, Safari 브라우저는 WebKit 엔진의 파생 버전을 사용하고 있습니다.
그럼 javascript의 동작 원리는?
HTML 문서 로드
- 사용자가 웹 페이지를 열면 웹 브라우저는 해당 페이지의 HTML 문서를 서버에서 요청하여 받아옵니다.
HTML 파싱 및 DOM 생성
- 받아온 HTML 문서는 HTML 파서에 의해 파싱되어 DOM(Document Object Model) 트리로 변환됩니다.
- DOM 트리는 문서의 구조를 표현하며, 각 HTML 태그는 DOM 노드로 매핑됩니다.
CSS 로드 및 파싱
- HTML 파싱 중에 외부 CSS 파일이나
<style>태그에 정의된 스타일 정보를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
렌더 트리 생성
- DOM 트리와 CSSOM 트리를 결합하여 렌더 트리(Render Tree)를 생성합니다.
- 렌더 트리는 실제 화면에 표시되는 노드들로 이루어져 있습니다.
레이아웃 및 페인팅
- 렌더 트리의 각 노드에 대해 레이아웃(Layout)이 수행되어 화면의 위치와 크기가 결정됩니다.
- 이후 페인팅(Paint)이 이루어져 각 노드가 화면에 그려집니다.
JavaScript 처리
- HTML 문서 파싱 중
<script>태그를 만나면 자바스크립트 코드의 로드와 실행이 시작됩니다.
- 자바스크립트 엔진은 실행 컨텍스트를 생성하고, 코드를 순차적으로 실행합니다.
이벤트 처리 및 비동기 작업
- 웹 페이지에서 발생한 이벤트에 대한 처리와, 비동기 작업(예: AJAX 요청, 타이머)이 이루어집니다.
- 이때 이벤트 루프를 통해 비동기 작업이 관리되고 실행됩니다.
DOM 조작
- JavaScript 코드를 통해 DOM을 동적으로 조작할 수 있습니다.
- 이로 인해 렌더 트리가 변경되어 화면이 업데이트될 수 있습니다.
화면 업데이트
- JavaScript에 의한 DOM 조작이나 이벤트 처리에 따라 렌더 트리가 변경되면, 레이아웃과 페인팅이 재실행되어 실제 화면이 업데이트됩니다.
글을 마치며
사용자가 웹 페이지에 접근하면 브라우저는 해당 페이지의 HTML 문서를 서버로부터 요청하여 받아옵니다. 받아온 HTML 문서는 HTML 파서에 의해 파싱되어 DOM(Document Object Model) 트리로 변환됩니다. 이를 통해 문서의 구조가 표현되며, 각 HTML 태그는 DOM 노드로 매핑됩니다.
동시에 CSS 파일이나
<style> 태그에 정의된 스타일 정보도 파싱되어 CSSOM(CSS Object Model) 트리가 생성됩니다. 그 후에 DOM 트리와 CSSOM 트리가 결합되어 렌더 트리(Render Tree)를 형성하는데, 이는 화면에 표시되는 노드들로 이루어진 구조입니다. 렌더 트리가 생성되면 각 노드에 대해 레이아웃(Layout)이 수행되어 화면의 위치와 크기가 결정되고, 페인팅(Paint)이 이루어져 화면에 각 노드가 그려집니다. 그런 다음에는 자바스크립트 코드의 로드와 실행이 시작됩니다. HTML 문서 파싱 중
<script> 태그를 만나면 자바스크립트 엔진이 동작합니다. 자바스크립트 엔진은 실행 컨텍스트를 생성하고 코드를 순차적으로 실행하며, 여기서 이벤트 처리 및 비동기 작업(예: AJAX 요청, 타이머)이 이루어집니다. 비동기 작업은 이벤트 루프를 통해 관리되고 실행됩니다. 마지막으로 자바스크립트를 통해 DOM을 동적으로 조작할 수 있으며, 이로 인해 렌더 트리가 변경되어 화면이 업데이트됩니다.