웹사이트를 방문할 때 서버측에 static 파일들(html, css, js 파일 등)을 요청합니다
이 때 static 파일들을 어떻게 클라이언트의 화면에 렌더링 하는가 알아봅시다.
※ 여기서 잠깐 렌더링이란?
-> HTML, CSS, JS로 작성된 문서를 Parsing하여 브라우저에 시각적으로 출력하는 것을 말한다
Index.html
네트워크적인 개념을 간단히 설명하겠습니다
(네트워크 지식이 있다면 스킵해도 좋습니다)
인터넷이란 사용자와 사용자간에 통신, 곧 데이터를 주고 받는 일입니다.
우리가 친구 집을 찾아가기 위해서는 친구의 주소를 알아야 하듯
서로간의 연결을 위해서는 I.P Address를 알아야 합니다.
하지만 모든 이의 I.P Address를 외울 수 없을 뿐더러 숫자로 각 주소를 구분하기가 어려웠기에
컴퓨터상의 주소를 사람이 이해하기 쉽게 DNS(Domain Name System)을 통해 표현하기 시작합니다.
그래서 우리가 DNS를 통해 google.com 이렇게 주소창에 입력하기만해도 I.P Address를 받아와
데이터를 주고 받을 수 있게 됩니다.
웹 어플리케이션을 통해 domain name을 주소창에 입력하게 되면
해당하는 서버의 I.P Address에 index.html 요청하게 됩니다.
서버의 응답을 통해 index.html 파일을 받아오게 되는 것이죠
엇 그러면 index.html 파일말고 css파일, js파일들은 따로 요청하는 건가요?,,
이것을 이해하기 위해 한 가지 html파일을 보며 설명하겠습니다.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content=width=device-width, initial-scale=1.0>
<title>My Website</title>
<link rel=stylesheet href=styles.css>
</head>
<body>
<h1>Hello, World!</h1>
<script src=script.js></script>
</body>
</html>우리가 응답받은 index.html 파일을 시각화하기 위해 브라우저 렌더링 엔진은
이 html파일을 위에서부터 아래방향으로 (동기적으로) 한 줄 씩 parsing을 하여
브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model)를 생성합니다.
(바이트 -> 문자 -> 토큰 -> 노드 -> DOM와 같은 순서로 생성한다)
이 때 CSS, JS를 로드하는 <link> 태그 혹은 <script> 태그를 만나면 DOM 생성을 잠깐 멈춥니다.
이때 index.html 파일을 응답받았던 것처럼 다시 CSS파일과 JS파일을 요청 및 응답을 받는 것이지요
응답받은 CSS파일은 HTML Parsing과정과 동일하게 변환과정을 거쳐 CSSOM(CSS Object Model)을 생성합니다.
그리고 이렇게 생성된 DOM, CSSOM을 결합하여 Render Tree로 결합되어 픽셀을 연산하는데 쓰이게 되고
계산된 결과를 화면에 출력하는 Paint과정이 있게 됩니다.
엇 그러면 JS는 언제 사용되나요?
JS는 DOM, CSSOM을 직접적으로 조작할 수 있기 때문에 위의 일련의 과정을 반복해서 실행하게 합니다.
Script를 Load하게 될시 DOM, CSSOM을 조작하게 된다면 해당하는 부분이 다시 렌더트리로 결합되어 Paint가 되겠죠
오늘은 간단하게 브라우저 렌더링을 알아보았는데요 이것이 왜 중요하냐
이 렌더라는 작업이 웹사이트를 이용하는 사용자에게 치명적이기 때문입니다.
이 렌더링의 작업이 비효율적으로 사용될 경우 좋지 못한 사용자 경험을 줄 수 있기 때문에
이러한 브라우저에 대한 이해가 필요하고 더 나아가 React와 같은 프레임워크를 사용하는 이유가 될 수 있습니다!
결론
1. index.html 파일 요청 및 응답
2. html파일 parsing
3. DOM CSSOM 생성 및 Render Tree 결합
4. 사용자 화면에 출력
끝!
웹 브라우저는 렌더링 프로세스
웹의 초창기에는 마크업 문서 작성시 태그를 빼 먹거나, 닫아야 하는 태그를 닫지 않으면 브라우저가 HTML 을 제대로 파싱하지 못하였습니다. 때문에 종종 화면에 깨진 UI 가 표시되기도 하였습
cresumerjang.github.io
+ ModernJavaScript Deep Dive 내용 발췌