JavaScript(JS) 브라우저 동작원리

전체적인 흐름으로 우선적으로 살펴보겠다.

 

먼저 웹브라우저를 들어가기 => url 호스트 ip주소를 DNS 한테 물어본다=> 주소를 다시 웹브라우저 한테 전달 => 3 way handshake => 웹브라우저는 받아서 다시 서버한테 전달 => 서버에게 데이터 요청 (http request) => 데이터 전송 (http respones) => 사용자에게 데이터 출력 => 데이터 파싱 (html먼저 파싱 돔트리 생성, 생성중 스타일 태그를 만나면 잠시 중단하고 스타일 태그 파싱 cssom 트리 생성, 이후 마치면 html 를 마저 실행하다가 스크립트를 만나면 자바스크립트 엔진을 실행한다 (AST) => 돔트리와 cssom 트리를 합쳐서 랜더트리를 생성. => 여기까지 과정을 construction 이후 화면에 레이아웃을 잡고 그린다. => 사용자에세 화면 출력 

 

웹브라우저는 서버에서 데이터를 받자마자 노출할 준비를 하고 실행을 하는 이때문에 종종 일부 데이터만 먼저 노출되는 현상이 벌어진다.