TIL

1. 주소창에 naver.com을 치면
2. 브라우저 렌더링
3. Incremental Rendering

1. 주소창에 naver.com을 치면

주소창에 URL을 입력했을 때, 어떤 일이 벌어질까.

1. URL 입력
   • 보통 주소창에 주소를 입력할 때는 인지하기 쉬운 도메인을 사용한다.
   • 필요한 데이터가 있는 PC는 IP 주소를 통해서 찾아갈 수 있고, 아직은 도착 지점을 알 수 없다.
2. DNS
   • Domain Name System 의 줄임말인 DNS는 우리가 입력한 도메인을 IP로 변환해주는 작업을 한다.
   • 브라우저 캐시, OS 캐시, 라우터 캐시, DNS 서버 순서로 도메인을 탐색해가며 IP를 확인한다.
3. HTTP 요청 생성
   • 찾은 IP로 보낼 HTTP 요청을 생성한다.
4. TCP 통신
   • 일반적으로 TCP 통신을 통해 HTTP 요청을 전달한다.
   • TCP는 데이터를 안전하고 신뢰성 있게 전달하기 위한 규약이다.
   • 3-way handshake (SYN, SYN/ACK, ACK) 과정을 통해서 신뢰성을 확보하고, 데이터를 작은 조작으로 나누어 전달한다.
   • 나누어진 조작은 각각 인덱스를 가지고 있어서 받았을 때 순서대로 재조합해서 확인하는 것이 가능하다.
5. HTTP 응답 생성
   • HTTP 통신은 요청과 응답이 한 세트로 동작한다.
   • 요청을 받은 (일반적으로 서버라고 부르는) PC는 HTTP 응답을 생성한다.
6. TCP 통신

2(7). 브라우저 렌더링

생각보다 복잡한 과정을 거쳐 가지고 온 데이터는 어떻게 화면에 표현될까.

Parsing

• HTML과 CSS를 각각 해석해서 DOM(Document Object Model), CSSOM(CSS Object Model) Tree를 만든다.

Style

• 만들어진 DOM과 CSSOM을 합쳐 Render Tree를 만든다.
• 이 단계에서 display: none인 요소는 렌더 트리에 포함되지 않지만, visibility: hidden인 요소는 렌더 트리에 포함된다.

Layout

• 만들어진 렌더 트리를 기준으로 요소마다 픽셀화된 크기와 위치가 결정된다.

Paint

• 결정된 CSS 요소에 따라 레이어별로 나뉘어서 그려진다.
• 이떄의 레이어는 z-index와는 무관하다.
• position 속성을 가진 요소는 모두 개별 레이어로 그려진다.
  따라서 position 속성을 가진 요소가 많아지면 성능에 영향을 줄 가능성이 커진다.

Composite

• 분리되어 있던 레이어를 하나로 합쳐 실제 화면에 표시한다.

3. Incremental Rendering(1)

브라우저 렌더링 성능을 개선하려면 어떤 방법이 있을까.

Incremental Rendering은 변동사항이 있는 부분만을 새롭게 그리는 기법을 말한다.

• React나 Vue 같은 프레임워크에서 자연스럽게 수행되고 있는 과정 중에 하나이기도 하다.

• React는 가상 DOM이라는 개념을 통해, 실제 DOM과 가상 DOM을 비교해서 변동사항이 있는 부분만 렌더링한다.

• Vue는 가상 DOM이 아닌 데이터를 기준으로 변경된 데이터가 있는 컴포넌트를 렌더링한다.

// 가상 DOM 생성
let virtualDOM = {
  counter: 0,
};

// 실제 DOM 요소
const counterElement = document.getElementById('counter');

// 카운터를 증가시키는 함수
function incrementCounter() {
  // 가상 DOM의 값을 업데이트
  virtualDOM.counter += 1;
  
  // 변경된 부분만 실제 DOM에 업데이트
  counterElement.textContent = virtualDOM.counter;
}

// 버튼 클릭 이벤트에 카운터를 증가시키는 함수를 연결
const buttonElement = document.getElementById('incrementButton');
buttonElement.addEventListener('click', incrementCounter);

• 코드처럼 직접적으로 바꿔주면 변경된 부분만 렌더링이 이루어진다고 한다.

---