대기열,캐싱,DNS,라우팅,ARP,초기연결을 거쳐
컨텐츠를 다운받게 되고 이후 브라우저렌더링 과정을 거쳐
네이버라는 화면이 나타나게 되고 이러한 과정이 캡슐화,
비캡슐화과정을 거쳐서 이루어지게 됩니다.
대기열: 브라우저는 주소창입력에 대한 요청을 대기열에 넣는다.
캐싱: 요청된 값의 결과값을 저장하고 그 값을 다시 요청하면 다시 제공하는 기술
이는 공유 프록시캐시와 브라우저캐시로 나누어집니다
브라우저캐시: 쿠키,로컬스토리지
DNS조회: 브라우저가 요청의 IP주소를 확인하는 단계
도메인이름과 IP주소를 매핑해주는 서버
.COM > .naver > www 과정을 거쳐 완벽한 주소를 찾아 ip주소를 매핑
DNS의 장점: 이를 통해 IP주소가 바뀌어도 사용자들에게 똑같은 도메인 주소로 서비스할 수 있습니다.
라우팅: IP주소를 찾아가는 과정
ARP: 이렇게 찾은 IP를 바탕으로 ARP를 통해 물리적인 서버 주소를 찾게됩니다.
IP주소에서 ARP를 통해 MAC주소를 찾아 MAC 주소를 기반으로 통신합니다 ARP란 IP주소로 부터 MAC주소를 구하는 IP와 MAC 주소의 다리 역할을 하는 프로토콜입니다.
브라우저가 TCP 3WAY HAND SHAKE 및 SSL 연결을 통해 연결을 설정합니다. 이후 오쳥을 보낸후 드디어 해당 요청한 서버로부터 응답을 받습니다.
TCP 3WAY: TCP는 장치들 사이에 논리적인 접속을 성립하기 위하여
3-WAY HANDSHAKE를 사용
TCP/IP 프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에, 먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정을 의미
콘텐츠 다운로드: 브라우저는 서버로 부터의 응답을 수신합니다
브라우저렌더링: 받은 컨텐츠로 부터 브라우저 렌더링이 일어납니다.
HTML 과 CSS가 각각 파서에 의해 해석되다 DOM트리를 구축하고 렌더트리를 구축하는 등의 과정이 일어나는 것을 볼 수 있습니다.
캡술화 과정: 상위계층의 헤더와 데이터를 하위계층의 데이터 부분에 포함시키고 해당 계층의 헤더를 삽입하는 과정
비캡슐화 과정: 하위계층에서 상위 계층으로 가며 각 계층의 헤더 부분을 제거하는 과정
TTFB: 요청을 한 후 응답 받는 첫 번째 바이트까지의 시간을 나타냅니다.
최적화 과정:
1. Lighthouse 사용 및 모니터링
Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구이다. 어떤 웹 페이지든 (그것이 공개되었든, 인증이 필요하든) 사용할 수 있다.
2.올바른 이미지 형식
3.이미지 압축 기술 사용
4.애니메이션 gif를 비디오로 대체
5.반응형 이미지 제공
6.CDN을 사용
7.지연로드
8.JS파일 코드 분할
9.사용하지 않는 코드 제거
10.CJS로 번들링 할 경우 크기가 많이 커졌는지 확인, ECM모듈로
할수 있는지 확인
11.CSS 최적화
