[부스트코스]웹 프로그래밍 - 3. 브라우저

chrome 브라우저

10년전에만 해도 많은 사람들이 인터넷 익스플로러를 썼었는데, 요즘은 많이들 크롬을 씁니다. 저도 아이패드를 사고 여러가지 앱도 깔면서 사파리랑 오페라도 써봤는데 결국은 크롬을 주로 쓰고 있습니다!

웹 프로그래머가 작성한 HTML, CSS, Java-Script 코드를 사용자에게 보여주는 웹 브라우저가 무엇이고 어떻게 동작하는지 알아 보겠습니다.

---

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다.

브라우저의 사용자 인터페이스는 다음과 같은 요소들이 일반적으로 포함되어 있습니다.

• URI를 입력할 수 있는 주소 표시 줄
• 이전 버튼과 다음 버튼
• 북마크
• 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
• 홈 버튼

브라우저의 기본 구조

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시
   *파싱: 일련의 문자열을 의미있는 토큰으로 분해하고 이들로 이루어진 파스 트리를 만드는 과정
4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림, 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행
7. 자료 저장소 - 이 부분은 자료를 저장하는 계층 쿠키와 같은 모든 종류의 자원 저장

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일입니다..

파이어폭스는 게코(Gecko) 렌더링 엔진을 사용하고 사파리와 크롬은 웹킷(Webkit) 렌더링 엔진을 사용합니다.

 

웹킷 동작 과정

 

이 일련의 과정은 파싱을 통해 HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서 역시 CSS Tree(CSS Object Model)을 만듭니다. DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합됩니다.

이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있습니다. 이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거쳐 브라우저에 표현됩니다.

Browser에서의 웹 개발 - 개발자 도구  열기

윈도우 (Ctrl + Shift + I)
맥(Option + Command + i)

크롬 (도구 더보기 >  개발자도구)

개발자 도구를 통해 웹 사이트의 HTML 문서를 볼 수 있습니다.

 

개발자 도구

 

 

부스트코스 강좌: https://www.edwith.org/boostcourse-web/lecture/16663/

[LECTURE] 4) browser의 동작 : edwith

부스트코스 강좌: https://www.edwith.org/boostcourse-web/lecture/16664/

---

생각해보기

1. 우리가 흔히 브라우저 탐색을 할 때 스크롤을 하거나, 어떤 것을 클릭하면서 화면의 위치를 바꿀 때, 브라우저는 어떻게 다시 화면을 그릴까요?
   새로 랜더링을 하는것이 아니라 render tree 캐시를 이용하여 painting 과정만 다시 거쳐서 화면에 표시한다.
2. 위에서 표현된 그림처럼 다시 렌더링 되지 않을까요? 
   <쿠키와 캐시>
   쿠키와 캐시를 사용하는 이유는 서버가 사용자에게 빠른 검색 결과를 제공하기 위한 것입니다.
   쿠키는 클라이언트의 하드디스크에 저장되는 정보로 임의로 삭제가 가능합니다.
   캐시는 고속 완충메모리로 서버의 캐시 클라우드라는 저장공간에 사용자 의지와 상관없이 자동저장 됩니다.
   웹사이트를 재방문 시에 로드 시간이 짧아지는 것이 캐시가 저장되어 있기때문입니다.
   
   결과적으로, 캐시가 있기 때문에 다시 랜더링 되지는 않을 것 같습니다.

---

웹이라는 것은 관련된 지식들이 참 많은 것 같습니다.

차근차근히 배워나가도록 노력해야겠습니다!