브라우저

브라우저는 웹에 접속하고 사용하기 위한 소프트웨어

주요 기능

컨텐츠를 서버에 요청하고 요청받은 컨텐츠를 브라우저에 표시하는 것

브라우저는 html과 css명세에 따라 파일을 해석해서 표시. (명세는 W3C가 정한다.)

구성 요소

사용자 인터페이스 : 페이지(컨텐츠)를 제외한 나머지 모든 부분 ( 뒤로가기, 북마크, 새로고침 등)
렌더링 엔진 : 요청한 컨텐츠를 표시해주기 위한 s/w로 html내의 css,js등을 파싱하여 화면에 표시
firefox는 게코(Gecko)엔진을 크롬과 사파리는 웹킷(Webkit)엔진을 사용한다.
엔진마다 동작과정은 조금씩 다르다.
브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 동작을 제어
UI 백엔드 : 콤보박스, 버튼, 창 같은 기본적인 장치를 그리는 부분
자바스크립트 해석기 : js 코드를 해석하고 실행
자료 저장소 : 자료를 저장하는 계층으로 쿠키와 같은 모든 종류의 자원을 저장

동작과정

렌더링 엔진이 html문서를 파싱하여 내부에서 태그를 DOM(Document Object Model)노드로 변환하여 DOM 트리를 구축한다.
DOM은 html,xml 문서의 프로그래밍 인터페이스로 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 DOM구조에 접근 할 수 있게해서 내용 변경을 가능하게 한다.
한마디로 웹페이지를 스크립트, 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
외부 css파일을 이용하여 스타일 요소도 파싱해 렌더 트리를 생성한다.
각 노드들이 화면의 어디에 표시할지 배치한다. (렌더 트리 배치)
UI 백엔드에서 렌더 트리의 노드를 다니면서 실제로 형상을 만들어내는 과정. (그리는 과정)

파싱

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환 하는 것

파싱 결과는 트리구조로 파싱 트리 or 문법 트리라고 한다.

문맥 자유 문법 : 파싱할 수 있는 모든 형식은 정해진 용어와 구뮨 규칙에 따라야 하는 것

하는 역할

어휘 분석 : 자료를 토큰으로 분해하는 과정
공백과 줄 바꿈 같은 의미없는 문자는 제거
구문 분석 : 언어의 구문 규칙을 적용하는 과정

-> 어휘 분석기와 구문 분석을 통해 파싱 트리 구성

변환 : 파싱트리의 문서를 다른 양식으로 변환하는 컴파일의 기능을 수행한다.

-> 변환을 통해 파싱트리는 기계 코드가 된다.

파서 종류

하향식 파서 : 구문의 상위 구조부터 일치하는 부분을 찾는 것
상향식 파서 : 낮은 수준의 규칙 에서 높은 수준으로 찾는 것

HTML 파서

HTML 마크업을 파싱 트리로 변환

문맥 자유 문법이 아니기 때문에 일반적인 파서는 HTML에 사용할 수 없으나 CSS와 js를 파싱하는데 사용된다.
HTML은 암묵적으로 태그가 생략이 가능한 것과 같이 유연한 문법이기 때문에 일반적인 파서로 파싱하기 어렵다.
또, HTML 오류에 대한 브라우저의 관용과 실제 HTML내부값은 입력과정에서 변경이 될 수 있어 재파싱이 이루어지기 때문에 파싱이 어렵다.

토큰화 와 트리구축 두단계로 파싱 알고리즘을 수행한다. 자세한 내용은 reference를 참조하자

파서는 유연한 문법인 HTML문서를 다루는 만큼 왠만한 오류를 자체적으로 처리해준다.

스크립트

웹은 파싱과 실행이 동시에 수행되는 동기화 모델로 스크립트가 실행되는 동안 문서의 파싱은 중단된다.

스크립트를 지연(defer)로 표시하면 문서 파싱은 중단되지 않고 문서파싱 완료 후 스크립트 실행

예측 파싱 : 스크립트를 실행하는 동안 다른 스레드가 문서 나머지 부분을 파싱하여 병렬로 처리하는 것.
외부 스크립트,스타일 시트와 같이 외부 자원을 파싱
스타일 시트 : DOM트리를 변경하지 않기 때문에 문서파싱을 기다리거나 중단하지 않으나 스크립트가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우에는 문제가 생기기 때문에 개코는 파싱중인 스타일시트가 있을때 모든 스크립트 실행을 중단 시키고 웹킷은 문제가 될만한 속성이 있을때만 스크립트를 중단시킨다.

DOM트리와 렌더트리의 관계

렌더러는 DOM요소에 부합하지만 1:1 대응 관계는 아니다.

head와 같은 비시각적 DOM요소는 렌더 트리에 추가 되지않고 selct와 같은 DOM요소는 표시영역,드롭다운 목록,버튼과 같이 여러개의 렌더러가 존재하는 것처럼 말이다.

렌더링 엔진은 통신을 제외한 대부분의 경우에 단일 스레드로 동작

Refrerence

https://d2.naver.com/helloworld/59361

PreviousHTTP통신 기반 인증 NextCSR 과 SSR

Last updated 3 years ago