안녕하세요. 홈쇼핑정보사업부 온라인팀 원주혜입니다 😊

업무 특성상

크롬의 웹 개발자 도구를 켜서 소스를 확인하고, 디버깅하는 일들이 많은데요,

브라우저에서 화면이 어떻게 그려지는지, 자바스크립트가 어떻게 동작하는지를 알면

좀 더 크롬 웹 개발자 도구를 잘 활용할 수 있을까 싶은 마음에 공부했던 내용을

공유드려보고자 합니다.

먼저 화면이 브라우저에서 그려지는 과정을 알아봅시다.

우리가 매일 보는 웹 브라우저는 어떻게 구성되어 있을까요?

대략 7가지 정도의 구성요소가 있습니다.

1. 사용자 인터페이스 : 사용자가 브라우저에서 직접 조작 할 수 있는 영역입니다. (앞으로가기, 뒤로가기, 즐겨찾기 등등)
2. 브라우저 엔진 : 사용자 인터페이스가 렌더링 엔진에 쿼리를 전달할 수 있게 조작을 담당합니다.
3. 렌더링 엔진 : html과 css 문서를 파싱 / 해석 하여 화면에 표현합니다. 사파리/크롬에서는 웹킷, 파이어폭스에서는 게코엔진, IE에서는 Trident가 이에 해당합니다.
4. Networking ****: Http 요청을 할 수 있으며, 네트워크 호출할 수 있습니다.
5. Javascript 해석기 : Javascript 코드를 해석하고 실행 합니다.
6. UI Backend: select / input 등 기본적인 위젯을 그리는 인터페이스 입니다.