javascript의 주요 실행 환경은 웹 브라우저 환경입니다. 브라우저의 작동원리를 살펴봅니다.
브라우저란
이전부터 브라우저는 아마 가장 많이 사용되는 소프트웨어 일 것 입니다.
브라우저의 종류는 매우 다양한데, 크롬과 사파리의 점유율을 합치면 80%가 넘습니다.
StarCounter 브라우저 통계
주요 기능
브라우저는 사용자가 요청한 자원을 서버에 요청하고, 응답을 브라우저에 표시합니다.
표시하는 자원은 보통 HTML문서이며, 자원의 주소는 URI에 의해 정해집니다.
URL에 따라, 보여지는 화면이 다른 이유입니다.
URL
사용자가 입력한 URL을 HTTP 프로토콜을 통해, HTTP 요청 메세지를 생성합니다.
웹 서버는 HTTP 응답 메세지를 생성하고, 브라우저는 이를 받습니다.
이제 응답을 사용자가 화면을 통해 볼 수 있도록 해야합니다.
렌더링 엔진
브라우저는 응답된 HTML을 화면에 보여줘야 합니다.
렌더링 엔진은 HTML과 CSS를 파싱하여 화면에 표시하는 역할을 합니다.
렌더링 엔진은 Gecko, Webkit, Blink 등이 있습니다.
크롬 브라우저는 각각의 탭마다 별도의 렌더링 엔진 인스턴스를 유지합니다.
즉, 각 탭을 독립된 프로세스로 처리합니다.
동작 과정
렌더링 엔진의 HTML 파서는 HTML 문서를 파싱하고, DOM노드로 변환합니다.
CSS 파서는 CSS문서를 파싱하고, CSSOM노드로 변환합니다.
이 노드들은 렌더 트리로 결합됩니다.
생성된 렌더 트리를 기반으로, 브라우저는 웹페이지를 표시합니다.
(렌더 트리 배치 및 렌더 트리 그리기 )
자바스크립트 엔진
브라우저는 자바스크립트 실행을 위한 엔진도 포함하고 있습니다.
자바스크립트는 브라우저 외에도, 자바스크립트 엔진이 있는 모든 디바이스에서 동작합니다.
브라우저에도 역시 '자바스크립트 가상 머신'이라 불리는 엔진이 내장 되어 있습니다.
자바스크립트 코드를 해석하고 실행합니다.
엔진의 종류는 V8, SpiderMonkey 등이 있습니다.
동작 과정
HTML 파서는 script 태그를 만나면, DOM 생성 프로세스를 중지하고
자바스크립트 엔진으로 제어 권한을 넘깁니다.
자바스크립트 실행이 끝나면, 다시 HTML파서로 제어를 넘깁니다.
이처럼 동기적으로 HTML,CSS,Javscript를 처리하는데 이는 블로킹이 발생할 수 있습니다.
때문에
DOM이 모두 생성될 때 까지 javascript 이벤트를 설정하거나,
script 태그의 위치를 body 가장 아래에 위치시키거나,
React 처럼, HTML 대신 자바스크립트에서 모든 것을 처리하도록 합니다.
