👉 프론트엔드 성능 최적화를 위해서는 브라우저 동작 원리부터 이해하고 있어야 합니다.

처음 프로젝트를 진행함에 있어서는 구현이 가장 우선이었습니다.

그 후에 유지 보수가 필요하거나 페이지 랜더링이 느리게 되는 페이지가 있어 성능 최적화가 필수적이었습니다.

성능최적화를 하기 위해서는어떤 부분에서 최적화를 시킬 수 있고, 성능을 어떻게 향상시킬 것인지 인지할 수 있게 하기 위해 브라우저의 동작 원리를 이해해야 한다고 생각했습니다.

브라우저 동작원리

https://www.naver.com을 주소창에 입력하게 되면 내부적으로 어떻게 동작하는지 알아보겠습니다.

1. 사용자 브라우저의 호스트파일, 브라우저 캐시에 해당 url 정보가 있는지 확인

이전에 접속한 적이 있는지 확인하고, 캐싱이 적용되었다면 별도의 dns 요청없이 url 을 띄울 수 있습니다.

👆 dns 요청 ?

doman name system : 실제 ip 주소로 요청하는 것이 아니라 보기 편한 문자로 요청할 수 있게 해주는 시스템입니다.

1. 브라우저가 www.naver.com 을 요청하면

2. 네임서버에 www.naver.com 에 해당하는 실제 서버주소를 찾아서 브라우저에서 전달합니다.

3. 브라우저는 전달받은 실제 서버 ip 주소로 요청합니다.

2. dns에 실 IP 주소를 요청하고, 리소스를 받을 준비

호스트의 도메인 이름을 실제 IP 주소를 변환하기 위해 DNS 에 요청합니다. 이제 이 IP 주소의 서버에게 리소스를 요청하여 받아올 준비를 마쳤습니다.

3. HTML, CSS 파싱

서버로부터 받아온 파일 중 HTML 과 CSS를 각각 DOM Tree, Style Tree 으로 파싱합니다.

4. 렌더링 트리 생성

DOM 트리와 Style Tree의 시각 정보를 연결하는 Attachment 작업을 통해 렌더링 트리를 생성합니다.

렌더링 트리는 실제 페이지에서 사용되는 노드만을 포함하며, 루트부터 탐사하며 해당 노드에 일치하는 스타일을 연결합니다.

참고 : https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko

5.레이아웃 으로 실제 위치 계산

렌더링 트리는 계산된 스타일만을 연결한 것이지, 위치를 계산하지는 않았습니다.

즉 페이지 내의 실제 위치를 계산하는 작업이 필요합니다.

루트부터 탐사하면서 노드의 화면 상 실제 위치를 절대값(px)으로 계산합니다.

6. 페인트 메소드 호출

레이아웃 작업이 완료되면, 페인트 메소드를 호출하여 '래스터화'합니다.

렌더링 트리의 각 노드를 화면에 실제 그릴 수 있는 레이어를 생성합니다.

7. 레이어 합성

앞선 레이어들을 합성하면 사용자에게 보여줄 화면이 완성됩니다.

페이지 로드가 끝나고 사용자 인터렉션으로 DOM 규칙이나 CSS 규칙이 수정되어 화면이 다시 렌더링되어야 할 경우에는 위의 단계들이 다시 실행됩니다.

따라서 위의 렌더링 프로세스를 최적화하는 것이 곧 성능 최적화라고 할 수 있겠습니다.
1~5 단계를 수행할 때 걸리는 시간을 최소화하는게 렌더링 프로세스를 최적화하는 방법입니다.
초기 렌더링 시간을 줄이고, 화면 업데이트 사이의 시간을 줄여줄 수 있습니다.