브라우저는 HTML 파일을 받아 여러 단계를 거쳐 웹페이지를 렌더링한다.
서버에서 받은 HTML 파일을 토큰화해서 DOM을, CSS 파일을 분석해 CSSOM을 생성한다. DOM과 CSSOM은 이 단계에서 렌더 트리로 합쳐지며 렌더 트리는 페이지의 최종 레이아웃을 나타내는 골자가 된다.
렌더 트리가 만들어지면 브라우저는 CSS 규칙에 따라 페이지에 있는 여러 요소의 레이아웃을 계산한다. 이때 렌더 트리에 있는 노드(요소)의 사이즈와 위치가 결정된다. 뒤늦게 들어오는 CSS 규칙이 있을 수 있고 이 때문에 레이아웃이 한 번 더 일어날 수 있는데 이것을 리플로우라고 한다.
노드의 사이즈와 위치 계산이 끝나면(레이아웃) 계산을 값을 가지고 있다가 화면에 그려준다. 각 요소를 실제 화면의 픽셀로 변환하는데 텍스트, 색, 보더, 그림자, 버튼 등 모든 시각적인 부분을 화면에 그리는 단계다.
Restful API는 클라이언트가 서버와 통신할 때 HTTP 프로토콜을 사용하는 웹 기반 API를 말한다. 표준화된 프로토콜을 사용하기 때문에 다른 종류의 클라이언트(모바일, PC 등)을 모두 커버할 수 있어서 효율적이다.
이전에는 클라이언트와 서버가 함수 및 매개 변수가 포함된 메시지를 주고받으면서 통신했는데 이를 RPC 모델이라고 한다.
이게 코드가 복잡해지고 성능도 저하시켰고 통신 프로토콜이 제각각이어서 여러 클라이언트를 처리하는 데 비효율적이었다.
출처 : https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work
브라우저 렌더링에서 리플로우 개념은 처음 알았네요!
JavaScript 파싱되는 부분까지 추가되면 좋을 거 같습니다 👍
RESRful API도 필요한 부분만 깔끔하게 정리 잘 하셨어요~~
그리고 저도 브라우저 렌더링 과정 잘 정리된 벨로그 링크 하나 남기고 갑니다 ㅎㅎ
https://velog.io/@sylagape1231/%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-naver.com%EC%9D%84-%EC%B9%98%EB%A9%B4-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%9D%BC%EC%9D%84-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%B4%EB%B3%B4%EC%9E%90
HTTP 메서드 놓친 부분이 많았네요! 얼른 보충해야겠어요! 감사합니다 :-)
오늘도 화이팅하세요~!! 💪🏻
https://dev-coco.tistory.com/97
( REST API 참고했던 블로그인데, 정리가 잘 되어있어서 공유드리고 갑니다 총총 )