웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다.
⇒ 브라우저 환경을 고려하면 더욱 효율적인 클라이언트 사이트 자바스크립트 프로그래밍을 할 수 있다.
<aside>
요청과 응답 → HTML/CSS 파싱과 DOM/CSSOM 생성 (JavaScript 파싱) → 렌더트리 생성 → 레이아웃 계산 → 페인트
</aside>
렌더링에 필요한 리소스(HTML, CSS, JS, 이미지, 폰트 등)는 모두 서버에 존재한다. 브라우저는 필요한 리소스를 서버에 요청(request)하고, 서버로부터 응답(response)받아 브라우저에 시각적으로 렌더링한다.
서버에 요청을 전송하기 위해 브라우저는 주소창을 제공한다.
브라우저의 주소창에 URL을 입력하고 엔터 키를 누른다.
URL의 호스트 이름이 DNS를 통해 IP 주소로 변환된다.
이 IP 주소를 갖는 서버에게 요청을 전송한다.
서버는 요청을 받고, 해당 리소스(HTML, CSS, JavaScript, 이미지 등)를 브라우저에게 응답한다.
*일반적으로 서버는 루트(/) 요청에 대해 암묵적으로 index.html을 응답한다.
*다른 정적 파일을 요청하려면 요청할 정적 파일의 경로와 파일 이름을 URI의 호스트 뒤의 패스(path)에 기술하여 서버에 요청해야 한다.
*반드시 브라우저의 주소창을 통해 요청해야하는 것은 아니다. 자바스크립트를 통해 동적으로 서버에 정적/동적 데이터를 요청할 수도 있다.
네트워크 패널을 확인해보면, index.html 외에 CSS, JS, 이미지, 폰트 등도 응답된 것을 확인할 수 있다. 이는 브라우저의 렌더링 엔진이 HTML을 파싱하는 도중에 외부 리소스를 로드하는 태그 등을 만나면 HTML의 파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청하기 때문이다.