어떤 과정을 통해서 브라우저가 우리에게 보여지게 될까?
브라우저가 어떻게 동작하는지, 주소 창을 입력했을 때 어떤 방식과 과정을 거쳐 보여지는 것인지 알아보고자 한다.
브라우저가 작동하는 원리를 간략하게 설명하면 먼저 서버에 요청(request)을 보낸 다음 응답(response)를 받아서 화면에 표시된다. 그러면 서버로부터 HTML,CSS, Javascript, 이미지 파일을 응답으로 받게 되는데 이 중 HTML, CSS 같은 파일들은 렌더링을 통해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되어 결합된 렌더 트리로 인해 웹페이지로 나타나게 되는 것이다.
HTML의 파서는 script태그를 만나면 자바스크립트 코드 실행을 위해 DOM생성 프로세스를 중진한다. 이 때 자바스크립트 엔진으로 제어 권한을 넘겨 태그 내의 자바스크립트 코드나 src 어트리뷰트에 정의된 자바스크립트 파일을 로드하고 파싱되어 진다. 자바스크립트의 실행이 끝나면 다시 HTML파서로 제한을 넘겨서 브라우저가 중지 된 시점으로 DOM생성을 다시 시작한다.
이러한 과정을 보면 브라우저는 동기적으로 HTML, CSS, Javascript를 실행하는 것을 알 수 있고 script 태그의 위치에 따라 DOM 생성 또한 지연되는 것을 말한다. 그래서 script 태그는 body 요소의 가장 아래에 자바스크립트를 위치시키는 것이 좋다. 왜냐하면 스크립트 로딩 지연으로 인해 HTML 요소가 렌더링에 지장 받는 일이 발생하지 않고 페이지 로딩이 단축되기 때문이다. 그리고 DOM이 완성되지 않았는데 자바스크립트가 DOM을 조작하면 에러가 발생하기 때문이다.
간편하게 정리하자면,
브라우저 주소창에 HTTP, HTTPS://www 주소를 친다.
-> 해당 서버를 찾아간다. 그러면 DNS가 연결해줄 곳을 찾는다.
-> 주소 앞에 http, https의 방식에 따라 통신을 한다.
-> 서버의 대부분 기본설정은 index.html 되어 있어 이 파일을 클라이언트에게 전달한다.
-> 브라우저는 텍스트로 이루어진 index.html 파일을 파싱한다.
-> 파싱하기 위해 한 줄씩 읽어나가면서 DOM트리를 생성한다.
-> 중간에 link태그가 있다면 css요청이 발생하고 요청과 응답과정을 거치고 css을 파싱한다.
-> CSS파싱이 끝나면 중단된 html을 다시읽고 DOM트리를 다시 생성한다.
-> 완성된 DOM트리와 CSSOM트리를 결합되어 Render Tree를 만든다.
여기서 CSS와 마찬가지로 Javascript를 실행한다면
-> DOM트리 생성 중 HTML파서가 Script태그를 만나면 javascript 코드를 실행하기 위해 파싱을 중단한다.
-> 제어권한은 자바스크립트 엔진에게 넘어가서 코드와 파일을 로드해서 파싱하고 실행이 된다.
-> 위의 CSS와 같이 파싱이 끝나면 다시 HTML이 DOM트리를 생성한다.
파싱이란?
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리 또는 문법 트리라고 부른다. 파싱트리는 DOM 요소와 속성 노트의 트리로서 출력 트리가 된다.
DOM?
DOM은 문서 객체 모델(Document Object Model)이라 한다. 이것은 HTML 문서의 객체 표현이고 외부를 향하는 자바스크립트와 같은 HTML 요소의 연결 지점이다. 트리의 최상위 객체는 문서이다.
렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다. 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리를 생성한다.
참조
https://d2.naver.com/helloworld/59361
https://sunnykim91.tistory.com/121
https://poiemaweb.com/Front-end
