Frontend/Essential (6) 썸네일형 리스트형 브라우저는 어떻게 동작하는가 (part. 07) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 트리 구축 알고리즘 파서가 생성되면 문서 객체가 생성된다. 트리 구축이 진행되는 동안 문서 최상단에는 DOM 트리가 수정되고 요소가 추가된다. 토큰화에 의해 발행된 각 노드는 트리 생성자에 의해 처리된다. 각 토큰을 위한 DOM 요소의 명세는 정의되어 있다. DOM 트리에 요소를 추가하는 것이 아니라면 열린 요소는 스택(임시 버퍼 저장소)에 추가된다. 이 스택은 부정확한 중첩과 종료되지 않은 태그를 교정한다. 알고리즘은 상태 기계라고 설명할 수 있고 상태는 '삽입 모드'라고 부른다. 입력 예제 트리 생성 과정 H.. 브라우저는 어떻게 동작하는가 (part. 05) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 HTML 파서 HTML 파서는 HTML 마크업을 파싱 트리로 변환한다. HTML 문법 정의 HTML의 어휘와 문법은 W3C에 의해 명세로 정의되어 있다. 현재 버전은 HTML4와 초안 상태로 진행 중인 HTML5 이다. (2012년) 문맥 자유 문법이 아님 파싱 일반 소개를 통해 알게 된 것처럼 문법은 BNF와 같은 형식을 이용하여 공식적으로 정의할 수 있다. 안타깝게도 모든 전통적인 파서는 HTML에 적용할 수 없다. 그럼에도 불구하여 지금까지 파싱을 설명한 것은 그냥 재미 때문은 아니다. 파싱은 CSS와 자바.. 브라우저는 어떻게 동작하는가 (part. 04) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 어휘와 구문에 대한 공식적인 정의 어휘는 보통 정규 표현식으로 표현한다. 예를 들면 언어는 다음과 같이 정의될 것이다. INTEGER : 0|[1-9][0-9]* PLUS : + MINUS : - 보시다시피 정수는 정규 표현식으로 정의한다. 구문은 보통 BNF 라고 부르는 형식에 따라 정의한다. 언어는 다음과 같이 정의될 것이다. expression := term operation term operation := PLUS | MINUS term := INTEGER | expression 문법이 문맥 자유 문법이라.. 브라우저는 어떻게 동작하는가 (part. 03) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 동작 과정 예 웹킷과 게코가 용어를 약간 다르게 사용하고 있지만 동작 과정은 기본적으로 동일하다는 것을 알 수 있다. 게코는 시각적으로 처리되는 렌더 트리를 '형상 트리(frame tree)'라고 부르고 각 요소를 형상(frame)이라고 하는데 웹킷은 '렌더 객체(render object)'로 구성되는 '렌더 트리(render tree)'라는 용어를 사용한다. 웹킷은 요소를 배치하는데 '배치(layout)'라는 용어를 사용하지만 게코는 '리플로(reflow)'라고 부른다. '어태치먼트(attachment)'는 웹.. 브라우저는 어떻게 동작하는가 (part. 02) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 브라우저의 기본 구조 브라우저의 주요 구성 요소 1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 3. 렌더링 엔진 - 요청한 콘텐츠를 표시 (HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함) 4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용 (플랫폼 독립적인 인터페이스, 각 플랫폼 하부에서 실행) 5. UI 백엔드 - 콤보 박스와 창 .. 브라우저는 어떻게 동작하는가 (part. 01) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 브라우저는 가장 대중적인 소프트웨어이다. 주소 창에 naver.com을 입력했을 때 어떤 과정을 거치는지 확인해보자. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. URl란? 클라이언트가 서버에서 자원을 요청할 때 자원의 위치는 일반적으로 URL을 사용해서 나타낸다. 하지만 검색엔진을.. 이전 1 다음
