서론
시작하기 앞서
수많은 블로그에서 프로그래밍을 위한 기술적 지식을 많이 얻을 수 있었지만 온전하게 내 것으로 만들지 못했던 것 같다. 하여 22년에는 기록으로 학습효율을 높이고 성실성을 기르고자 블로그 작성을 시작하게 되었다.
첫 포스트로 어떤 개념을 작성하는 것이 좋을까 많이 고민했다. 프로그래밍 언어나 테크닉도 좋지만, 현재 부족한 기본 지식과 개념에 대해 작성하기로 하였다.
본론
브라우저란?
브라우저는 웹페이지, 이미지, 데이터 등을 수신, 전송 및 표현하는 사용자 인터페이스이다.
브라우저의 구조
- 사용자 인터페이스
: 주소입력 줄, 이전 또는 다음 버튼 등 웹페이지를 표시하는 부분을 제외한 부분을 말한다. - 브라우저 엔진
: 사용자 인터페이스와 렌더링 엔진 사이에서 동작한다. - 렌더링 엔진
: HTML, CSS등 요청한 콘텐츠를 파싱하여 화면에 표시해준다. 해당 포스트는 렌더링 엔진의 동작에 대해 중심적으로 다룬다. - 통신
: HTTP 요청 등 네트워크에 연관된 작업을 처리한다. - 자바스크립트 해석기
: 자바스크립트를 해석하고 실행한다. - UI 백엔드
: 체크박스나 입력창 같은 기본적으로 정해져 있는 UI를 표시한다. - 자료 저장소
: 기본적으로는 쿠키 또는 다른 종류의 자원을 저장하는 웹 데이터 베이스이다.
브라우저별 렌더링 엔진
| 브라우저 | 렌더링 엔진 |
|---|---|
| IE | Trident |
| Chrome | Webkit |
| Safari | Webkit |
| Firefox | Gecko |
| Opera | Presto |
크롬기준 렌더링 엔진 동작과정
-
HTML문서 파싱
: DOM트리와 CSSOM을 생성한다. DOM트리는 문자열로 변환된 html문서를 html5 표준인 고유 토큰으로 변환하는 토큰화 과정을 거친 후 각각의 토큰을 속성과 규칙을 정의한 렉싱과정을 거친다. 이후 노드간 관계를 갖는 DOM은 트리 구조가 완성된다.
CSSOM은 CSS트리로 DOM트리가 어떻게 페이지에 나타나야할 지 정해주는 역할을 한다.
DOM트리와 같이 트리구조를 이루어 구조상 부모가 갖는 속성을 자식에게 동일하게 적용한다.
상속과 비슷하며 상속이 되는 속성과 그렇지 않은 속성이 있다. -
DOM트리와 CSSOM를 기반으로 렌더 트리 구축
: 렌더트리는 DOM트리의 Document부터 노드를 순회하며 CSSOM트리와 비교하며 알맞는 규칙을 적용한다. 이때 렌더링에 관련있는 요소를 렌더트리에 포함시키고 metaTag나 display:none;같은 노드는 포함시키지 않는다. 렌더트리는 브라우저마다 조금씩 다르게 생성된다. -
Layout과정(= reflow)
: 실질적인 요소 배치를 위한 padding이나 margin값을 계산하여 페이지를 그릴 준비를 한다. -
paint과정
: 실제 화면에 나타내기 위해 그리는 과정이다.
이벤트발생시
이벤트 발생시 다시 화면에 그리기 위해 Layout과정이나 Paint과정 부터 다시 진행이 되는데 레이어 합성만 하는 경우가 있다. CSS의 속성에 따라 다르며 이를 이용하여 성능을 개선할 수 있다.
결론
아쉬운점
이외의 HTML파싱 과정에서 어휘 분석과 구문분석을 통한 자세한 과정이 있지만 다루지 않았다.
더 깊은 이해가 필요하다고 판단되었기 때문이다.(어려워서ㅠ)
위와 관련해서는 앞으로 포스팅하면서 천천히 다뤄볼 예정이다. 그래도 첫 포스트가 완성이 되어 기분이 좋다.😊
자료출처
NAVERD2블로그, 유튜브에 우아한 테크톡, 구글링하여 지나간 수많은 블로그들에서 여러 정보를 수집하여 나름 정리했습니다. 혹여 자료를 사용하는 것에 문제가 된다면 재빠르게 수정하겠습니다.
포스트 작성이 익숙하지 않아 틀린 개념이나 작성자 마음대로 해석한 내용이 있다면 언제든지 조언 부탁드립니다. 감사합니다!🙏
