Web :: Web browser 동작방식과 캐시 메커니즘

웹 브라우저

웹 브라우저 동작 방식

웹 브라우저는 User-Agent라고도 함.

1. HTML을 요청하여 받아온다.
2. HTML에서 CSS, js, img에 대한 링크 정보를 추출한다.
3. 추출한 정보의 URL(src 속성값)을 이용해서 새로운 요청을 보낸다.
4. 웹 자원을 받아와서 렌더링을 시작한다.
5. v1.1 은 Pipeline, v2.0은 병렬처리로 성능을 개선하였다.

• 웹 브라우저 역사와 사용자 에이전트 이야기

브라우저의 렌더링 동작

• 출처 : https://d2.naver.com

브라우저는 HTML, CSS, JS 파일을 받아서 화면에 렌더링.
먼저 HTML을 요청하고 HTML의 내용을 분석한다.
이 때, 서버로 다시 요청을 보내야 하는 파일(ex. css파일, <img src="~~">)을 만날 수 있다.
HTML을 분석하여 DOM Tree를 생성하고, CSS도 분석하여 Style Rules를 만든다. 이 두 개를 합쳐서 Render Tree를 만든다.
Render Tree의 정보를 이용해 Layout을 구성하고, Painting하여 화면에 출력한다.
이 작업은 브라우저의 메인 스레드에서 동작하는데 HTML 코드 중 JS 코드를 만나게 되면 HTML의 파싱을 멈추고 JS 파일을 다운 받는다.
따라서 JS파일을 비동기로 요청하거나 HTML내용의 마지막에 위치시킨다.

캐시 메커니즘 예시

• 출처 : https://docs.oracle.com

클라이언트가 Request를 보내면 중간의 프록시 서버(Cache)에서 캐시가 비어있으면 바로 서버로 요청을 전달하고, 응답 받은 내용에서 Cache 관련 부분을 해석해, 만약 Cache-control : max-age 100 이면 100초 동안 서버에 요청을 전달하지 않고 캐시에 있는 데이터를 반환해준다.

로컬 메모리 캐싱 방식

페이지 로딩이 빨라진다.

웹 브라우저에서 특정 홈페이지에 접속하는 과정

HTTP 요청이 하나만 전송되는 것이 아니라 HTML 페이지 내용에 따라서 연결되는 HTTP 요청과 리소스 다운로드 흐름을 이해한다.

---