브라우저 & 렌더링 엔진 정리- 웹 페이지는 어떻게 보여질까?

웹 브라우저란?

웹 브라우저는 우리가 HTML 문서를 보기 쉽게 해석하고, 화면에 보여준다.

대표적인 브라우저로는 Chrome, Safari, Edge, Firefox 등이 있다.

하지만 문제는 브라우저마다 HTML을 해석하는 방식이 조금씩 다르다는 것!

그러므로, 웹 표준을 준수하고 렌더링 방식이 통일되어야 사용자 경험도 좋아진다.

렌더링 엔진이란?

브라우저 내부에는 렌더링 엔진이라는 중요한 요소가 있다. 
HTML, CSS, JavaScript를 해석해서 실제로 화면에 표시되는 모습(DOM 트리)을 구성해주는 역할을 한다.

• WebKit : Safari에서 사용
• Blink : Chrome, Edge 등에서 사용 (WebKit에서 파생)

대부분의 웹 서비스가 크롬 환경을 권장하는 이유도 바로 여기!
→ Blink 엔진을 사용하는 브라우저들은 해석 방식이 유사하기 때문에 일관된 렌더링 경험을 제공할 수 있다.

 

브라우저 작동 과정

1. HTML 요청 → 서버 또는 로컬에서 HTML 문서 받기
2. 렌더링 엔진이 HTML 파싱
3. DOM 트리 구성 → CSS 적용
4. 화면에 시각적으로 렌더링