웹 개발을 하면서 브라우저 동작 원리도 모른다면 안되겠죠?
[코딩 알려주는 누나] 웹개발자면서 이것도 모름? | DOM과 CSSOM, 렌더링 과정를 보면서 정리해보겠습니다
웹 브라우저 구조
- 사용자 인터페이스
말 그대로 브라우저의 UI이다. 웹 페이지가 계속 렌더링 되어도 변하지 않는다.
ex. 상단바 - 뒤로가기 / 앞으로 가기 / 새로고침 버튼 - 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 - 렌더링 엔진
웹 사이트를 렌더링(그려주는) 엔진 - 통신
네트워크 부분을 담당하는 엔진 - JS 해석기
브라우저가 JS를 이해할 수 있도록 하는 JS 해석기
ex. Chrome - V8 엔진 - UI 백엔드
사용자의 입력, 마우스 이벤트, 클릭 이벤트 등을 핸들링 - 자료 저장소
브라우저에 정보를 저장하는 공간
ex. 로컬 스토리지, 세션 스토리지, 쿠키
DNS
우리는 네이버에 접속하기 위해 도메인 이름인 naver.com(문자열)을 입력한다.
하지만 브라우저가 이해할 수 있는 주소는 IP 주소(숫자)이다.
도메인 주소에서 IP 주소를 얻기 위해 DNS(Domain Name System)에게 찾아간다.
DNS에는 IP 주소와 도메인 이름(naver.com)이 매핑되어 있다.
+) DNS 캐시
세상에는 수많은 웹사이트가 있고, DNS에는 그만큼 많은 도메인 이름과 IP 주소가 저장되어 있기 때문에 DNS에서 IP 주소를 가져오는 것은 복잡한 과정을 거친다.그래서 어렵게 받아온 주소는 DNS 캐시에 저장을 해놨다가 다음부터 캐시에서 빠르게 가져온다.
인코딩
주소를 가져왔다면 서버에게 웹사이트를 그리기 위한 html을 요청한다.
하지만, 서버에서 받은 파일의 형태는 우리가 아는 html 형태가 아닌 0과 1로 구성된 바이트 스트림으로 구성되어 있다. 그것이 컴퓨터에서 전달하기 쉬운 방법이기 때문이다.
따라서 우리가 이해할 수 있는 html 언어로 변환하기 위한 인코딩이 필요하다.
대표적인 인코딩 방법이 utf-8이다. 한국어 뿐 아니라 여러가지 언어를 지원한다.
이것이 우리가 항상 html <head>에 <meta charset='utf-8'>을 명시해 놓는 이유이다.
그러면 우리는 이제 문서를 얻을 수 있게 된다.
HTML 불러오기
다음과 같은 문서를 얻었다고 하자.
<html>
<body>
<div>
<button>버튼</button>
</div>
</body>
</html>브라우저는 이걸 바로 이해할 수 있는 것이 아니라 태그 하나하나를 따라가면서 읽어야 한다.
토큰화
한글자 한글자 char를 읽어서 토큰으로 변환한다.
예시 문서를 토큰화하면 다음과 같다
StartTag: html
StartTag: body
StartTag: div
StartTag: button
버튼
EndTag: button
EndTag: div
EndTag: body
EndTag: html노드화
토큰을 만든 후에는 토큰을 의미있는 값으로 재해석을 해야 한다. Object로 만들어준다.
html body div button 버튼
DOM
노드들을 생성한 후에는 노드간의 관계를 부여해줘야 한다. 오브젝트에서 관계를 삽입해준 것을 모델이라고 부른다.
DOM은 Document Object Model이다.
관계도를 만든 것이 트리구조를 닮았기 때문에 DOM Tree라고 부른다.
CSS 불러오기
바이트 스트림 -> 캐릭터화 -> 토큰화 -> 노드 -> CSSOM Tree
DOM Tree랑 똑같이 CSSOM Tree를 만들게 된다.
body { font-size: 16px; }
p { font-weight: bold; }
span { color: red }
img { float: right }
p span { display: none }
JS 불러오기
JS는 굉장히 강력해서 JS 실행 중에는 돔 파싱을 멈춘다.
(async, defer 속성을 적용하면 멈추지 않는다.)
Render Tree
DOM과 CSSOM을 이용하여 Render Tree를 만들고 그리기만 하면 된다.
이는 Layout -> Paint -> Composite 3단계로 구성된다.
Layout
완벽한 설계도가 있다고 바로 그릴 수는 없고, 이 노드를 화면 어디에 정확히 그릴건지 계산해야 한다.
정확한 px값을 계산하는 단계이다.
Paint
실제로 그리는 단계이다. 하지만 그냥 한페이지에 다 그리는게 아니라 여러개의 레이어로 나눠서 그린다.
하나가 바뀌면 하나 바뀐 것 때문에 전체를 다시 그리기는 싫기 때문.
하나가 바뀌었을 때 그 노드가 포함된 레이어만 수정하면 된다.
Composite
레이어를 나눠서 그렸던 것을 합쳐서 보여준다.
