브라우저 동작원리는?

이 글은 예전에 따로 적어두었던 브라우저 동작원리는? 메모를 옮기면서 다시 정리한 버전입니다.. 원문이 짧은 편이라, 나중에 다시 볼 때 덜 끊기게 핵심 흐름만 조금 붙여뒀습니다.

• 알아야하는 이유가 뭐임? -> 프론트엔드와 밀접하게 관련되어있는 브라우저의 내부를 알고있으면 개발하는데 도움이 됨

  • 브라우저는 뭐임? -> 사용자의 요청을 서버로 전달하고 전송받은 응답을 사용자에게 출력해주는 친구임

  • 어떻게 서버에 전달하는거임? -> URI라고 각 서버의 주소가 존재함

  • 브라우저는 어떤 구조로 되어있음? -> 사용자가 보는 UI가 있고 UI와 렌더링 엔진 사이의 동작을 제어하는 브라우저 엔진이 있음 그 중에서도 렌더링 엔진은 응답받은 컨텐츠를 화면에 표시해주는 친구이기 때문에 중요함 이외에도 통신이나 JS 해석기, UI 백엔드, 자료 저장소가 있음

  • 렌더링 엔진은 왜 중요함? -> 응답받은 컨텐츠를 표시해주는게 렌더링 엔진임 대표적으로 웹킷과 게코가 있음

  • 렌더링 엔진은 어떻게 동작하는거임? -> HTML을 파싱해서 DOM트리를 만들고 CSS를 파싱한 다음 DOM트리에 CSS규칙을 적용시켜 렌더 트리를 생성함

  • HTML 파싱은 어떻게 하는거임? -> 우리가 사용하는 웹킷 라이브러리 HTML 파서가 존재함

  • CSS나 JS는 어떻게 파싱함? -> 웹킷에선 FLEX와 BISON을 사용해 CSS,JS를 파싱하고 있음

  • HTML을 파싱해서 DOM 트리를 어떻게 만듬? -> DOM과 HTML은 1:1의 관계이기 때문에 모든 요소는 DOM으로 생성되는거임

  • DOM 트리와 렌더 트리의 차이는 뭐임? -> DOM 트리는 객체 데이터, 렌더 트리는 화면에 그려질 정보들이 담긴 데이터임