Chrome, Edge, Safari, 지금은 역사속으로 사라졌지만 한때 전세계 점유율 95% 였던 Internet Explorer...
이들 모두 우리가 인터넷상 웹에 연결하기 위해 사용하는 '브라우저'입니다.
개발자로서 퍼포먼스를 확인하고 향상시키기 위해서는, 브라우저의 동작 원리를 아는 것은 중요합니다.
모든 웹사이트는 브라우저 위에서 동작하고, 각 어떻게 render되고 동작하는지는 브라우저에 달려있기 때문이죠.
오늘 포스트에서는 브라우저의 구성과 동작 원리에 대해 다루려고 합니다.
Contents
- 웹브라우저 구성
- Rendering Engine의 역할
웹브라우저 구성
우리가 웹페이지를 개발할 때 사용되는 언어는 HTML(뼈대), CSS(디자인), JS(동작)입니다.
또한 웹사이트는 HTTP, FTP와 같은 인터넷 프로토콜을 사용해 웹 네트워크에 연결되어 요청과 응답할 수 있어야 합니다. 각각 구성 요소들은 이러한 기능을 처리하고 있습니다.
+추가) Data Storage: cookie
Rendering Engine의 역할
Rendering engine의 기본 흐름은 다음과 같습니다.
[1] 요청된 HTML 페이지는 렌더링 엔진에 의해 외부 CSS 파일 및 스타일 요소를 포함하여 청크 단위로 구문 분석됩니다. 그런 다음 HTML 요소는 DOM 노드로 변환되어 "DOM 트리"를 형성합니다.
[2] 동시에 브라우저는 렌더 트리도 생성합니다. 이 트리에는 스타일 정보와 요소가 표시되는 순서를 정의하는 시각적 지침이 모두 포함됩니다. 렌더링 트리는 콘텐츠가 원하는 순서로 표시되도록 합니다.
[3] 또한 렌더 트리는 레이아웃 프로세스를 거칩니다. 렌더 트리가 생성되면 위치 또는 크기 값이 할당되지 않습니다. 원하는 위치를 평가하기 위한 값을 계산하는 전체 프로세스를 레이아웃 프로세스라고 합니다. 이 과정에서 모든 노드에는 정확한 좌표가 할당됩니다. 이렇게 하면 모든 노드가 화면의 정확한 위치에 나타납니다.
[4] 마지막 단계는 화면을 그리는 것입니다. 여기서 렌더 트리를 순회하고 UI 백엔드 레이어를 사용하여 화면의 각 노드를 그리는 렌더러의 paint() 메서드가 호출됩니다.
참고 사이트
https://www.browserstack.com/guide/browser-rendering-engine
https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work
