질문 : 브라우저 렌더링 과정에 대해 설명하세요.
- 브라우저는 크게 4단계를 거쳐 랜더링을 수행합니다.
- 요청 :
브라우저 -> 서버에 요청 : 서버에 필요한 리소스를 요청 - 트리 생성 :
브라우저의 렌더링 엔진-> HTML,CSS => DOM+CSSOM =랜더 트리 생성 - Layout :
브라우저의 자바스크립트 엔진 -> JS는 => DOM API사용해 랜더 트리 변경, 리플로우 리페인트 - 페인팅(repaint) :
실제 그리기
렌더 트리를 기반으로 HTML요소의 레이아웃 계산, HTML요소 페인팅
-크루답변 :
1. 사용자가 브라우저를 통해 웹 사이트에 접속
2. Resource Downloading : 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 받음
3. HTML DOM Tree 구축 : 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리 형성
4. CSSOM Tree 구축 : 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM Tree 형성
5. Render Tree 구축 : 만든 DOM 트리와 CSSOM 트리를 결합
6. Rayout : 각 요소를 어디에 배치할 지 결정
7. Paint : 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작하는 과정
꼬리질문 : 리플로우와 리페인트에 대해 설명하시오
어떤 *웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 합니다.
*웹 인터랙션이 뭐죠? 라는 꼬리 질문이 들어올 수 있습니다.
웹 인터랙션이란?
인터랙션은 정적인 화면이 아니라 움직임이 있는 있는 화면 및 액션 입니다.
예를 들어 화면에 있는 사물들을 터치하거나 기울이면 화면이 바뀌거나 안에 있는 사물들이 즉각 반응을 합니다. 그리고 언어도 선택할 수 있어서 다른 나라의 언어도 함께 배울 수 있고 단어는 물론 음성까지도 들으면서 텍스트를 읽을 수 있습니다. 화면에 강아지를 터치하면 멍멍대며, 강아지의 소리를 들을 수 있거나, 글에서 볼 수 있는 내용들이 그림으로 변형되어 화면에 펼쳐지며 이 화면에 있는 사물들이나 배경들을 터치해서 즉각 반응을 느낄 수 있는 것 등 다양한 예시가 있습니다.
즉 웹 상에서 움직임이 있거나 유저와 상호 작용을 할 수 있는 화면 및 액션을 웹 인터랙션이라고 합니다.
질문 : 브라우저 렌더링 방식에 대해 설명하세요.
- 브라우저는 크게 2가지 방식으로 랜더링합니다.
- SSR : Server Side Rendering
서버 쪽에서 랜더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
장점 : 초기 로딩 속도가 빠름
단점 : 요청시마다 새로고침 => 깜빡임생김, 바뀔 필요가 없는 부분도 요청
써야할 상황 :
- 상위 노출이 필요하거나
- 누구에게나 동일한 내용을 노출하거나
- 페이지마다 데이터가 많이 바뀐다면
- 네트워크가 느릴때(CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
- SEO가 필요할 때
- 최초 로딩이 빨라야 하는 사이트를 개발 할 때
- 웹 사이트가 상호작용이 별로 없을 때
- CSR : Client Side Rendering
서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 랜더링을 시작한다.
장점 : 빠른속도와 서버 부하 감소, 변경된 부분의 데이터만 가져옴
단점 : 모든 파일이 다운로드 되고 랜더링이 끝나기 전까지 사용자가 볼 수 있는 게 없다.
써야할 상황 :
- 개인정보 데이터를 기준으로 구성되거나
- 보다 나은 사용자 경험을 제공하고 싶거나
- 네트워크가 빠를 때
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때
- 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때 (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리함.)
