[ 1단계 - DNS ]
"브라우저 캐시 → OS 캐시 → ISP DNS 순서로 IP를 조회하고,
캐시에 없으면 루트 DNS까지 올라가서 IP를 가져옵니다"
[ 2단계 - 서버 ]
"해당 IP 웹서버에 HTTP 요청을 보내고,
서버는 DB에서 데이터를 조회해
HTML/CSS/JS 등 정적 리소스와 함께 응답합니다"
[ 3단계 - 렌더링 ]
"브라우저는 HTML을 파싱해 DOM트리,
CSS를 파싱해 CSSOM트리를 만들고
둘을 합쳐 Render Tree를 구성합니다
이후 Layout → Paint → Composite 순으로
화면을 그려 사용자에게 제공합니다"
[보너스 ]
"이 과정에서 JS파일은 메인스레드를 블로킹하기 때문에
defer 속성을 활용해 렌더링을 최적화할 수 있습니다"
'WEB > JS' 카테고리의 다른 글
| [jQuery] 드래그 앤 드롭 라이브러리 (Draggable) 사용법 (0) | 2022.01.29 |
|---|---|
| [jQuery] 드래그 앤 드롭 라이브러리 (Draggable) (0) | 2021.08.09 |
| [js] 자바스크립트 비동기 처리 : 콜백 함수(Promise / Async&await) (0) | 2021.07.28 |