Browser Rendering

우선 브라우저 접속창에 접속하고 싶은 URL 입력 또는 서버로부터 정적 혹은 동적 데이터를 요청하게되면
HTML을 가져오게 되는데 이것을 HTML파싱이라고 부른다 여기서 가져온 HTML파일을 브라우저가 읽을 수 있게 구조변경을 하게되는데 이 구조는 DOM이라고 한다.
또한 HTML DOM을 생성하다가 CSS를 불러오는 link,style 태그를 만나게되면 CSS를 파싱하고 똑같이 CSSDOM을 만들게 된다.
이후에 javascript 엔진이 javascript 파일을 파싱해오고 실행하게 되는데 이 엔진이 javascript 코드들을 파싱해서 cpu가 읽을 수 있게 변환해준다.
이러한 과정을 모두 거치고 렌더트리를 생성하게된다.
렌더트리는 렌더링을 위한 트리를 만드는것이기 때문에 아직까지 렌더링되지 않고 HTML의 레이아웃 위치등을 계산하는데 사용된다.

멀티페이지, 싱글페이지

옛날 방식(멀티페이지 어플리케이션) : 브라우저에서 주소를 작성하면 프론트엔드에서 브라우저로 HTML,JS,CSS 파일을 넘겨주고 브라우저에서 페이지 이동하기 버튼을 누르면 프론트엔드 서버에 접속해서 정보를 받아간다. 그리고 브라우저를 새로고침한다.

싱글페이지 어플리케이션(직방) : 브라우저에서 주소를 작성하면 프론트엔드에서 브라우저로 HTML,JS,CSS 파일을 전부 넘겨주고 다 받아와야하기 때문에 느리지만 페이지 이동할때마다 다시 프론트엔드 서버에 접속하지 않아도되서 일단 다운로드가 완료되면 속도가 빠르다.