Web/Browser
-
[Browser] <script> 태그의 적절한 위치Web/Browser 2021. 5. 13. 15:52
브라우저 동작 방식에 따른 Script 태그의 위치 앞의 글에서 말했듯, HTML은 맨 윗 줄 부터 차례대로 읽어 내려 가며 파싱이 되어진다. 그러다가 link 태그를 만나면 HTML파싱을 중단하고 CSS 요청, 응답 과정을 실행한다. 작업이 끝나면 중단된 HTML을 다시 읽고 DOM 트리를 완성하고 랜더 트리를 완성한다. 여기서 중간에 script태그를 만나게 되면 파싱을 중단한 뒤 제어 권한을 자바스크립트 엔진에게 넘기고 자바스크립트 코드를 실행한다. 그렇기 때문에 HTML 태그들 사이에 script 태그가 위치하면 두가지 문제가 발생한다. 1. HTML을 읽는 과정에서 스크립트를 만나면 중단 시점이 생기고 랜더링이 지연된다. 2. DOM 트리가 생성되기 이전에 자바스크립트가 생성되지도 않은 DOM의..
-
[Browser] 브라우저의 동작 원리Web/Browser 2021. 5. 13. 15:42
브라우저의 구조 대부분의 브라우저는 아래 일곱가지의 구성요소로 이루어져있다. 1. 사용자 인터페이스 - 사용자가 요청한 페이지를 보여주는 창을 제외한 보든 부분 (새로고침 버튼, URI 입력창 등) 2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 3. 렌더링 엔진 - 요청한 콘텐츠(페이지)를 화면에 표시. (ex. WebKit, Gecko) 4. 통신 - HTTP, HTTPS 요청을 받으면네트워크 처리 후 응답을 전달. (OS에서 실행됨) 5. UI 백엔드 - Render Tree를 브라우저에 그림 6. 자바스크립트 해석기(엔진) - 자바스크립트 코드를 해석하고 실행 (ex. V8) 7. 자료 저장소 - 모든 종류의 자원을 저장. (ex. Cookie, Local Storage..