WEB 12

[JavaScript] 브라우저의 렌더링 과정과 script태그의 동기처리

브라우저 렌더링 과정 1. 브라우저가 HTML을 로드 2. HTML 문서를 파싱 -> 트리구조의 DOM노드 생성 2. CSS파일로 CSSOM 트리 생성 3. DOM + CSSOM => 렌더 트리 생성 4. 뷰포트에서 위치 결정(레이아웃) 5. 화면에 표시(페인팅) 리플로우: 렌더링 중 4의 과정을 다시 수행. (position, width, height, padding, margin, border, ...) 리페인팅: 5번 페인팅 과정을 다시 수행. 레이아웃에 영향을 미치지 않는 작업은 바로 리페인팅됨 (color, background, ...) script태그를 body 최하단에 사용하는 이유 브라우저는 위에서 본 순서대로 렌더링을 수행하기 때문에 HTML중간에 script태그를 만나면 HTML파싱을 ..

WEB 2022.01.26

웹 브라우저의 동작 방식

www.google.com 을 주소창에 치면? 서버에서 컨텐츠를 가져오려면 저장되어있는 주소가 필요하다. 그런데 이 IP주소는 숫자로 되어있어서 사람들은 기억하기 쉬운 문자 주소를 사용한다. 1. 브라우저가 캐시에서 주소를 찾음 => 그 사이트를 이전에 방문한 적 있는지? + IP주소를 알고있는지? 확인 1-1. 캐시에서 찾는 순서: 브라우저 캐시→OS캐시→router캐시→ISP캐시 1-2. URL에 해당하는 IP못찾으면 운영체제에게 웹사이트를 찾도록 요청 OS는 URL의 주소를 system32에 있는 hosts파일에서 찾는다. 거기서도 못찾으면? => DNS 서버에서 IP주소 요청 2. 이제 OS가 IP주소를 알게되었고 이걸 브라우저에 전달함 3. Browser가 TCP와 연결함(3-way-handsh..

WEB 2021.12.26