브라우저는 어떻게 동작하는가. (간단 요약)

해당 글은 면접 단골 질문인, 브라우저에서 주소창에 주소를 입력했을 때, 어떻게 되나요?의 질문을 해결하기 위한 간단하게 정리한 글입니다.

 

해당 질문은 실제로 유명 IT 기업 FE 경력 질문으로 받은 질문이었으며, 해당 질문은 꼬리를 물 수 있는 질문이니 이 부분에 대해 명확히 알 고 가심을 바랍니다.

 

물론 이 글에선 간단하게 정리할거지만요.

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

위 글을 참조하여 재구성한 글입니다.

---

브라우저 기능

• 역할 : 사용자가 원하는 자원을 서버에게 요청하고 그려줌
  • 자원 : HTML, CSS, PDF
    • 해당 자원의 명세는 W3C에서 정함.
  • 자원의 주소 : URI

브라우저 기본 구조

• 사용자 인터페이스 : 사용자의 편의를 위한 창을 제외한 나머지 부분

이런거

• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
• 렌더링 엔진 : 서버에 요청을 보내고, 요청받은 콘텐츠 표시(Webkit)
  • 콘텐츠 : HTML, CSS, JS
• 통신 : 렌더링 엔진으로 부터 HTTP 요청 등을 받아 요청 보내고 응답을 전달함
• 자바스크립트 해석기 : 말 그대로 JS 해석 및 실행 (V8)
• UI 백엔드 : 렌더 트리를 브라우저에 그리는 역할
• 자료 저장소 : 자료를 저장하는 역할

렌더링 엔진 동작 과정

• 요청 받은 내용을 브라우저 화면에 표시

렌더링 엔진의 동작 과정

• HTML 문서를 Parsing 후 DOM 노드로 변환
• CSS 파일도 Parsing 후 DOM 노드에 합쳐 렌더 트리 생성
• 그 후 UI 백엔드에서 위치를 배치하고 거기에 그린다.
  • 이는 비동기로 진행된다.

맨날 보는 그림

HTML 파서

• HTML을 DOM 트리로 변환, 문법은 W3C에서 결정
• Webkit에선 Flex / Bison을 사용

DOM

• HTML 코드가 파싱되어 만들어진 객체 표현
• 브라우저에서 보이는건 DOM이 아닌 DOM과 스타일 규칙이 합친 렌더트리

HTML과 DOM의 차이

• HTML : 화면에 보이고자 하는 문서를 텍스트로 구성된 것 (설계도)
• DOM : HTML 문서를 객체로 만들어서 사용하는 것 (설계도를 이용하여 만든 객체)

스크립트

• 스크립트 태그를 만나면, 파싱과 실행을 하고, 그 동안 문서의 파싱은 중단된다.
• defer를 하면 문서 파싱이 중단되지 않고 문서 파싱이 완료된 이후에 스크립트가 실행된다.
  • 문서 파싱과 스크립트 파싱을 같이하기 때문.

스타일 시트

• 얘는 스크립트와는 다르게 DOM 트리를 변경하지 않기에 문서 파싱을 대기, 중단 안한다.

렌더 트리

• DOM 트리가 구축되는 동안 렌더 트리 구축한다.
  • 즉, DOM 트리 / 스타일 시트 읽으면서 합치고 렌더 트리를 만드는게, 동기가 아니고 비동기로 일어난다는 뜻.
• Webkit에서 불리는 렌더러 or 렌더 객체(렌더 트리 내부 구성 요소)엔 본인과 자식 요소가 어떻게 배치, 그려야하는지 안에 메소드로 표현 됨. 이를 호출 하면 그려짐
• DOM과 1:1 관계가 아님. head / none 속성은 굳이 렌더 트리에 그리지 않는다.

배치

• 위치 정보를 계산하는 것을 배치라 함. 모든 렌더러는 배치 메소드를 가지고 있음.
• 뷰포트 내에서 위치를 잡는 것
  • 뷰포트 : 브라우저의 영역, 크기

그리기

• 배치가 끝나면, 렌더러의 paint 메서드 호출
• 스타일이 복잡할 수록 오래걸림

배치와 그리기 최적화

• Reflow : 이벤트에 따라 레이아웃 수치가 조정되면 자식, 부모 전부 배치를 다시 계산하여 수행하는 과정
  • 윈도우 리사이징 / 노드 추가 제거 / 폰트 변경 등
• Repaint : Reflow 후 발생하는 Repaint 과정
  • bg-color만 수정하면 Repaint만 되기에, 꼭 붙어다니는건 아니다.
• 줄이는 방법
  • 사용하지 않는 노드는 display: none => Render Tree에 아예 제외되기 때문 (위에서도 얘기 했죠 ?)
  • Reflow / Repaint 발생하는 속성 피하기
    • Reflow : width / height / left / right / margin / padding / position / font-size / ...
    • Repaint : background-color / background-image / color / outline-color / ...
    • transform / opacitiy의 경우엔 Reflow / Repaint가 일어나지 않으니 많이 쓰는걱 추천

프레임워크 이야기

• React Virtual DOM / Angular Change Detector
  • DOM에 접근하면, 속성 변화 / 스타일 변화가 많아져서 Reflow, Repaint로 성능 저하됨.
  • Virtual DOM은 이를 한 번에 묶어서, 한 번만 연산을 도와줌

---

이상 브라우저는 어떻게 동작하는가. (간단 요약)였습니다. ^_^