웹 렌더링이란?

웹 렌더링(Web Rendering)

웹 렌더링은 서버로부터 받은 리소스를 이용자에게 시각화하는 과정입니다.
웹 브라우저는 HTML, CSS, JS 등의 리소스를 파싱하고, 이를 화면에 표시합니다.

---

웹 렌더링 엔진

웹 렌더링은 브라우저 내 렌더링 엔진에 의해 수행되며, 브라우저마다 사용하는 엔진이 다릅니다:

• Safari: Webkit
• Chrome: Blink
• Firefox: Gecko

렌더링 엔진의 차이로 인해 렌더링 순서와 속도는 다를 수 있지만, 기본적인 HTML 파싱과 시각화 방식은 동일합니다.

---

여기서 잠깐!
HTML 파싱 순서에 대해 이해하고 있나요?

HTML 파싱 순서

1. HTML 문서 읽기
   • 브라우저는 HTML을 위에서 아래로 순차적으로 읽습니다.
2. DOM(Document Object Model) 생성
   • HTML 태그를 해석해 DOM 트리를 만듭니다.
3. CSS 파싱 및 적용
   • CSS를 파싱하고 스타일 규칙을 DOM 요소에 적용하여 **렌더 트리(Render Tree)**를 생성합니다.
4. JavaScript 실행
   • JavaScript가 DOM이나 CSSOM을 수정할 경우, 렌더링 과정이 다시 실행됩니다.
5. 화면 렌더링
   • 계산된 레이아웃을 바탕으로 화면에 요소를 시각적으로 출력합니다.

웹 브라우저의 기본 동작 요약

1. 사용자가 브라우저에 URL 입력.
2. 브라우저가 DNS를 통해 IP 주소 확인.
3. HTTP/HTTPS로 서버에 리소스 요청.
4. 서버가 응답한 HTML, CSS, JS 파일을 브라우저가 다운로드.
5. 웹 렌더링 엔진이 리소스를 시각화하여 화면에 출력.

정리된 키워드

1. 웹 브라우저(Web Browser)
   • HTTP/HTTPS 통신 중개, 서버에서 받은 리소스를 가공해 이용자에게 전달.
2. URL(Uniform Resource Locator)
   • 리소스의 위치를 나타내는 문자열.
3. DNS(Domain Name Server)
   • 도메인 이름과 IP 주소를 상호 변환.
4. 웹 렌더링(Web Rendering)
   • 서버에서 받은 리소스를 브라우저가 화면에 시각화.