browser_operation

웹 브라우저의 동작 원리

---

1. 클라이언트는 네이버에 접속을 시도한다.
2. 네이버에 접속하기 위해서 인터넷 브라우저 주소창에 www.naver.com 을 입력한다.
3. www.naver.com에 대한 IP 주소를 알기 위해서 DNS서버에 먼저 접속한 후DNS서버에게 www.naver.com에 해당되는 IP주소를 요청한다.
4. DNS서버는 www.naver.com에 해당되는 IP주소를 응답한다.

1. IP주소를 알게 된 브라우저는 다시 해당 IP주소를 통해서 네이버 서버에 접근하게 된다.
2. 클라이언트는 서버에게 해당 페이지에 대한 접속과 .html 파일을 요청한다.
3. 서버는 네이버 메인 페이지에 대한 화면 요소 정보가 담긴 index.html파일을 응답한다.

1. 브라우저의 렌더링 엔진의 html파서는 index.html파일을 로드하고 파싱을 시작한다.
2. 파싱중 <link> 를 만나게 된다. <link>에는 .css파일이 적혀있었다.
3. html파서는 파싱을 중지한후 클라이언트는 다시 서버에게 .css파일을 요청한다.
4. 서버는 .css파일을 응답한다.
5. 클라이언트의 렌더링 엔진의 html파서는 제어권을 css파서에게 넘겨준다.
6. css파서는 .css파일을 로드하고 파싱을 시작한다.
7. 파싱이 완료되고 CSSOM트리가 완성된다.
8. css파서는 제어권을 다시 html파서에게 넘겨준다.

1. 중지되었던 html 파싱을 재 시작한다.
2. 파싱하던중 <script> 를 만나게 된다. <script>에는 .js파일이 적혀있었다.
3. html파서는 파싱을 중지한 후 클라이언트는 다시 서버에게 .js 파일을 요청한다.
4. 서버는 .js파일을 응답한다.
5. html파서는 .js파일을 읽을 수 없기 때문에 제어권을 브라우저에 탑재된 자바스크립트 엔진에게 넘겨준다.

1. 제어권을 넘겨받은 자바스크립트 엔진은 DOM api를 이용하여 .js파일을 로드한다.

2. 로드된 .js파일을 토크나이즈 하여 소스코드를 어휘분석하여 의미를 갖는 최소단위인 토큰으로 분리한다.

3. 분리된 토큰을 구문분석하여 문법의 의미와 구조를 반영한 트리인 AST를 생성한다.

4. AST는 자바스크립트 엔진의 인터프리터가 읽을 수 없기 때문에 인터프리터가 실행할 수 있는 중간코드인 바이트코드로 변환되고 실행된다.

5. 실행된 후 제어권을 다시 렌더링엔진의 html파서에게 전달한다.

6. 제어권을 돌려받은 html파서는 중지되었던 파싱을 재 실행한다.

7. 파싱이 완료되어 DOM트리가 형성된다.

1. 전에 만들어진 CSSOM트리와 DOM트리를 합쳐 RENDER트리로 만든다.
2. RENDER트리를 기반으로 클라이언트의 화면에 표출한다.