담임 기술면접 멘토링 ( 2회 ) - 브라우저 동작 원리

브라우저의 동작 원리

사용자(클라이언트)는 브라우저에서 본인의 컴퓨터에 있는 데이터가 아닌 다른 곳에 위치한 데이터를 얻으려고 합니다.
보통 그 데이터를 가지고 있는 서버가 다른 컴퓨터에서 실행되고 있기 때문에 브라우저로 서버에 연결하려면
웹 서버가 실행중인 컴퓨터의 주소를 알아야 하는데 그 주소를 IP주소라고 합니다.

각 컴퓨터마다 IP주소가 다른데 192.0.168 등의 숫자로 이루어져 있어 사람이 기억하기 힘든 주소이기 때문에
puringles.tistory.com 등의 사람이 기억하기 쉬운 도메인 주소를 이용합니다.
이때 도메인주소를 IP주소로 변환해주는 게 DNS( Domain Name Server)로, 사용자가 브라우저에서 (도메인 이름의)url을 입력하면 브라우저가 DNS로 도메인주소에 해당하는 IP주소를 요청하고, DNS에서 변환하여 IP주소를 응답해줍니다.
DNS로부터 IP주소를 받으면, 브라우저는 IP 주소를 이용하여 웹 서버에 연결한 뒤, url에 해당하는 웹 페이지를 요청하고
 웹 서버에서는 해당 페이지를 응답해줍니다.
이렇게 웹 브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시해줍니다.
그런데 IP주소는 연결할 컴퓨터를 구분하는 데에만 사용되기 때문에, IP주소만으로는 컴퓨터의 어떤 서버 프로그램을 실행했는지 알 수 없기에 포트 라는 것을 추가로 사용합니다.
포트도 숫자로 된 번호로서, 서버 프로그램마다 구분되는 번호인데 웹 서버의 기본 포트는 80입니다.
이 말은 URL에서 프로토콜이 HTTP인 경우 별도 포트를 지정하지 않으면 80번으로 연결된다는 뜻입니다.
즉,IP는 어느 컴퓨터인지 구분하고, 포트는 어떤 서버 프로그램을 사용할지 구분하는 것입니다.

브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신/JS엔진/UI백엔드, 자료 저장소 로 이루어져있는데
간단하게 사용자 인터페이스는 주소 표시줄( url입력창), 이전/다음페이지 버튼, 북마크 등을 말하고
브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어해줍니다.
렌더링 엔진은 HTML,CSS 를 파싱해 화면에 요청한 자원을 표시해주는 중요한 역할을 합니다.
통신은 HTML요청 등 네트워크 호출에 사용되고 JS엔진은 JS코드를 해석하고 실행해줍니다.

UI백엔드는 기본위젯을 그려주고 자료 저장소는 말 그대로 자료를 저장해주는 계층으로 웹 데이터베이스를 뜻합니다.

렌더링 엔진의 기본적인 동작 과정은
DOM트리 구축, CSSOM 트리 구축 -> 렌더 트리 구축 -> 렌던 트리 배치 -> 렌더 트리 그리기 인데
이런 렌더링 과정을 모두 마친 후 최종적으로 브라우저에 페이지가 그려지게 됩니다.
하지만 특정 액션이나 이벤트에 따라 HTML 요소의 크기나 위치 등의 레이아웃 수치가 변하면 해당 요소에 영향을 받는
자식과 부모 노드 전체를 포함하여 렌더 트리 배치과정을 다시 수행하게 됩니다.
이 때 각 요소들의 크기와 위치를 다시 계산하게 되는 과정을 Reflow, Reflow된 렌더 트리를 다시 화면에 그려주는 과정을  Repaint라고 합니다.
Reflow : 뷰포트 내에서 렌더 트리의 노드의 정확한 위치와 크기를 계산하는 과정( 화면의 구조가 바뀔 때 )
Repain : 화면에 변화가 있을 때 화면을 다시 그리는 과정 ( 화면이 변경되는 모든 경우 )
Reflow가 일어나면 Repaint가 무조건 일어나기 때문에 렌더링 최적화에 좋지 않다.
브라우저가 렌더링을 더 빠르고 효율적으로 할 수 있게 개발하기 위해서는 Reflow과정을 최소화 시키는 것이 좋습니다..

※ reflow과정 최소화 시키는 방법
불필요한 돔 크기 줄이기
CSS규칙을 최소화하고 사용하지 않는 CSS규칙 삭제
애니메이션 등과 같이 복잡한 렌더링 변경이 필요한 경우 절대좌표나 고정위치 사용하기
불필요하고 복잡한 CSS 선택기, 특히 하위 요소 선택기는 사용하지 않기 ( 선택기를 일치시키기 위해 더 높은 CPU 처리량이 필요 )
CSS 스타일 변경보다 CSS클래스를 변경하는 것이 낫다.
웬만하면 DOM을 건들지 말기 (  documentFragment객체 사용하기 / 화면상 표시되지 않는 객체
=> 브라우저가 reflow하지 않게 documentFreagment에 노드를 추가할 수 있다.)