104%

이 글을 제대로 이해하려면 브라우저의 로딩 과정에 대해서 알아야 합니다. Virtual DOM? 가상 돔? 위 포스팅을 읽고 오셨다면 이제 리플로우가 뭔지 정확히 아셨을겁니다. 똑같은 Single Page Application을 자바스크립트나 제이쿼리로 구현한것과 리액트로 구현한것은 성능상의 큰 차이가 생깁니다. 우리가 바닐라 자바스크립트로 SPA를 구성하면 다음 프로세스를 거쳐야 합니다. 1. 변경하고자 하는 컴포넌트에 접근(querySelector, document.getElementById, document.getElementByClass 등..) 2. 컴포넌트를 조작 (show, hide, coloring 등등..) 3. 브라우저가 변화된 컴포넌트를 반영하기 위해서 리플로우 발생. 문제는 컴포넌트..

처음 웹페이지에 접속하면 브라우저는 서버로 요청을 보내 html, css, js 등의 파일을 다운로드 받고 파싱해서 화면에 보여준다. 이러한 브라우저 로딩과정은 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성 총 6단계로 나누어진다. 다운로드 유저가 브라우저에서 www.naver.com를 입력했을때, 브라우저는 naver의 서버로 html을 요청해서 응답을 받는다. 파싱 다운받은 html을 파싱한다. 파싱을 하면서 DOM Tree를 만들게 되는데, 파싱 도중에 link태그를 만나면 서버에서 CSS파일 다운로드하고 파싱해서 CSSOM Tree를 만든다. 스타일 HTML과 CSS의 파싱이 완료되면 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree를 생성한다. DOM Tree에는 CSS로..