how_browsers_work

브라우저의 동작

컴파일러(Compiler)

• 특정 프로그래밍 언어로 작성한 소소코드를 다른 프로그래밍 언어로 변환하는 프로그램
• 주로 원시 소스코드를 어셈블리어나 기계어로 변환한다.
• 직접 기계어로 변환하면 부담이 크기 때문에 어셈블리형식의 목적 파일로 생성하는 경우가 많다.

저급 프로그래밍 언어(어셈블리어, 기계어)는 사람이 이해하기 어려워서 프로그램을 작성하기가 어렵다. 또한 특정 하드웨어 구조에 의존성이 강하다. 따라서, 하드웨어 의존성을 줄이고 사람이 작성하기 쉬운 고급 프로그래밍 언어가 개발되었다. 고급 프로그래밍 언어로 작성된 프로그램은 컴퓨터가 실행가능하도록 기계어로 번역되어야 하는데, 이 과정을 컴파일러가 처리한다.

인터프리터(Interpereter)

인터프리터는 별도의 컴파일 과정없이 한번에 한 줄씩 읽어들여 실행하는 프로그램을 말한다.
컴파일러와 다른점은 실행중에 코드를 해석해서 보여주고, 목적파일을 생성하지 않는다.

인터프리터는 크게 두종류가 있다.

• 컴파일러 + 인터프리터 결합형
  소스코드를 중간 코드 형태로 변환 후 인터프리터가 읽어들여 메모리에 적재하고 해석하며 실행한다.
• 소스코드 유지형
  소스코드를 그대로 메모리에 유지한채 라인 단위로 해석해서 실행한다.
  성능향상을 위해 실행 시점에 원시코드나 중간 코드를 네이티브 코드로 변환하는데 이러한 기법을 JIT(Just-in-time) 컴파일이라고 한다.

자바스크립트 엔진

모든 브라우저에는 자바스크립트 언어해석을 위해 자바스크립트 엔진이 탑재되어 있다. 자바스크립트 엔진은 자바스크립트로 작성된 코드를 해석하고 실행하는 인터프리터다. 이제는 브라우저 외에도 서버영역이나 PC의 설치형 애플리케이션에도 탑재되어 사용되고 있다.

크롬 브라우저에 탑재된 V8 자바스크립트 엔진

V8은 독일 구글 개발 센터에서 만들어진 JavaScript 엔진이다. 오픈 소스이고 C++로 작성되었다.
클라이언트쪽(Google Chrome)과 서버쪽(node.js) JavaScript 어플리케이션 모두에 쓰인다. V8은 웹 브라우저 안에서 실행되는 JavaScript의 성능을 높이기 위해 처음 고안되었다. 속도를 높이기 위해서 V8은 인터프리터를 이용하는 대신 JavaScript 코드를 좀더 효율적인 기계어 코드로 번역한다. 요즘의 JavaScript 엔진처럼 JIT(Just-In-Time) 컴파일러를 적용하여 JavaScript 코드를 실행할 때 컴파일하여 기계어 코드로 만든다. V8의 가장 큰 차이는 바이트코드 또는 다른 중간 코드를 생성하지 않는 다는 것이다.

브라우저의 주요 구성요소

브라우저의 동작 원리

브라우저의 주요 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청하고 응답을 받아 브라우저 표시하는 것이다. 브라우저는 서버로부터 html, css, javascript 파일을 응답받는다. html, css파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다.

HTML 파서는 script 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어 권한을 넘긴다. 자바스크립트 엔진이 실행이 완료된 후 브라우저가 중지했던 시점부터 DOM 생성을 재개한다. 이것은 script 태그의 위치에 의해 DOM 생성이 지연될 수 있음을 의미한다.

참고

• 컴파일러
• Interpreter and JavaScript Engine
• 컴파일러 vs 인터프리터
• How the V8 engine works?
• Performance Tips for JavaScript in V8
• 브라우저 어떻게 동작하는가?
• Javascript async