4) browser(브라우저)의 동작
인터넷 브라우저는 Internet Explorer, Chrome, Firefox 와 같이 우리가 PC나 모바일에서 인터넷을 하기위해 사용하게 되는 프로그램을 말합니다. 브라우저를 이용하면 대부분 소스보기를 이용해 접속한 페이지의 소스를 확인할 수 있습니다.
브라우저의 동작에 대하여 공부를 하게 된 이유는 브라우저의 동작을 더 이해하여 나의 코딩을 더 확실하게 할 수 있게 하기 위함입니다.
브라우저
브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어입니다.
인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함하고 있습니다.
그리고 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있습니다.
Webkit 렌더링 엔진의 처리 과정
HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서 역시 CSS Tree를 만듭니다. 이 과정에서 Parsing 과정이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정이라고 보시면 됩니다. DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합됩니다.
이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있습니다.
이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거치게 됩니다.
참고 사이트 - https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browser_high_level_structure
5) browser(브라우저)에서의 웹 개발
웹 사이트의 소스를 둘러본 뒤 보이는 특징.
- HTML문서는 html 태그로 시작해서 html 태그로 끝이 납니다.
- HTML은 계층적인 구조를 가지고 있습니다.
- JavaScript와 CSS가 html문서 안에 여기저기 존재하고 있습니다.
JavaScript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아도 좋고, css코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋습니다.
