back-end roadmap-3
👍 이 글은 https://github.com/kamranahmedse/developer-roadmap 의 개발자 roadmap을 기반으로 작성하게 된 정리 글 입니다.
🤔 browser?
브라우저란 사용자들이 서버와 통신을 주고 받을 때 사용하는 소프트웨어다. 컴퓨터를 사용하면 무조건 사용해본 경험이 있는 프로그램이지만 정확한 정의와 동작은 어떻게 되는지 모르고 사용하는 사람도 많을 것이다(나도 포함). 이번 기회에 browser가 어떻게 동작하는지 짚고 넘어가겠다.
🖐 browser 특징
브라우저는 서버에 자원을 요청하면 받아온 자원을 이용하여 브라우저 상에 표시하는 역할을 수행한다. 자원은 보통 HTML이지만 추가적으로 이미지, PDF 등의 형태로 받아올 수 있다. (자원의 주소는 URL에 의해 정해진다)
생각해보면 우리가 접할 수 있는 browser는 매우 다양하게 있다.
- chrome
- internet explorer
- microsoft edge
- safari ...
각 브라우저는 독자적인 방법으로 확장하면서, 사용자에게 서버의 자원을 표시하는 목표는 같지만 brower에 따라 작동 방식이 미세하게 달라 사이트에 따라 호환되지 않는 경우가 발생하는 것이다. 최근에는 대부분의 브라우저는 표준 형식에 맞춰서 개발되고 있고, 이 형식은 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정하고 있다.
✏️ browser 동작
브라우저의 구성 요소는 다음과 같다.
* 출처: 브라우저는 어떻게 동작하는가
여기서 중요한 부분은 렌더링 엔진 부분이다. 사용자가 인터페이스를 통해 요청하면 브라우저 엔진을 통해 렌더링 엔진을 제어한다.
렌더링 엔진의 역할은 요청받은 HTML과 CSS 파일을 파싱하여 브라우저 상에 표시하는 역할을 수행한다.
브라우저 동작 과정
렌더링 엔진은 먼저 통신을 통해 문서의 내용을 얻는다. 문서 내용은 보통 8kb로 전송된다.
그 다음 렌더링 엔진은 HTML 문서를 파싱하고 내부에서 DOM(document object model) 노드로 변환한다. 그 후에 CSS 스타일 요소를 파싱해서 새로운 "렌더트리"를 형성한다.
렌더 트리는 색상, 형태 요소를 가지고 배치되어 있으므로 백엔드에서 렌더 트리를 통해 그리는 과정을 수행한다.
렌더링 엔진은 더 빠르게 수행되기 위해 모든 HTML이 파싱되기 전에 그리기를 수행한다. 일부를 먼저 화면에 표시하는 것이다.
- 동작과정 예시
* 출처: 브라우저는 어떻게 동작하는가
즉, 정리하면
1. HTML 파싱 후 DOM 트리 형성
2. DOM 트리에 CSS 규칙을 적용하여 렌더트리 형셩
3. 렌더트리를 통해 배치 완료
4. 배치가 끝난 렌더트리는 그리기를 통해 표시 됨
위의 과정으로 browser는 우리에게 서버에서 받아온 자원을 표시한다.
+ 위의 내용 중 조언이 필요하거나 수정 및 보완 해주실 내용이 있다면 댓글로 작성해주시면 감사하겠습니다!! :)
