webDeveloper/Browser 5

[Browser] 파서의 종류와 HTML파서, DOM

파서의 종류 상향식 : 구문의 낮은수준에서 높은 수준으로 일치하는 부분을 찾음. 항, 항연산자, 표현식, 표현식 연산자 순으로 일치하는 표현식을 하나씩 스택에 쌓음 =이동-감소 파서 : 입력값의 오른쪽으로 포인터가 이동하기때문에 구문 규칙에 남는 것이 점차 감소. ex.) 2+3-1 -> +3-1 -> 3-1 -> -1, 1, 하향식 : 상위 구조로부터 일치하는 부분을 찾음. 표현식부터 쌓음 파서 자동 생성 : 수동파서 최적화는 어렵기때문에 웹킷은 어휘생성을 위한 플렉스와 파서 생성을 위한 바이슨을 사용한다. 플렉스는 토큰의 정규표현식 정의를 포함하는 파일을 입력 받고 바이슨은 BNF 형식의 언어 구문 규칙을 입력 받는다. HTML 파서 마크업을 파싱 트리로 변환 문법은 W3C에 명세로 정의 전통적 파서..

[브라우저] 브라우저는 어떻게 동작하는가? 1- 파싱과 돔트리 구축

브라우저는 어떻게 동작하는가? 1편 파싱과 돔트리 구축 브라우저의 주요기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것. 자원은 보통 HTML. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 결정됨. 브라우저는 웹 표준화 기구가 정한 HTML과 CSS 명세에 따라 HTML파일을 해석해서 표시한다. 브라우저의 UI요소 URI 주소 표시 줄 이전, 다음 버튼 북마크 새로고침, 현재문서 로드를 중단하는 정지버튼 홈 버튼 브라우저의 기본 구조 UI : 주소 표시줄, 이전/다음버튼.. 등등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 브라우저 엔진 : UI와 렌더링 엔진사이 동작을 control 렌더링 엔진 : 요청한 컨텐츠를 표시. 보통 HTML요..

[Browser] BOM(Browser Object Model)

BOM(Browser Object Model) API BOM (Browser Object Model) 웹브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어 웹 브라우저와 관련된 객체의 집합. DOM의 일부로 보는 시선도 있음. 전역변수와 함수가 사실은 window 객체의 프로퍼티와 메소드 모든 객체는 사실 window의 자식 DOM과 달리 BOM은 공식적인 표준이 없기에 웹 브라우저마다 BOM API가 조금씩 다를 수 있음 window는 생략 가능 window 메소드. window.innerWidth : window의 화면 가로 폭 window.alert() : 알림창 window.confirm() : Yes, ..

[Browser] 웹 스토리지(local, session, cookie)

Web storage 웹 스토리지는 서버가 아닌 클라이언트에 데이터를 저장할수 있도록 하는 HTML5의 새로운 기능이다. WS API와 쿠키의 기능자체는 같지만 쿠키는 4KB, 웹스토리지는 5MB까지 가능한다. localStorage : 브라우저를 종료해도 데이터가 남아있는 저장소 sessionStorage : 브라우저를 종료하면 데이터가 소멸되는 저장소 localStorage 지속적으로 필요한 데이터(자동로그인) 등에 쓰인다. 저장 한도는 3가지 중 가장 높다. 사용자 현재 도메인의 localstorage에 접근해 localstorage의 setitem메서드를 사용하여 데이터를 추가합니다. localStorage.name="랄라라라라" localStorage['name'] = '랄라라라라' localS..

렌더링이란? 그리고 렌더링을 최적화 할 방법들.

렌더링이란? 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 것. 주소창에 구글 검색 구글 서버로 찾아감 DNS(Domain name server)가 연결해줄 곳을 찾음(실제 서버가 어디있는지 알고있는 서버.) 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정. 로더가 서버로부터 전달 받는 리소스 스트림을 읽는다.(data인지 file인지 다운로드 할껀지..) 브라우저는 서버로부터 HTML 문서를 다운받고(W3C(world wide web consortium)의 명세에 따라 HTML해석) Rendering 엔진은 HTML 문서를 파싱해서 DOM tree를 만든다 그 다음 CSS를 파싱해 CSSOM tree를 만든다. DOM tree와 CSSOM tree를 결합해 렌더링 트리를 형성한다...