💻 브라우저 렌더링(feat. 말하면서 배워요)

말하면서 배워요 스터디에서 공부하는 내용으로 질문과 대답 위주의 글입니다. 또한 내용에 오류나 오타가 있을 시 댓글로 알려주시면 감사하겠습니다.

0. 브라우저에 특정한 URL을 입력하면 발생하는 각각의 단계에서 어떤 일이 발생하는지 알려주세요.

• URL 파싱, DNS 조회, ARP로 MAC주소 변환, TCP 통신, 브라우저 렌더링

1. URL 해석(파싱)
브라우저에서 url을 해석하여, 해당 주소에 해당하는 자원을 요청한다.

2. DNS 조회
URL과 연결된 DNS 서버로 이동하여 URL에 할당된 IP주소를 찾는다. 다만 브라우저에 캐시가 남아있다면, DNS 서버에 접근하지 않아 시간을 절약할 수 있다.

3. IP주소를 이용하여 ARP 프로토콜을 통해 MAC주소 검색
IP 주소는 논리 주소이므로 실제 서버의 위치를 알 수 없습니다. 따라서 ARP(Address Resolution protocol)을 이용하여 해당 서버의 MAC주소를 찾고, 서버와 통신을 시도한다.

*ARP(Address Resolution Protocol) : 논리주소인 IP주소를 MAC 주소로 변환하는 프로토콜

4. 웹 서버와 TCP 연결 시도
대상 서버와 통신을 위한 TCP 소켓을 연결한다. TCP 통신은 3-way-handshake과정을 거친다.

3-way-handshake
TCP/IP 프로토콜을 이용한 통신에서 데이터를 전송하기 이전에 정확한 전송을 위하여 클라이언트와 서버의 세션을 수립하는 과정이다.

클라이언트는 서버에 접속시작을 알리는 패킷을 보내고, 서버는 이 요청을 받아 수락한다는 표시를 추가한 패킷을 클라이언트에 응답합니다. 클라이언트는 이 응답을 받아 확인했다는 응답을 최종적으로 보내주게 되면 서버와 클라이언트는 연결이 되어 신뢰성을 가지게 됩니다.

6. 서버가 응답을 반환
HTTP/HTTPS 프로토콜로 들어온 패킷을 읽고 처리한다. 즉, 요청(www.naver.com의 index에 해당아는 resourse)에 따른 적절한 응답 값을 반환(HTML, CSS, Javascript)한다.

1. 브라우저 렌더링 과정을 흐름에 따라 설명해주세요.

• HTML파싱, CSSOM , DOM Tree, RenderTree, Layout(reflow), Paint

1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.
2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다.

• 파싱 과정 : 바이트 -> 문자 -> 토큰 -> 노드 -> DOM/CSSOM

3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(추상 구문 트리)를 생성하고 바이트코드로 변환하여 실행합니다. 이 때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM으로 변경할 수 있습니다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다.
4. 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅 합니다.

2. Reflow와 Repaint는 무엇이고, 언제 발생하나요?

DOM과 CSSOM이 변경되는 경우에 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저 화면에 다시 렌더링 되는데 이를 리플로우, 리페인트라고 합니다.

Reflow
레이아웃 계산을 다시 하는 것을 말하며, 노드 추가/삭제, 요소의 크기/위치 변경 등 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 실행됩니다.

Repaint
재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것을 말합니다.

다만, 리플로우와 리페인트가 반드시 순차적으로 실행되는 것은 아니며 레이아웃에 영향이 없는 변경은 리플로우 없이 리페인트만 실행됩니다.

3. script 태그를 body 가장 하단에 삽입하는 이유는 무엇일까요?

• DOM 조작, 로딩 시간

브라우저는 순차적으로 HTML, CSS, 자바스크립트를 파싱하고 실행하는데 이것은 script 태그 위치에 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있다는 것을 의미합니다. DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 에러가 발생할 수 있고, 자바스크립트 로딩/파싱/실행으로 인해 HTML 요소들의 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩 시간이 단축되기 때문에 body 요소의 가장 아래에 script 태그를 위치하는 것이 좋습니다.

4. script 태그의 async, defer 어트리뷰트에 대해서 설명해주세요

자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 근본적으로 해결하기 위해서 async와 defer 어트리뷰트가 생겼습니다. 이 두 어트리뷰트는 src 어트리뷰트를 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용할 수 있습니다. 모두 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됩니다. 하지만 자바스크립트 실행 시점에 차이가 있습니다.

async 어트리뷰트
HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 단, 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 이후 진행되며, 이때 HTML 파싱이 중단된다. 여기서 여러 개의 script 태그에 async 어트리뷰트를 지정하면 script 태그의 순서와는 상관 없이 로드가 완료된 자바스크립트부터 먼저 실행되므로 순서가 보장되지 않는다.

defer 어트리뷰트
HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 단, 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후에 진행된다. 따라서 DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용하다.

5. reflow, repaint를 줄일 수 있는 방법은 무엇이 있을까요?

• reflow, repaint를 일으키는 스타일 사용 줄이기
• 전역 스타일 변경하지 않기
• virtual DOM 사용하기 : 뷰의 변화를 먼저 virtual DOM에 전달해 줌으로서 브라우저내에서 발생하는 양을 줄이면서 성능이 개선됩니다.
• 사용하지 않는 노드에는 display: none;을 사용하기

6. virtual DOM을 사용하는 것이 항상 옳을까요?

Virtual Dom은 실제 DOM의 작업량을 실질적으로 줄여주는 것은 맞지만 많은 컴포넌트를 조작하게 된다면 오버헤드가 생기기 마련이고 메모리에 존재하기 때문에 메모리의 사용이 늘어날 수 밖기 때문에 항상 옳은 것은 아니다.

Ref

• 이웅모 저, ⌜모던 자바스크립트 Deep Dive⌟, 위키북스
• 말하면서 배워요 스터디