🔍 [직무 관련 질문] - 06. 프런트엔드 성능 최적화란?

조준형·2021년 6월 21일

면접 직무 관련 질문 질문 및 답변

interview

목록 보기

11/20

프런트엔드 성능 최적화 경험이 있다면 자세하게 설명해달라.

💬 Answer

🌏 브라우저 동작 원리

1. HTML 마크업을 처리하고 DOM 트리를 빌드합니다.
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.
3. DOM 및 CSSOM을 결합하여 렌더링 트리를 형성합니다.
4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다.
5. 개별 노드를 화면에 페인트합니다.

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

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

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

👉 3. HTML,CSS 파싱

서버로부터 받은 파일 중 HTML,CSS를 각각 DOM Tree, Style Tree로 파싱.

👉 4. Attachment로 렌더링 트리 생성

DOM Tree와 Style Tree의 시각 정보를 연결하는 Attachment 작업을 통해 렌더링 트리를 생성.
렌더링 트리는 실제 페이지에서 사용되는 노드들만 포함하여, 루트부터 돌면서 해당 노드에 일치하는 스타일을 연결함.

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

렌더링 트리는 계산된 스타일만 연결한 거지 화면상 어디에 위치할 건지 계산한게 아니다.
루트부터 탐사하면서 실제 위치를 계산한다.
만약 px이 아니고, 상대값(%)로 주어졌으면, 레이아웃 단계에서는 절대값으로 변환된다.

👉 6. 페인트 메소드 호출 (레스터화)

레이아웃 작업을 완료 후 호출된다.
렌더링 트리의 각 노드를 화면에 실제 그릴 수 있는 레이어를 생성

👉 7. 레이어 합성

개별 레이어들을 합성하여 렌더링하면 보여줄 화면이 완성된다.

🌏 페이지 로드 최적화

페이지를 로드할때와 렌더링 할때로 분류 가능.

👉 블록 차단 리소스 최적화

HTMl을 파싱 할 때 css,js를 만나면 HTML파싱을 멈추고 해당 파일을 파싱하거나 다운로드 후 실행이 되는데, 이처럼 HTML파싱을 차단하는 요소를 블록 차단 리소스라고 한다.

블록차단리소스는 곧 렌더링 차단 요소에 속하므로, 올바른 실행 위치에서 코드를 작성해야한다.
CSS : <head>태그안에 import
JS : <body>맨 하단에 위치

👉 리소스 용량 줄이기

JS, CSS, Img, Media, Font등등이 리소스에 해당한다.
개발자도구 network탭에서 필터로 확인할 수 있다.

트리쉐이킹
외부 모듈에서 필요한 기능만을 임포트 하는 것을 의미한다.
불필요한 코드는 제거
tab size는 2spaces를 권장.
압축 및 난독화로 용량을 최소화

CSS

간결한 셀렉터를 사용
공통 스타일은 class로 정의하여 사용.
이미지의 경우 png보다는 크기가 더 작은 jpg,jpeg를 사용.

👉 리소스 요청 개수 줄이기

이미지 스프라이트
이미지가 다수 사용되는 웹 서비스에서, 각각의 이미지 팡리을 서버로 요청하는거 보다 이미지를 하나로 묶어 한번의 리소스 요청을 통해 가져와 background-position속성으로 원하는 부분만 표시하는 방법
이미지 지연로딩
이미지가 다수 필요한 서비스에서, 사용자 화면에 보이는 이미지만 요청하고, 스크롤을 내려 다른 이미지가 보여야 할 때 이미지를 요청하는 지연로딩을 통해 리소스 요청을 줄임.

🌏 페이지 렌더링 최적화

👉 강제 동기식 레이아웃과 레이아웃 스레싱 피하기.

강제 동기식 레이아웃
JS파일에서 DOM요소의 위치나 크기값을 변경 후 바로 가져오려하면 강제로 레이아웃을 발생시킴.

레이아웃 스레싱
강제 동기식 레이아웃을 연속적으로 사용하는 것.

👉 상위DOM요소보다 하위 DOM요소를 사용하기.

상위 요소를 사용하면, 하위 요소에도 영향을 미치기 쉬우므로, 가급적 하위 DOM요소를 변경한다.

👉 display:none 속성은 레이아웃이 발생하지 않는다.

렌더링 트리는 실제 페이지에서 사용되는 노드만을 포함하고 있다.
display:none인 경우에는 렌더링 트리에 포함되지않는다.
❗ visibility:hidden은 보이지않지만, 영역은 존재하므로 렌더링트리에 포함됨.
❗ 하지만 display:none을 사용하게되면 스크린리더 사용자는 해당 요소를 들을 수 없어
clip-path를 이용하는게 좋을 거 같다.

이외에 다양한 방법이 있으니 참고 링크를 나중에 다시 읽어보자.

🌏 최적화 경험

👉 우냉부

SSAFY에서 3번째 프로젝트를 진행할 당시 인프런에서 'Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념'편을 수강한 적이 있습니다.
그 때는 리팩토링이 단순히 좀 더 좋은 코드를 만드는 것이라고 생각하고 따라했는데, 지금 이 글을 정리 하다보니 이런 성능 최적화와도 연관이 있는 거 같습니다.
위에서 설명한 트리쉐이킹을 이용하여 router의 이동을 move.js로 빼서 사용하였고, axios통신을 이용하는 메소드도 각각의 js로 분리하여, 필요한 메소드만 꺼내는 형식으로 개발을 진행했었습니다.