📑프론트엔드 개발자라면 알아야 할 브라우저의 동작 원리

프론트엔드 개발자라면 알아야 할 브라우저의 동작 원리

2025.4.16 챌린지 성공✅

 

• 웹 성능은 빠른 로딩과 원활한 상호작용을 의미하며, 이는 더 나은 사용자 경험을 제공합니다.
• 웹 성능의 주요 과제는 지연 시간과 브라우저가 대부분 싱글 스레드로 동작한다는 점입니다.
• 탐색(Navigation)은 웹페이지를 로딩하는 첫 단계로, 사용자의 요청으로 시작됩니다.
  • DNS 조회는 요청된 웹페이지의 IP 주소를 찾는 과정이며, 이전에 방문하지 않은 경우 필요합니다. 캐싱을 통해 후속 요청 속도를 높일 수 있습니다.
  • 페이지 내 여러 호스트 이름에 대한 자원(이미지, 스크립트 등)은 각각 DNS 조회가 필요하며, 모바일 환경에서 지연을 유발할 수 있습니다.
  • TCP 핸드셰이크는 브라우저와 서버 간에 데이터 전송 전 연결을 설정하는 과정으로 "SYN-SYN-ACK" 방식으로 이루어집니다.
  • TLS 협상은 HTTPS 연결 시 보안 통신을 위한 암호화 방식을 결정하고 서버를 인증하는 과정으로, 추가적인 왕복이 필요합니다. 보안 연결은 지연을 증가시키지만 중요합니다.
• 응답(Response) 단계에서는 브라우저가 서버에 HTTP GET 요청을 보내고, 서버는 HTML 파일과 응답 헤더를 포함한 응답을 보냅니다.
  • TTFB (Time to First Byte)는 요청 후 HTML의 첫 패킷을 받는 데 걸리는 시간입니다.
  • TCP 슬로우 스타트는 네트워크 대역폭을 점진적으로 늘려가며 데이터 전송량을 조절하는 알고리즘입니다. 혼잡 윈도우(CWND)를 통해 전송할 세그먼트 수를 제어합니다.
• 구문 분석(Parsing)은 브라우저가 받은 데이터를 DOM(Document Object Model)과 CSSOM(CSS Object Model)으로 변환하는 단계입니다. 이는 렌더링에 사용됩니다.
  • 브라우저는 HTML을 토큰화하고 DOM 트리를 구축합니다. 문서가 잘 구성되어 있다면 구문 분석은 빠릅니다.
  • 프리로드 스캐너는 HTML을 분석하는 동안 우선순위가 높은 자원(CSS, Javascript 등)을 미리 요청하여 다운로드 시간을 단축합니다.
  • <script> 태그는 기본적으로 HTML 분석을 중단시키지만, async나 defer 속성을 사용하여 비동기적으로 처리할 수 있습니다. CSS 다운로드는 HTML 분석을 막지 않지만 Javascript 실행은 막을 수 있습니다.
  • 브라우저는 CSS 규칙을 분석하여 CSSOM 트리를 구축합니다. CSS 선택자를 기반으로 노드 간의 관계를 설정하고 스타일을 적용합니다.
  • Javascript 컴파일 과정에서 스크립트는 추상 구문 트리로 구문 분석되고, 바이트코드로 변환되어 메인 스레드에서 실행됩니다.
  • 브라우저는 접근성 트리 (Accessibility Tree)를 구축하여 보조 기기가 웹 콘텐츠를 해석할 수 있도록 합니다.
• 렌더(Render) 과정은 스타일, 레이아웃, 페인트, 합성 단계를 포함합니다.
  • 스타일 단계에서는 DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 렌더 트리는 화면에 보이는 노드와 그 스타일 정보를 담고 있습니다. display: none 속성을 가진 요소는 렌더 트리에 포함되지 않습니다.
  • 레이아웃 단계에서는 렌더 트리를 기반으로 각 노드의 너비, 높이, 위치 등 도형 값을 계산합니다. 이를 리플로우라고 하며, 레이아웃 이후 크기나 위치가 변경될 때 발생합니다. 뷰포트 크기가 레이아웃에 영향을 미칩니다.
  • 페인트 단계에서는 레이아웃 단계에서 계산된 각 노드를 화면의 픽셀로 변환하여 그립니다. 처음 페인팅을 첫 번째 의미있는 페인트라고 합니다. 부드러운 애니메이션을 위해 페인팅 작업은 빠르게 처리되어야 하며, 레이어를 사용하여 성능을 향상시킬 수 있습니다.
  • 합성 단계는 여러 레이어로 그려진 부분을 올바른 순서로 화면에 표시하기 위해 겹쳐서 그리는 과정입니다. 리플로우는 리페인트와 재합성을 유발할 수 있습니다.
• 상호작용(Interactivity) 단계에서는 사용자의 입력에 대한 응답성이 중요합니다.
  • TTI (Time to Interactive)는 페이지가 상호작용할 준비가 될 때까지 걸리는 시간을 측정하는 지표입니다. 첫 번째 콘텐츠 페인트 이후 50ms 이내에 사용자 상호작용에 응답할 수 있어야 상호작용 가능한 시점으로 간주됩니다.
  • 메인 스레드가 Javascript 실행 등으로 점유되어 있으면 사용자 상호작용에 즉시 반응하지 못할 수 있습니다. 메인 스레드를 점유하는 작업을 최소화하는 것이 중요합니다.