본문 바로가기
> 개발/Computer Science

브라우저 렌더링과 인터프리터, 컴파일러

by @일리 2023. 2. 21.

2022년 12월 19일 작성

리액트를 공부하다가 다음 문장을 발견했다.

 

Node.js 는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다.

V8 ? 자바스크립트 엔진 ? 런타임 ? 무슨 말일까?

  • V8은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진
  • 자바스크립트 엔진(JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터
  • 인터프리터(interpreter)는 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경
  • 빌드는 컴퓨터에서 이해할 수 있는 실행 가능한 파일로 만드는 과정
  • 런타임은 특정한 프로그램을 실행하기 위해 필요한 환경, 예를 들어 메모장은 txt 파일을 실행하기 위한 실행환경이고, 브라우저는 자바스크립트의 실행환경

자주 나오는 개념인듯하여 브라우저 렌더링 과정과 인터프리터, 컴파일러에 대해 간략하게 알아보았다!

브라우저 렌더링 과정

브라우저의 가장 큰 기능은 클라이언트가 서버에 요청해 받은 응답을 화면에 표시하는 것이다. 이때 응답은 HTML, CSS, 자바스크립트, 이미지 등의 데이터로 이뤄져있다. HTML과 CSS 는 브라우저 렌더링 엔진에 의해, 그리고 자바스크립트는 자바스크립트 엔진에 의해 처리된다.

 

브라우저 렌더링 엔진은 받아온 HTML, CSS 를 파싱(구문분석이란 뜻, 데이터를 문법에 맞게 분석해 원하는 형태로 새로이 구성하는 작업)한다. HTML은 DOM 트리로, CSS는 CSSOM 트리로 변환되어 렌더 트리가 생성되고, 그 렌더 트리를 바탕으로 레이아웃이 그려진다.

 

브라우저 렌더링 엔진에 의해 HTML 이 해석되던 중 <script> 를 만나면 DOM 생성을 중단하고, 자바 스크립트 엔진이 자바스크립트 파일을 파싱, 실행한다. 자바 스크립터 실행이 완료되면 다시 HTML로 넘어가 DOM 생성이 재개된다. 그래서 자바스크립트의 위치가 상단(<HTML> 내부에 있어 <body> 보다 먼저 자바스크립트가 해석될 경우)에 있으면 자바스크립트가 실행되기 전 DOM이 완성되지 않아 DOM 조작 시 오류가 발생한다.**

 

** <script> 태그에 defer 속성을 주면 HTLM 이 다 그려진 뒤 외부 스크립트가 실행되어 오류를 방지할 수 있다.

자바스크립트 엔진의 대표적인 예로는 내가 자주 쓰는 크롬의 V8 엔진이 있다. 자바스크립트 엔진은 인터프리터 방식으로 구현이 된다고 한다. 대체 인터프리터가 무엇일까?

인터프리터와 컴파일러

공통점

컴퓨터는 0과 1로 이뤄진 2진수 형태의 데이터로 정보를 제공해야 알아듣는다. 컴퓨터가 이해할 수 있게 작성된 프로그래밍 언어를 저급 언어(기계어, 어셈블리어)라고 한다. 사람이 알아들을 수 있게 작성된 프로그래밍 언어는 고급 언어라고 한다. 인터프리터와 컴파일러는 모두 고급언어로 짜인 코드를 저급언어로 번역해주고 실행하는 역할을 한다.

차이점

1. 인터프리터

  • 인터프리터는 코드를 한 줄씩 번역하고 실행한다. = 번역과 실행이 동시에 진행된다.
  • 한 줄씩 번역하기 때문에 에러가 발생하기 전까지의 코드들은 수행이 되고, 에러가 발생하면 프로그램은 종료된다. 덕분에 오류가 발생된 곳의 위치 파악이 쉬워 디버깅이 쉽다.
  • 번역 속도가 빠르다.
  • 다만 실행될 때마다 번역을 수행하여 실행 속도는 느리다.
  • 종류 : 자바스크립트, 파이썬

2. 컴파일러

  • 소스 코드를 한 번에 기계어로 번역한 후 한 번에 실행한다. = 번역과 실행이 별도로 이뤄진다.
  • 에러가 발생하면 프로그램이 수행되지 않는다.
  • 고급언어를 모두 기계어로 변환한 후 저급언어를 실행한다.
  • 인터프리터 언어에 비해 번역 시간이 더 소요된다.
  • 하지만 한 번 번역한 후부터는 번역 없이 바로 실행하므로 실행 속도는 빠르다.
  • 종류 : C, C++

계속 해서 궁금한 내용을 찾다보니 내용이 자꾸 방대해져서 렌더링 과정과 인터프리터, 컴파일러에 대한 내용만 정리해보았다. 잘 모르는 분야라 틀린 내용이 있을 수 있으니 혹시 잘못된 내용이 있으면 알려주세요!! 정정하겠습니다^ㅇ^)/

'> 개발 > Computer Science' 카테고리의 다른 글

CLI와 터미널, 쉘  (0) 2023.04.28

댓글