on
[Web] 브라우저 동작 방법
[Web] 브라우저 동작 방법
브라우저 주소 창에 http://naver.com 을 입력했을 때 어떤 과정을 거쳐서 화면에 보이게 될까?
브라우저 주요 기능
사용자가 선택한 자원(html, pdf, image 등)을 서버에 요청하고, 브라우저에 표시한다.
자원의 주소는 URI에 의해 정해진다.
- 브라우저는 html과 css 명세에 따라 html 파일을 해석해서 표시하는데, 이 명세는 웹 표준화 기구 W3C에서 정해짐
- 브라우저가 가진 인터페이스는 보통 비슷비슷한 요소들이 존재한다. (URI 입력하는 주소표시줄, 이전/다음/새로고침 버튼 등) 시간이 지나면서 사용자에게 필요한 서비스들로 서로 모방하며 갖춰지게 된 것이다.
브라우저 기본 구조
사용자 인터페이스
: 주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 활용하는 서비스들 (요청한 페이지 보여주는 창 제외 나머지)
: 주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 활용하는 서비스들 (요청한 페이지 보여주는 창 제외 나머지) 브라우저 엔진
: 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
: 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진
: 요청한 콘텐츠 표시 (html 요청이 들어오면 -> html, css 파싱해서 화면에 표시)
: 요청한 콘텐츠 표시 (html 요청이 들어오면 -> html, css 파싱해서 화면에 표시) 통신
: http 요청과 같은 네트워크 호출에 사용 (플랫폼의 독립적인 인터페이스로 구성되어 있음)
UI 벡엔드
: 플랫폼에서 명시하지 않은 일반적 인터페이스 (콤보 박스 창 같은 기본적 장치를 그림)
자바스크립트 해석기
: 자바스크립트 코드를 해석하고 실행
: http 요청과 같은 네트워크 호출에 사용 (플랫폼의 독립적인 인터페이스로 구성되어 있음) : 플랫폼에서 명시하지 않은 일반적 인터페이스 (콤보 박스 창 같은 기본적 장치를 그림) : 자바스크립트 코드를 해석하고 실행 자료 저장소
: 쿠키 등 모든 종류의 자원을 하드 디스크에 저장하는 계층
렌더링
렌더링 엔진은 요청 받은 내용을 브라우저 화면에 보여준다. 기본적으로 html, xml 문서와 이미지를 표시할 수 있으며 추가로 플러그인이나 브라우저 확장 기능으로 pdf 등 다른 유형도 표시 가능하다.
렌더링 엔진 종류
크롬, 사파리: 웹킷(Webkit) 엔진 사용 (최초 리눅스 플랫폼에 동작하기 위한 오픈소스 엔진)
파이어폭스: 게코(Gecko) 엔진 사용
렌더링 동작 과정
DOM 트리 구축을 위한 HTML 파싱 -> 렌더 트리 구축 -> 렌더 트리 배치 -> 렌더 트리 그리기
html 파싱: 통신으로 받아온 HTML 문서, 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.
이 과정을 통해 DOM 트리와 CSSOM 트리가 구축된다.
(파싱: 문서 구조를 읽을 수 있는 코드로 변환하는 것. 어휘 분석과 구문 분석 과정을 거침) 렌더 트리 구축: 1에서 구축한 DOM 트리와 CSSOM 트리를 합쳐 렌더 트리를 구축한다.
-> 렌더 트리는 페이지를 렌더링하는데 필요한 노드(색상 또는 면적 등의 시각적 속성)만 포함하며, 정해진 순서대로 화면에 표시된다. (위치와 크기는 가지고 있지 않음) 랜더 트리 배치: 레이아웃은 각 객체의 정확한 위치 및 크기를 계산한다. 페인트: 마지막으로 UI 백엔드에서 픽셀을 화면에 그리며 형상을 만들어낸다.
실제로 렌더링 엔진은 좀 더 나은 사용자 경험을 위해, 가능하면 빠르게 내용을 표시하기 위해
모든 HTML을 파싱할때까지 기다리지 않고 배치와 그리기 과정을 시작한다.
-> 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에, 받은 내용의 일부를 먼저 화면에 표시하는 것이다.
(우리가 웹페이지에 접속할 때 한꺼번에 뜨지 않고 점점 화면에 나타나는 것이 이 이유!)
DOM
DOM: Document Object Model (문서 객체 모델)
문서 객체: 웹페이지 소스에 , 와 같은 태그들이 존재하는데,
이를 Javascript가 활용할 수 있는 객체로 만든 것
=> DOM: 웹 브라우저가 html 페이지를 인식하는 방식 (tree 형식의 자료구조를 가짐)
웹킷 동작 구조
어태치먼트: 웹킷이 렌더 트리를 생성하기 위해 DOM 노트와 스타일 정보를 연결하는 과정
- 주소창에 url을 입력하고 enter를 누르면, 서버에 요청이 전송된다.
- 해당 페이지에 존재하는 여러 자원들이 보내진다.
- 브라우저는 해당 자원이 담긴 html과 스타일이 담긴 css를 W3C 명세에 따라 해석한다.
- 렌더링 엔진은 html 파싱을 시작하고, html 파서가 문서에 존재하는 어휘와 구문을 분석하면서 DOM 트리를 구축한다.
- 다음으로 css 파싱을 시작한다. css 파서가 모든 css 정보를 스타일 구조체로 생성한다.
- 이 두가지를 연결시켜 렌더 트리를 만든다. -> 문서가 시각적 요소를 포함한 형태로 구성된 상태
- 화면에 배치를 시작하고, UI 백엔드가 노드를 돌며 형상을 그린다.
- 이 때 빠른 브라우저 화면 표시를 위해 '배치'와 '그리기'는 자원 전송을 기다리는 동시에 일부분 먼저 진행된다.
출처: https://gyoogle.dev/blog/web-knowledge/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%20%EB%8F%99%EC%9E%91%20%EB%B0%A9%EB%B2%95.html
from http://gokong.tistory.com/37 by ccl(A) rewrite - 2021-10-11 22:26:53