인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램으로 우리가 일상생활에서 인터넷을 통해 검색을 할 때 주로 네이버나 다음과 같은 사이트에 접속하여 필요한 정보를 검색하게 되는데, 이 때 사이트에 접속할 수 있는 도구를 바로 '브라우저' 혹은 '웹 브라우저' 라고 부른다. 브라우저는 제어판과 같이 컴퓨터에 설치되어 있는 하나의 프로그램으로, 이 프로그램을 다운받고 실행하게되면 주소창을 입력할 수 있는 도구가 나타나게 되는것이다.
브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 보여주는 것이다. 흔히 사용하는 크롬, 인터넷 익스플로러 등 인터넷 프로그램이다. 서버의 응답은 주소를 통해 요청하는데, 이 주소를 URI(Uniform Resource Identifier)라고 한다.
기술적인 측면에서 보면, 웹브라우저는 인터넷 웹 서버에 자료를 요청하기 위해 HTTP를 사용하는 클라이언트 프로그램이다.
Microsoft Edge, Chrome, Firefox, Safari, Opera는 사용자 수가 많고 인지도가 높은 주요 5개 웹 브라우저이며 이를 '5대 브라우저'라고 부른다. 이 외에도 브라우저의 종류는 다양하게 있지만 모든 브라우저의 공통적인 의도는 '사이트에 접속한다' 라는 목적을 가지고 있다.
브라우저의 주요 기능
브라우저의 대표적인 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입이다. 이 때, 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수도 있다. (이 외에도 북마크 관리자, 다운로드 관리자, 웹 구성물 캐시, 플러그인을 통한 다양한 매체 지원 등이 브라우저의 주요 기능이라고 할 수 있다.)
브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현했고, 일명 브라우저 전쟁이라 불리던 시절에는 각 브라우저들이 독자적인 방법으로 확장함으로써 무질서가 강해졌다. 이에 따라 웹 제작자가 심각한 호환성 문제를 겪었지만, 수 년간 서로의 장점을 모방하며 진화한 끝에 최근에는 대부분의 브라우저가 표준 명세를 따르게 되었다.
표준 명세에서 제시하는 기능들
HTTP, HTTPS
HTML, XML, XHTML
GIF, PNG, JPEG, SVG 등을 포함한 그래픽 파일 포맷
CSS, Javascript
쿠키와 디지털 인증서
즐겨찾기 아이콘(파비콘) 및 플러그인 지원
위 예시 말고도 사용성과 접근성을 위해 URL과 폼 데이터의 자동 완성 및 탭 브라우징과 같은 기능을 제공한다. 각 브라우저간 차이와 특화된 기능도 존재한다.
브라우저의 기본구조
사용자 인터페이스: 검생창, 새로고침, 뒤로가기/앞으로가기 버튼 등 사용자가 접근할 수 있는 영역
브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진: 브라우저의 핵심, 요청한 콘텐츠를 화면에 표시한다. HTML과 CSS, HTML, CSS, JS로 작성된 문서를파싱하여 브라우저에 사용자가 눈으로 볼 수 있도록 해석해서 시각적으로 출력하는 엔진이다.
통신: HTTP 요청 같은 네트워크 호출에 사용된다. 브라우저마다 독립적인 인터페이스
HTTP 요청과 같은 네트워크 호출에 사용.
플랫폼 독립적
각 플랫폼 하부에서 실행
자바스크립트 해석기: 이름 그대로 자바스크립트 코드를 해석하고 실행한다.
UI 백엔드 : 기본적인 위젯을 그린다. OS 사용자 인터페이스 체계를 사용한다.
자료 저장소: 이름 그대로 자료를 저장하는 계층이다. Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역이다. 모든 종류의 자원을 하드 디스크에 저장.
크롬은 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 각 탭은 독립된 프로세스로 처리된다. 각 탭이 독립된 프로세스로 처리되니까 메모리를 상대적으로 많이 잡아먹게 된다.
렌더링 엔진
렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시한다.
HTML 및 XML 문서와 이미지를 표시할 수 있다. 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.
-moz-border-radius: 1em; // 파이어폭스 브라우저에 적용
-ms-border-radius: 2em; // 익스플로어에 적용, 보통 생략
-o-border-radius: 3em; // 오페라에 적용
-webkit-border-radius: 4em; // 구글, 사파리 브라우저에 적용
렌더링 엔진의 종류는 아래와 같습니다.
Blink(구글이 Webkit을 대체하기 위해 자체적으로 개발한 엔진) - 크롬, 오페라
Webkit - 사파리
Trident - 익스플로어
EdgeHTML - 마이크로소프트 엣지
렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시한다. 그래서 일련의 과정들이 동기적으로 진행되지 않으며, HTML을 파싱 할 때까지 기다리지 않고 렌더 트리 배치와 그리기 과정을 시작다.
자신이 의도한대로 코드를 실행시키려면 브라우저가 우리가 작성한 코드를 어떤 순서대로 어떻게 읽어주는지, 즉 렌더링 해주는지를 파악해야 더 효율적인 코드를 작성할 수 있다. 브라우저가 렌더링을 하면 DOM을 만들어낸다.
렌더링 과정
불러오기(Loading)
HTTP 모듈 또는 파일 시스템으로 전달 받은 리소스 스트림을 읽는 과정으로 로더가 이 역할을 맡고 있다. 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인하고, 팝업창을 열지 말지, 또는 파일 다운로드 받을지를 결정한다.
브라우저는 서버로부터 HTML 문서를 모두 전달받고 HTML 파서를 통하여 파싱(parsing)하고 파싱 트리를 생성한다. 생성된 파싱 트리를 기반으로 DOM 트리를 생성한다.
CSS파일은 CSS파서에 의해 파싱 되어 CSSOM트리로 변환된다.
CSS 파일은 스타일 시트 객체로 파싱 되고 각 객체는 CSS 규칙을 포함한다. CSS 규칙 객체(CSSOM)는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다.
(<link> ,<style> 를 통하여 생성)CSS를 파싱할 때 link나 script를 만나면 그 아래의 DOM 생성을 멈추고 CSSOM을 생성했던 것 처럼 script 태그도 동일하다. 다른 점은 CSSOM도 렌더링 엔진이 만들었다면, script 태그 내의 자바스크립트 코드를 파싱할 때는 렌더링 엔진이 자바스크립트 엔진에게 제어권을 넘긴다.(이를 blocking이 일어났다고도 한다)이후 자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권이 넘어가 HTML 파싱이 중단된 시점부터 다시 시작하여 DOM 생성을 재개한다.
DOM(Document Object Model) : HTML태그를 JS에서 이용할수 있는 객체로 만드는 것이다. 즉, HTML문서의 객체 기반 표현 방식이다. DOM은 HTML의 구조 및 정보뿐만 아니라 HTML 요소를 제어할 수 있는 DOM API를 제공한다. DOM API는 DOM의 각 노드와 상호작용하기 위한 인터페이스, 또는 HTML을 JS에서 제어하기 위한 명령들의 집합이며 대표적으로 자바스크립트에서 자주 사용하는 document.querySelector() 등을 예로 들 수 있다. 이러한 DOM API를 사용하면 이미 생성된 DOM을 동적으로 조작할 수 있다.
파싱(parse or parsing) : 문서를 파싱한다는 것은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것이다. 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고, 실행하기 위해 텍스트의 문자열을 분해하고 구조를 생성하는 일련의 과정을 말한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리 또는 문법 트리 라고 부른다.
DOM과 CSSOM을 합친다.
Lay out
렌더트리가 만들어 졌으면 이것을 토대로 브라우저의 뷰포트(Viewport) 내에서 그려질 노드와 그의 스타일값 그리고 치수까지 계산한다. 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계이다.(reflow 단계)
Viewport: 그래픽이 표시되는 브라우저 영역, 크기로 뷰포트는 모바일의 경우 디스플레이의 크기, pc의 경우 브라우저 창의 크기에 따라 달라진다.
Paint_화면에 그리기
이 정보들을 페인팅 단계로 전달해서 렌더트리의 각 노드를 화면 상의 실제 픽셀로 변환한다.
Composite_합성단계
여러 레이어로 나누어진 픽셀값들을 우리가 실제로 보는 화면처럼 합성해주는 단계이다. 4번의 Painting 단계에서 그려진 레이어들을 순서에 맞추어 합성해 유저가 보는 화면을 만든다.
브라우저 렌더링은 딱 한 번만 실행되는 게 아니다.
자바스크립트에 의한 노드 추가 또는 삭제될 때, (ex. Element.insertAdjacentHTML())
브라우저 창 리사이징에 의한 뷰포트(현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역) 크기가 변경될 때,
HTML 요소의 레이아웃에 변경을 발생시키는 width, height 등의 스타일이 변경되었을 때
등의 경우들 반복해서 레이아웃 계산과 페인팅이 재차 실행되고 이를 리렌더링이라고 한다._(Reflow/Repaint)
++ 리렌더링은 성능에 악영향을 준다. (리렌더링이 될 때마다 파일을 다 다시 읽어야 한다! 내가 관심 있는 성능 최적화와 관련이 깊기도 하다.) 따라서 리렌더링이 자주 일어나지 않도록 자바스크립트로 과하게 노드를 제어하거나, display: none을 주었다가 다시 보여주는 등 남용을 주의해야 한다.
추가작성
자바스크립트는 자바스크립트 엔진이 처리한다. HTML 파서는 <script>태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘기는데 제어 권한을 넘겨받은 자바스크립트 엔진은 <script>태그 내의 Javascript 코드 또는 src속성에 정의된 Javascript 파일을 로드하고 파싱하여 실행한다. Javascript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개합니다.
브라우저는 동기적으로 HTML, CSS, Javascript를 처리한다. 하지만 자바스크립트 엔진에 제어 권한이 있을 때 Javascript 코드가 완성되지 않은 DOM을 조작하게 된다면 에러가 발생한다. 이것이 HTML 파일에서 Javascript 코드를 <body>태그 하단에 위치시키는 이유이다.출처_https://bbangson.tistory.com/87
