5주차 멘토링
context 많이 쓰시고, 함수나 값을 memoization하는 편
Populating the page: how browsers work - Web performance | MDN
면접 단골(?) 질문
- Latency → fast load
- 메인 스레드 작업 최소화
브라우저 싱글 스레드. 요청 많아지면 누적, 버벅
메인 스레드의 일을 최소화하는것이 싱글 스레드 기반의 브라우저에서 퍼포먼스를 향상시킬 수 있는 방법
script 안에 있는 작업들은 비용이 커서 병목 현상이 발생할 수 있다.
→ script는 제일 마지막에 넣어라
이미지, 폰트, css, js의 요청을 보냄
DOM tree를 다 그리고 요청을 보내지 않고 조금 일찍 보냄
조부모 → 부모 → 자식 스타일링
트리구조이기 때문에 위에서부터 타고타고 스타일 속성 적용
조부모에서 해도 부모에서 덮어씌울 수 있고 또 자식도 덮어씌울 수 있음.
그래서 제일 가까운 CSS가 적용됨
Style
{ display: none } — Render tree에 포함
{ visibility: hidden } — X
➕ cascade
Layout
width, height, size, position
Reflow
부모 요소에서 레이아웃이 변경되면 자식 요소들 변경
부모 요소 말고 자식요소들만 바뀔 수 있게 한다면?
이걸 어떻게 하냐구요 zㅋㅋㅋㅋㅋㅋㅋㅋ
최초 계산은 Layout → 그 이후에 일어나는 크기와 위치 계산은 Reflow
Painting
FCP
처음으로 Painting이 이루어질때까지 걸리는 시간
특정 properties나 element는 layer 분리
a.k.a opacity, transform
But. 메모리를 많이 잡아먹음 → TradeOff
Compositing
여러 layer들과 overwrapping된 것들을 합침
최근에 현업에서 막 깊게 본 적은 없음
요구하는 기능을 만드는게 너무 빠듯 🥲
요즘 읽고 있는 책 - 프론트엔드 성능 최적화 가이드
