#How Browser Works
유저가 URL을 입력
유저가 URL 을 입력했다.
DNS Lookup
domain을 입력 했을 경우 user의 hosts, 또는 DNS cache를 확인 하여 있을 경우 해당 address를 리턴,
아닐 경우 DNS Server로 요청을 전송한다.
DNS Server의 Recursive Resolver가 TLD(Top-Level-Domain \[.com, .net\]) 등으로 도메인의 네임서버를 요청
해당 서버가 확인하여 해당 nameserver의 ip를 리턴한다.
그 후 브라우저가 웹에 다시 전달하여 해당 ip로 요청을 보낸다.
TCP HandShake
그 후 브라우저는 서버간 통신을위해 개발된 매커니즘인 TCP 3Way HandShake 를 전송.
SYN(시퀀스) - SYN_ACK - ACK(응답 - SEQ+1) 통신을 거친다.
HTTPS의 경우 TCP Negotiation이라는 다른 handshake 과정을 한번 더 거친다.
ClientHello -> ServerHello & certificate -> clientKey -> Fin -> Fin
중간의 certification 은 페이지 로드에 시간을 더하지만 브라우저와 웹 서버 간 전송되는 데이터를 3자가 해독할 수 없기 때문에 그정도 시간은 소비할 가치가 있다.
Response
리스폰스를 통해 응답이 온 HTML 텍스트 패킷을 해석
이 첫번쨰 패킷을 전달받기 까지 걸리는시간을 TTFB (Time To First Byte) 라고 한다.
이후 대역폭 감지와 속도 균형을 맞추기 위한 최대 용량을 알아내기위해 TCP SlowStart 라는 과정을 거쳐 14kb로 시작하여 2배씩 전송량을 점점 늘려나간다.
Parsing
브라우저가 chunk data 를 받으면 해석을 시작한다.
html 텍스트를 파싱하여 DOM 과 CSSOM 트리를 구성하게 된다.
이때 요청된 HTML 의 크기가 Slowstart의 14kb보다 크더라도 브라우저는 이미 받은 데이터를 통해 렌더링 하기 시작한다.
때문에 성능 최적화를 위해 되도록 초기 14kb 안에 css와 html이 포함되어야 한다.
Build DOM tree
첫번쨰로 받은 HTML 구문을 Parse 하여 DOM 요소로 Tokenization 한다.
<HTML />, + Attribute, + textContent 등의 요소로 구분화 하는것이다.
Preload Scanner
그후 프리로드 스캐너 라는게 동작해서 파싱한 요소중 우선순위가 높은 CSS, JS, Font 등의 URL을 먼저 백그라운드 fetching 한다.
이때 async 나 defer 같은 속성을 사용하여 렌더블락킹을 최소화 할 수 있다.
Build CSSOM Tree
그 다음은 DOM 트리와 유사하게 CSS 트리를 파싱한다.
DOM과 마찬가지로 독립된 데이터 구조이며 CSS 규칙을 map of styles로 컨버팅하여 브라우저가 작동하게 돕는다.
브라우저는 css ruleset의 규칙을 각각 탐색하면서 CSS selectors에 기반하여 parent, child, and sibling relationships를 포함한 node Tree를 생성한다.
그 후 CSS 를 위해 HTML to Object 프로세스를 반복하여 스타일을 계단식으로 세분화 하는데 이 작업은 매우 빠르게 진행된다.
Compile JS
그 후 자바스크립트를 interprete => compile -> parse 하여 실행한다.
이 과정에서 Abstract Syntax 트리를 가져와서 인터프리터에 전달, 메인스레드에서 실행되는 바이트 코드로 변경한다.
Building AOM
그 다음은 접근성을 위한 Accessibility Tree 를 생성한다.
Assistive 기기들이 웹을 해석하기 위해 만들어지는 시멘틱한 버전의 DOM 트리이다.
따라서 DOM이 업데이트 되면 AOM도 업데이트가 되며 AOM이 완료되기 전 까지 스크린리더는 컨텐츠를 읽을 수 없다.
Render
렌더링 과정은 style, layout, paint, compositing 의 과정으로 이루어 진다.
parse 스텝에서 만들어진 CSSOM 과 DOM tree는 화면에 보이는 요소들의 layout을 계산하기 위한 render tree 라는 것으로 합쳐지고 난 뒤 스크린에 칠해진다.
특정 유형의 Render Element는 컨텐츠 자체를 별도의 레이어로 분리시키고, CPU 대신 GPU를 가동시켜 메인스레드를 유휴상태로 만들어 렌더링 성능을 향상시킨다.
Style
DOM과 CSSOM을 RenderTree에 병합시키는 과정이다.
Computed Style Tree or render Tree, DOM Tree의 root 부터 시작하여 화면에 visible 되는 node를 탐색한다.
tag가 display 되지 않는, 크기를 차지 하지 않는 display: none 과 같은 요소의 경우 render tree 에 포함되지 않는다.
그와 반대로 opacity: 0, visibillity: hidden 같이 영역을 차지하지만, 보이지 않는 요소들의 경우는 영역이 있기 때문에 render tree에 포함된다.
그 후 Visible 한 node들은 각자의 CSSOM rule을 적용한다. Render tree는 이 각자의 style을 가지고 있는 node 들을 DOM 트리의 node와 일치시키고 CSS의 캐스케이드를 기반으로 각 노드들에게 스타일을 입힌다.
Layout
Style 과정에서 적용된 rule 에 따라 width, height, location을 기반으로 각 페이지에서 요소의 위치를 계산하는 과정이다.
웹 페이지 요소들은 대부분 사각형의 박스모델로 이루어져 있는데, 사용자 환경별로 viewport의 사이즈가 무한히 변경되기 때문에 해당 뷰포트에 고려하여 상자들의 크기를 결정한다.
이러한 크기와 위치를 처음으로 결정하는 과정을 layout 이라고 하며, 이 과정이 끝난후 요소의 크기, 위치가 변경될 경우 다시 계산해내는 과정을 Reflow 라고 한다.
예를 들어 초기에 img 요소가 있을 경우 layout 당시엔 이미지 크기가 결정되어 있지 않았지만, 나중에 img가 업데이트되어 크기를 가지게 된다면 reflow 과정을 거쳐 크기를 재 계산 한다.
Paint
그 후 계산된 노드를 화면에 paint 하는데 이떄 처음으로 그려지는 노드를 **First Meaningful Paint** 라고 한다.
이 단계에서 브라우저는 레이아웃에서 계산된 각 상자요소들을 실제 픽셀로 변경한다.
paint는 text, color, border, shadow를 포함한 모든 요소의 시각적 부분을 화면에 그리는 과정이며 브라우저가 이 과정을 빠르게 마무리 하게 해야한다.
보통 16.67ms 미만으로 reflow, paint, layout을 포함한 모든 작업이 이루어 져야 사용자는 애니메이션과 스크롤이 부드럽다고 느낀다.
화면의 변경된 요소를 다시 그리는 repaint가 빨리 일어나게 하기 위해선 각자 layer로 분리되어 있는편이 작업하기 쉬운데 이를 위해 compositing이 사용된다.
레이아웃 트리의 요소를 레이어로 분리 시키면 CPU의 메인스레드 대신 GPU로 컨텐츠를 승격 시켜 paint & repaint 성능이 향상된다.
video, canvas 를 포함한 레이어를 인스턴스화 하는 특정 요소, opacity, 3d transform, will-change 같은 속성을 사용하면 레이어를 분리시켜 GPU 가속을 유도한다.
하지만 layer 처리는 메모리 관리 비용이 많이 들기 때문에 과도한 사용은 오히려 성능을 감소 시킬 수 있다.
Compositing
그 후 새로운 변경이 있을 때 크기나 위치가 변경된것 없이 화면에 칠해져야할 paint 요소만 변경 되었다면 브라우저는 변경된 부분만 repaint 시켜 변경된 픽셀을 표현하는데 이 과정을 Compositing 이라고 한다.
하지만 단순 paint를 넘어 요소의 크기나 위치가 변경되어 다시 계산이 필요한 경우 다시 layout 단계로 돌아가 relayout과 repaint 과정을 다시 거치게 되어 주의 하며 요소를 변경해야 한다.
Interactive
DONE!
메인스레드에 페인트 과정, 스크립트 컴파일링 까지 완료되고 나면 DOM Loaded 상태가 된다.
그 후 스크립트 컴파일링 과정 등 을 마치고 나면 load 상태가 되며 그 후 사용자 인터랙션에 응답할 수 있는 interactive 상태가 된다.
layout, paint가 완료 되었지만 스크립트가 컴파일중일 경우 interaction이 원할하지 않을 수 있으며 interactive 한 상태가 되기까지의 시간을 **Time To Interactive** 라고 한다.
자료 공유해주신 프론트엔드 단톡방 import님 정말 감사합니다.
'공부기록 > 웹 개발' 카테고리의 다른 글
| PWA란? (0) | 2022.07.14 |
|---|---|
| 폴리필(Polyfill)이란? (0) | 2022.07.14 |
| img 태그 vs background-image (0) | 2022.07.08 |
| Interative 한 버튼 만들기 (2) | 2022.07.07 |
| hello skin 사이드바 크기가 이상할때 (0) | 2022.07.02 |