들어가기 앞서서..
우선, 왜 우린 브라우저 작동 원리에 대해 굳이 알아야할까?
우리가 짠 모든 코드들은 ‘브라우저’가 실행해주기 때문에
동작 원리를 안다면 더 편하게 코드를 작성할 수 있기 때문이다.
개념 설명
웹브라우저가 할 일이 점점 늘어나고 있다.
웹브라우저는 웹페이즈를 다운받아 렌더링해 사용자에게 보여주는 프로그램이다.
Html, css,javascript, WASM에 이르는 다양한 언어를 해석해주는 툴이라고 생각하면 좋다!
쉽게 사용하지만 생각보다 광범위한 영역을 수행하는 어플리케이션이다.
종류
- 크롬 현재 기준 전세계 1위
- 사파리 (apple)
- edge (ms)
- firefox (mozilla)
- opera (opera)
- internet explorer (ms)
- 웨일 브라우저 (네이버)
- 브레이브 브라우저 (브레이브)
- 삼성 인터넷 (삼성)
과거에 비해 다양한 브라우저가 쏟아져나오고 있다.
웹브라우저 구성
- 브라우저 엔진
- 자바스크립트 엔진
- 통신 모듈
브라우저 엔진의 구성과 종류
- 브라우저가 동작하는 데 필요한 모든 기술을 포함하는 엔진을 말한다
- Blink Engine (크롬, 삼성, 오페라 ,edge 등에서 사용)
- webkit (safari), ios에서는 모든 브라우저가 웹킷을 기반으로 한다.
- 즉, 아이폰 내에서 크롬앱을 켜도 사파리에 코팅된 크롬이라고 생각할 수 있다!.
- 그래서 모바일 웹 개발시 webkit을 유의하며 진행하면 좋다!
- servo Engine (firefox), Gecko Engine (firefox)
엔진에 따라서 디버깅시 비슷한 결과를 얻을 수 있겠네,,? 정도만 생각해주면 된다!
즉, 크롬에서 나는 에러는 삼성, 오페라, 엣지에서도 그대로 나타날 수 있고
크롬에서 되는 것이 사파리에선 안될 수 있는 셈이다!
그렇다면 우리가 실제로 주소창에 네이버 주소를 입력하면 어떤 과정을 거쳐
메인 페이지가 보이게 되는 것일까?
- 먼저 웹 브라우저가 DNS (도메인 네임 시스템)에 정보를 요청한다
- DNS는 요청 받은 호스트(주소)의 ip를 알려준다.
- 브라우저는 해당 ip를 가진 서버를 찾아가 자료를 요청한다
이 과정을 HTTP Request / Response 라고 한다.
그렇다면 이제 브라우저가 전달받은 자료를 사용자에게 보여주기 위해 파일을 읽어나가기 시작한다!
사용자 인터페이스를 거쳐 엔진 > 렌더링 엔진 > 네트워크 통신과 자바스크립트, ui 백엔드가 상호작용 후
페이지에 그려지게 되는 것이다.
파싱은 읽는 것이라 생각하면 된다.
브라우저가 서버에게 자료를 요청해 전달 받은 파일들을 순차적으로 읽어나간다
html 을 읽는 도중 css를 읽어 각각 DOM(document object model) tree, CSSOM(css Object model) tree를 만들어 하나로 합친다.
이후 Render Tree를 생성해 배치, 그리기를 통해 유저에게 전달된다.
이 과정에서 JS를 만나게 되면 하던 일을 멈추고 브라우저는
JS엔진에게 제어 권한을 넘긴다.
그리고 script를 모두 처리하면 다시 중단해뒀던 DOM tree를 마저 만들어간다.
정리
이처럼 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript을 처리한다. 이것은 script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있다는 것을 의미한다. 따라서 script 태그의 위치는 중요한 의미를 갖는다.
그래서 body 태그 최하단에 자바스크립트를 위치시키는 이유는 다음 두가지로 볼 수 있겠다.
- HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
- DOM이 완성되지 않은 상태에서 자바스크립트가 이를 조작한다면 에러 발생
// 없는 것을 조작할 순 없어,,
이렇게 파싱과 배치를 통해 ui를 그리는 과정은
모든 자료를 전달받고 시작하는 것은 아니다.
가능한 빠르게 사용자에게 화면을 출력해주기 위해 서버로부터
건네 받은 데이터를 계속해서 보여준다.
그 과정에서 또 데이터를 받게되면 화면에 다시 표시한다.
이 때문에 웹 페이지의 화면이 한 번에 뜨지 않고 부분적으로
뜨는 현상이 나타나게 된다!
해당 페이지의 네트워크를 보면 순차적으로 데이터를 전달받으면서 렌더링 하는 것을 볼 수 있다.
