렌더트리
-
렌더 트리 (Render Tree)프론트엔드/프론트엔드 이론 2020. 9. 18. 02:20
렌더트리와 그 역할 CSSOM과 DOM 트리는 결합하여 렌더 트리를 만들어낸다. 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout, 레이아웃)을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트(Paint) 즉 화면에 요소들을 표현하는 프로세스를 위해 존재한다. 렌더트리의 생성과 그 후 과정 렌더 트리는 DOM과 CSSOM의 결합으로 만들어진다. 1. DOM 트리의 루트(Document)에서 시작되어 단계별로 노드들을 배치한다. 이때 일부 노드(메타태그, 스크립트 태그) 등은 여기서 제외된다. 또한 CSS를 통해 숨겨지는 노드들도 여기서 제외된다. 2. 표시된 각 노드들에 대해 적절하게 맞는 CSSOM 규칙을 찾아 적용한다. 3. 표시된 노드들를 콘텐츠와 계산된 스타일과 결합하여 내보낸다...
-
웹 브라우저의 구성과 동작 방식프론트엔드/프론트엔드 이론 2020. 9. 18. 00:30
웹 브라우저란? 인터넷을 통해 웹서버의 모든 정보를 볼 수 있게하고 HTML 검색을 돕는 응용 프로그램이다. 웹 브라우저의 동작 방식 웹 브라우저는 인터넷 웹 서벗에 자료를 요청하기 위한 클라이언트 프로그램이다. 그림으로 나타내면 다음과 같다. 유저가 웹사이트에 접속하기 위해 브라우저에 주소를 입력한다. 그러면 브라우저는 주소에 맞는 웹 서버에 웹사이트 자료를 요청한다. 웹서버는 브라우저의 요청에 맞는 각종 웹사이트에 관련된 자료를 제공한다. 브라우저는 이 웹서버가 제공한 자료를 해석하고 화면에 구현하여 유저에게 정보를 제공한다. 실제로 우리가 보는 화면은 서버에서 바로 받아서 그 페이지를 그대로 보여주는 것이 아니다. 페이지는 화면 구현에 필요한 코드, 이미지를 브라우저로 보내고 브라우저는 그것을 해석..