Single Page Application이란 무엇인가요? (Reflow와 Repaint)

SPA란?

단일 페이지 구성된 웹어플리케이션을 말한다. Spa는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않고(서버사이드 렌더링X), 필요한 데이터만 서버로부터 JSON으로 전달받아 동적으로 렌더링한다

기존 어플리케이션은 화면 이동시 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩 때문에 시간이 걸린다

반면, SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 구성속도가 빠르다

 

최초 모든 리소스를 다 로드하는 것은 오버헤드가 생길 수 밖에 없기 때문에 라우트별로 파일을 쪼개서 어느정도 해결 할 수 있다

 

서버사이드 렌더링(SSR)

페이지를 이동할 때마다 새로운 페이지를 요청한다

모든 탬플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다

서버에 HTML파일을 저장해두었다가, 요청이 발생할 때 모든 파일을 브라우저에 전달하는 방식으로 SEO, 인덱싱, 크롤링에 최적화 되어 있다

 

장점

• 검색엔진 최적화 가능 서버 사이드렌더링을 통해 얻을 수 있는 가장 큰 장점이다
• 초기 화면 로딩이 빠르다
• 정적인 사이트에 좋음

단점

• 잦은 서버 요청
• 전체적을 느린 페이지 렌더링
• 모든 페이지가 리렌더링
• 사이트 상호작용의 부족

클라이언트 사이드 렌더링(CSR)

HTML문서 자체에 모든 내용이 저장되는 것이 아니라, 자바스크립트를 사용하여 HTML문서에 렌더링을 진행하는 것이다 즉, HTML문서 자체에 모든 내용이 저장되는 것이 아니라, 자바스크립트를 사용하여 HTML문서에 렌더링을 진행하는 것이다.

 

장점

• 첫 요청할 때 한 페이지만 불러온다
• 그 후, 사용자의 행동에 따른 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다
• 상호작용 활발, 초기 이후 빠르다

단점

• 초기 구동속도가 느리고, 검색엔진 최적화가 어렵다
• 제대로 구현하지 않을경우 SEO가 취약함

Repaint, Reflow란?

Repaint란?

Reflow만 수행되면 실제 화면에 반영되지 않는다 Reflow에 언급된 렌더링 과정과 같이 Render Tree를 다시 화면에 그려주는 과정이 필요하다 결국은 Paint단계가 다시 수행되는것을 리페인트라고 한다

요약 : 레이아웃에는 영향을 주지않지만, 가시성에는 영향을 주는 엘리먼트가 변경되면 발생한다. 예를들면, Opacity, background-color, visibility, outline

브라우저가 DOM트리에 있는 다른 모든 노드의 가시성을 확인해야 하므로 리페인트는 비용이 많이든다

 

Reflow란?

모든 엘리먼트의 위치와 길이 등을 다시 계산하는 것으로 문서의 일부 혹은 전체를 다시 렌더링한다 단일 엘리먼트 하나를 변경해도, 하위엘리먼트나 상위 엘리먼트 등에 영향을 미칠 수 있다

어떠한 액션이나 이벤트에 따라 html 요소의 크기나 위치 등 레이아웃 수치를 수정하면 그에 영향을 받는 자식노드나 부모 노드들을 포함하여 Layout 과정을 다시 수행하게 됩니다.

 

이렇게 되면 Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 됩니다. 이러한 과정을 Reflow

Reflow가 트리거 되는 경우

• 페이지 초기 렌더링 시(최초 Layout과정)
• 윈도우 리사이징 시
• DOM 엘리먼트 추가 제거 변경
• Css스타일 추가 제거 변경 css 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있다 엘리먼트의 길이를 변경하면, DOM트리에 있는 다른 노드에 영향을 줄 수 있다
• CSS3 애니메이션과 트렌지션 - 애니메이션의 모든 프라임에서 리플로우가 발생한다
• offsetWidth, offsetHeight의 사용 두 속성을 읽으면, 초기 리플로우가 트리거 되어 수치가 계산된다
• 유저 인터렉션으로 발생하는 hover효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환등을 활성화하여 리플로우를 트리거 할 수 있다