브라우저란 ?
- 인터넷 접속할 때 사용하는 크롬, 사파리, 파이어폭스, IE등..
브라우저는 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여준다.
여기서 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다.
이 자원들을 렌더링 과정을 통해 유저에게 보여준다.
렌더링 과정을 알아보자.
브라우저 렌더링 원리
1. DOM, CSSOM생성 (parsing)
HTML파일을 해석(파싱)해서 DOM Tree, CSS가 있다면 CSSOM(CSS Object Model) Tree를 만든다.
2. Render Tree 생성
Dom Tree와 CSSOM Tree를 결합하여 Render Tree를 생성한다.
Render Tree는 실제로 화면에 그려질 Tree이다.
예를 들어 Render Tree를 구성할 때 visibility: hidden은 요소가 공간을 차지하고, 보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none의 경우는 Render Tree에서 제외된다.
3. Layout
Render Tree에서 각 노드(태그)가 브라우저 화면의 어느 위치에 어느 크기로 출력될지 계산하는 단계이다.
루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다.
%, vh, vw와 같은 상대적인 속성은 픽셀 단위로 변환된다.
4. Paint
Layout 계산이 완료되면 요소들을 실제 화면에 그리게 된다.
Render Tree의 각 노드를 실제 픽셀로 변환한다.
이때 픽셀로 변환된 결과는 하나의 레이어가 아닌 여러 개의 레이어로 관리한다.
웹 인터렉션으로 인해 자바스크립트가 DOM< CSSOM 을 변경하는 경우 리렌더링이 발생한다.
1. 리플로우 : 레이아웃 계산을 다시 하는 것 (3.Layout)
2. 리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것 (4.Paint)
5. 레이어를 합성하여 실제 화면에 나타낸다.
.
.
.
.
브라우저 렌더링 방식
브라우저 렌더링 방식은 크게 두가지로 나뉜다.
1. SSR (Server Side Rendering)
서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
장점: 초기 로딩 속도가 빠름
단점: 요청시마다 새로고침이 되어 깜빡임 생김, 바뀔 필요가 없는 부분도 요청하게 됨.
=> 상위 노출, SEO, 최초 로딩이 빨라야 하는 사이트, 페이지마다 데이터가 많이 바뀌거나 네트워크가 느릴 때, 웹사이트에 상호작용이 별로 없을 때
2. CSR (Client Side Rendering)
서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.
장점: 빠른 속도와 서버 부하 감소, 변경된 부분의 데이터만 가져옴
단점: 모든 파일이 다운로드 되고 렌더링이 끝나기 전까지 사용자가 볼 수 있는 게 없다.
=> 보다 나은 ux, 사용자에게 보여줘야 하는 데이터의 양이 많거나 네트워크가 빠를 때, 상호작용이 많을 때
출처
https://velog.io/@jeju_daun/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
