웹 성능
웹 성능은 개발자의 주요 관심사 중 하나입니다. 그리고 웹 성능에 영향을 미치는 주요 항목은 '지연시간'과 '싱글 스레드'입니다.
지연시간
네트워크를 통해 얼마나 빠르게 페이지 로드가 이루어지게 하는지는 매우 중요합니다. 이에 대한 해결책으로는 최대한 빠르게 요청하는 것과 최소한의 데이터를 응답받는 것 등이 포함될 수 있습니다.
싱글 스레드
웹 브라우저는 싱글 스레드로 동작합니다. 따라서 메인 스레드의 책임을 줄여주는 방식으로 웹 성능 향상을 이룰 수 있습니다.
탐색(Navigation)
탐색은 웹 페이지를 로딩하는 첫 단계로, 사용자가 URL을 주소창에 직접 입력하거나 링크를 클릭하고 폼을 제출하는 등의 동작을 통해 웹 페이지에 대한 요청을 서버에게 보낼 때 발생합니다.
DNS 조회
웹 페이지를 탐색하기 위해서는 해당 페이지의 자원이 어디에 위치하는지를 먼저 알아야 합니다. 이때 해당 사이트에 처음 방문하는 것이라면, DNS 조회가 필요합니다.
DNS(Domain Name System)란?
도메인 이름 시스템인 DNS는 사람이 읽기 편한 도메인 이름(e.g. www.amazon.com)을 컴퓨터가 읽을 수 있는 IP 주소(e.g. 192.0.2.44)로 변환해줍니다.
인터넷의 DNS 시스템은 도메인과 IP 주소를 마치 이름과 전화번호 같은 형식으로 각각 매핑하여 관리해주고 있습니다.
다시 돌아와서, 브라우저가 DNS 조회를 요청하면 이름 서버에 의해서 처리되고 IP 주소를 응답받게 됩니다. 이 IP 주소를 일정 기간 동안 캐시되어, 후속 요청 속도를 높여줍니다.
DNS 조회는 보통 호스트 이름 하나당 한 번만 수행되지만, 글꼴, 이미지, 스크립트, 광고 등의 자원들이 서로 다른 호스트 이름을 가지고 있다면 각각에 대해서 모두 수행되어야 합니다.
TCP 3-way Handshake
IP 주소를 알았다면, 브라우저는 서버와 TCP 3-way handshake를 통해 연결을 설정합니다.
이 방식은 데이터를 전송하기 전에 통신하는 두 주체, 즉 브라우저와 서버가 TCP 소켓 연결을 위한 매개변수를 주고 받을 수 있도록 만들어졌습니다.
TCP(Transmission Control Protocol, 전송 제어 프로토콜)란?
TCP는 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 중요한 네트워크 프로토콜입니다. 이는 데이터와 패킷을 보내진 순서대로 전달하는 것과 에러 없이 신뢰할 수 있도록 전달하는 것을 보증해줍니다.
패킷은 네트워크를 통해 전송되는 형식화된 데이터 덩어리이며, 사용자 데이터와 제어 정보로 구성되어 있습니다. 사용자 데이터는 흔히 알려진 'payload'이며, 제어 정보는 페이로드를 전달하기 위한 정보로 '네트워크 주소, 순서 정보, 오류 감지 코드'로 구성되어 있습니다.
두 컴퓨터 간 TCP 세션을 협상하고 시작하기 위해서는 3개의 메세지를 주고받아야 합니다.
이는 각각 'SYN, SYN-ACK, ACK'에 해당됩니다.
-
SYN
클라이언트가 서버에게 SYN 메시지를 보냅니다. 이 메시지에 포함된 시퀀스 번호는 클라이언트가 임의로 설정한 값 A입니다. -
SYN-ACK
서버가 클라이언트에게 SYN-ACK 메시지로 응답합니다. 이 메시지에 포함된 시퀀스 번호는 서버가 임의로 설정한 값 B이고, 응답 번호는 (A+1)입니다. -
ACK
클라이언트가 서버에게 다시 ACK 메시지를 보냅니다. 이 메시지에 포함된 응답 번호는 (B+1)
TLS 협상
HTTPS를 이용한 보안성 있는 연결을 위해서는 또 다른 추가 handshake가 필요합니다. 여기서 통신 암호화에 사용할 암호를 결정하고, 서버를 확인하고, 실제 데이터 전송 전에 안전한 연결이 이뤄지도록 해줍니다.
TLS(Transport Layer Security, 전송 계층 보안)란?
SSL(Secure Sockets Layer)에서 발전된 TLS는 애플리케이션들 네트워크 상에서 안전하게 통신하기 위한 프로토콜입니다. 서버와 클라이언트가 TLS로 통신을 할 때, 제 3자가 메시지를 변형시키거나 감청할 수 없도록 해줍니다.
응답
웹 서버로 한 번 연결이 성립되고 나면, HTML 파일을 요청하는 초기 HTTP request를 보냅니다. 그리고 서버는 요청을 받아서, 관련 응답 헤더와 함께 HTML 파일을 응답해줍니다.
TTFB(Time to First Byte)는 사용자가 요청을 보내고, HTML의 첫 패킷을 받는데까지 걸린 시간입니다.
TCP Slow Start
첫번째 컨텐츠 청크는 일반적으로 14kb 크기의 데이터입니다. 이러한 사이즈는 네트워크 통신의 속도를 조절하는 알고리즘인 'TCP Slow Start'에 의해 정해졌습니다.
이는 네트워크의 최대 대역폭을 파악할 수 있을 때까지 점진적으로 데이터의 전송량을 증가시키기 위함입니다. 네트워크의 최대 용량을 찾아서 확산되는 정보의 양을 천천히 늘리고, 초기에 기능을 알 수 없는 네트워크 혼잡 현상을 방지해줍니다.
첫 패킷을 받고난 이후 서버는 다음 패킷을 사이즈를 2배인 28kb로 늘립니다. 미리 정의한 임계치에 다다르거나 혼잡의 징후가 나타나기 전까지 2배씩 커집니다.
혼잡 제어 알고리즘은 서버가 보낸 패킷의 흐름과 확인 응답(acknowledgements, ACKs)을 바탕으로 전송 속도를 결정합니다.
구문 분석(parsing)
브라우저가 첫 번째 데이터 청크를 받으면, 수신된 정보를 구문 분석합니다. 네트워크를 통해 받은 데이터를 DOM이나 CSSOM으로 바꾸는 단계입니다. 이를 렌더러가 화면에 페이지를 그리는데 사용합니다.
브라우저는 마크업을 내부적으로 DOM으로 표현하며, JS의 다양한 API를 통해 조작할 수 있습니다.
요청된 HTML 페이지의 크기가 초기 패킷의 크기인 14kb보다 크더라도, 브라우저는 구문 분석을 시작하고 가지고 있는 데이터 수준에서 렌더링을 시도합니다. 이는 첫 렌더링에 필요한 HTML과 CSS만이라도 첫 14kb에 포함해야 하는 이유입니다.
DOM 트리 구축
HTML을 처리하여 DOM 트리를 만들기 위해서는 토큰화를 먼저 진행해야 합니다. 각 태그의 시작 태그, 종료 태그, attribute, name, value 등이 토큰에 포함됩니다. 그리고 이렇게 토큰화된 입력을 분석하여 DOM 트리를 만듭니다.
DOM 트리에서 HTML 요소는 최상위 노드이며, 태그 간의 관계와 계층이 반영되어있습니다. DOM 노드의 갯수가 많아질수록, 트리 생성이 더 오랜 시간이 걸립니다.
Preload Scanner
브라우저에서 DOM 트리를 만드는 과정이 메인 스레드를 차지하고 있습니다. 따라서 프리로드 스캐너는 사용 가능한 컨텐츠를 분석하고 CSS, JS, Web Font와 같은 우선 순위가 높은 자원을 미리 요청합니다. 이 덕분에 구문 분석기가 요청된 자원에 다다를 때쯤에 이미 해당 자원들이 전송받는 중이거나 전송 받은 후입니다. 이렇게 프리로드 스캐너는 블록킹을 줄여줍니다.
CSS를 다운로드하는 것은 HTML 분석이나 다운로드를 막지 않습니다. 하지만 JS의 실행은 막습니다. 그 이유는 JS는 종종 요소에 영향을 주는 CSS 속성을 조작하기 때문입니다.
CSSOM 구축
JS Compilation
접근성 트리 구축
