본문 바로가기

FE Development/Web3

HTTP/1.1 vs HTTP/2.0 HTTP/1.1 Connection Connection 일반 헤더는 현재의 전송이 완료된 후 네트워크 접속을 유지할지 말지를 제어한다.. 만약 전송된 값이 keep-alive면, 연결은 지속되고 끊기지 않으며, 동일한 서버에 대한 후속 요청을 수행할 수 있습니다. http/1.1의 경우 일반적으로 하나의 connection에 하나의 요청을 처리 한다. 그러므로 요청마다 connection을 만들게 되고 TCP 특성상 매 연결마다 3 Way Handshake 가 반복적으로 일어나 불필요한 RTT증가와 네트워크 지연을 초래하여 성능을 저하 시키게 된다. http/1.0 에서는 요청 헤더에 Connection: Keep-Alive를 추가하면 이용할 수 있다. http/1.1 에서는 기본으로 동작한다. 3 Wa.. 2022. 3. 2.
리플로우와 리페인트 - 브라우저의 렌더링 과정 렌더링 과정 (Critical Rendering Path) DOM 트리 생성 마크업 언어로 만들어진 문자열을 메모리에서 다루기 위해 HTML 태그를 파싱해 DOM 트리를 구성한다. DOM은 데이터의 표현식으로 모든 HTML 태그는 태그 테이터의 표현식인 DOM 요소로 1:1로 대응해 표현된다. 메모리에 만들어진 객체를 document라고 하고 구조를 DOM이라고 한다. 이 구조는 트리형태로 구성되며 이를 DOM트리 라고 한다. CSSOM 트리 생성 StyleSheet을 파싱하여 CSSOM (스타일 구조체)를 생성한다. 스타일 정보는 단계적으로 처리되며 가장 마지막 단계의 스타일 정보가 이전 스타일보다 우선적으로 적용된다. 스타일 정보의 처리 단계 브라우저 자체에 포함된 기본 스타일 정보 (User Age.. 2022. 2. 20.
Web Storage ( 브라우저 저장소 )와 쿠키 쿠키란? HTTP 쿠키 서버가 사용자의 웹 브라우저에 보내는 작은 데이터 조각이다. Stateless 한 HTTP 프로토콜의 상태 저장 정보를 기억하는데 사용된다. Stateless 란? 모든 HTTP Request는 완전히 독립되어 전후 요청에 영향을 받지 않는다. 즉, 이전 요청에 대한 데이터를 따로 저장하지 않으면 서버에서 매번 모든 데이터를 보내야 한다. 이를 극복하기 위해 쿠키 ( 외 다양한 Storage )를 사용한다. 쿠키 특징 HTTP 요청이 있을 때마다 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다. HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약하다. 쿠키는 개수와 용량에 제한이 있으며 만료일자를 지정하게 되어 있다. 만료.. 2021. 10. 7.