📖 오늘 학습 뽀인트!
- 최적화
- 웹페이지 렌더링
2-1 파싱
2-2 스타일 계산
2-3 레이아웃
2-4 페인트
2-5 컴포지팅 - 반응 시간
3-1 requestAnimationFrame
3-2 Document fragment - 메모리
4-1 메모리 생명 주기
4-2 메모리 누수와 Garbage Collection
1. 최적화
🕵️♀️최적화란?
빠르게 동작하고 메모리, 네트워크 트래픽과 같은 자원을 효과적으로 사용하도록 만드는 작업이다.
✍ 리팩토링과 최적화
리팩토링을 하는 주된 목적은 성능 개선과 협업 효율 향상에 있다. 따라서, 리팩토링 작업은 최적화로 귀결된다고 생각한다.
✍ 최적화 방법
1. 리소스 축소 : 코드 주석 및 서식, 공백 문자, 사용하지 않는 코드, 줄 바꿈 문자 등의 제거가 포함. (VSC 익스텐션 JS & CSS Minifier 사용)
- 서버 호출 횟수 줄이기 : 이미지 스프라이트 기법 사용, 많은 수의 외부 요청을 만드는 타사 플러그인을 줄이기.
- 불필요한 사용자 정의 글꼴 제거 : 최적화된 폰트를 사용, 사용하려는 폰트의 용량을 체크해보고 가능한 최신 포맷의 폰트(참고)를 고려. 참고
- 파일 압축
- 이미지 최적화 : WebP 또는 AVIF 사용 고려, 필요한 사이즈 이미지를 제공, 불필요하게 큰 이미지 제거.
- 지연 로딩 적용 : 웹 페이지는 필요한 콘텐츠만 먼저 로드하고 사용자가 필요할 때 나머지 콘텐츠를 로드.
- 캐싱 활용.
- 프리페칭 활성화
- 콘텐츠 전송 네트워크 사용
2. 웹페이지 렌더링
🕵️♀️웹페이지 렌더링이란?
브라우저가 html 파일을 화면에 표현하는 것이다. 이 렌더링 되는 과정에는 Parsing, Style, Layout, Painting, Composite 단계가 있다.
2-1 Parsing
html 파일을 DOM 트리 형태로 변환하는 단계이다.
2-2 Style
CSS 파일을 파싱하여 CSSOM으로 변환하는 단계이다. 앞서 만들어진 DOM 트리에 각 노드 스타일을 결정한다.
2-3 Layout
파싱된 DOM 트리와 CSSOM 정보를 합쳐 렌더 트리를 생성한다. 이 단계에서는 렌더 트리를 화면에 어떻게 배치할 것인지 노드의 정확한 위치와 크기를 계산한다.
2-4 Painting
렌더 트리가 생성되면 이 트리를 따라 페인트 기록이 생성되는 단계이다.
✍ 페인트 기록
요소가 렌더링되는 순서를 저장되어 있다. 앞선 단계의 결과를 바탕으로 한 페이지를 여러개의 레이아웃으로 나눈 뒤 그 위에 텍스트, 색, 보더, 이미지, 그림자 등을 그리는 작업이 진행된다.
2-5 Composite
각각의 레이어를 스크린에 픽셀로 표현하고(레스터링) 나누었던 레이어들을 합성해 페이지를 그린다.
2-6 page reflow & repaint
🕵️♀️ reflow, repaint이란?
브라우저는 html 구조상의 변화 혹은 스타일의 변화가 있을 때 reflow, repaint 라는 과정을 거치게 된다. 브라우저의 각 단계별 렌더링 과정들은 반드시 전 단계의 데이터가 필요하다. 만약, 전 단계에 변화가 일어나면 다음 단계에 모두 영향을 미친다.
reflow : 레이아웃(너비, 높이 등) 변경 시 영향 받는 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업이다.
repaint : reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 색, 투명도 등의 스타일 변경시에는 reflow 과정을 생략한 repaint 작업만 수행한다.
✍ 브라우저에 미치는 영향
css를 통해 레이아웃이 바뀌는 애니메이션을 구현할 경우, 브라우저는 매 프레임마다 reflow, repaint 과정을 수행해야된다. 따라서, reflow 와 repaint 현상은 브라우저에 상당한 부담이 된다.
💬 transform 속성을 사용하여 GPU의 도움을 받아 비교적 빠르게 처리할 수 있다.
3. 반응 시간
사용자의 행동에 얼마나 빠르게 반응 하는가를 판단하는것이 바로 반응 시간이다. 빠른 반응 시간은 최적화를 하는 이유 중 하나이다.
✍ 반응 시간 개선 방법
1. JS 보다는 CSS 애니메이션을 활용.
2. GPU의 도움을 받기 위해 Transform 속성을 사용.
3. repaint, reflow 를 유발하는 속성은 되도록 지양.
4. DOM 접근과 업데이트는 가능한 적게.
5. requestAnimationFrame 을 사용.
6. Document fragment 를 사용
3-1 requestAnimationFrame
🕵️♀️requestAnimationFrame란?
브라우저가 애니메이션을 최적화 하도록 하여 애니메이션을 부드럽게 동작할 때 사용하는 메소드이다.(모니터의 주사율에 맞추어져 실행한다.)
function play() { if (keys.ArrowRight) { pos += 5; box.style.transform = `translateX(${pos}px)`; } else if (keys.ArrowLeft) { pos -= 5; box.style.transform = `translateX(${pos}px)`; } window.requestAnimationFrame(play); } window.requestAnimationFrame(play);위 소스코드 처럼
requestAnimationFrame()함수의 인자로는 실행할 함수가 들어가며, 실행 함수 내부는 재귀형식으로 구현한다.
3-2 Document fragment
🕵️♀️Document fragment란?
메모리상에서만 존재하는 경량화된 DOM 트리이다. 한 번에 DOM을 업데이트할 때 사용한다.
const parentEl = document.querySelector("body"); const frag = document.createDocumentFragment(); for (let i = 0; i < 10; i++) { const article = document.createElement("article"); article.innerHTML = ` <figure> <img class="figImg" src = "none" alt = ""> <figcaption class="figCap"> ayden 입니다. </figcaption> </figure > `; frag.appendChild(article); } parentEl.appendChild(frag);예를 들어, 위 소스코드 처럼
article구조를 여러개 추가해야 될 때 반복문을 사용할 수 있는데, 루프를 돌 때마다 DOM에 업데이트 되면 반복되는 렌더링 작업으로 부하가 걸릴 수 있다. 이때, 가상 DOM이라고 할 수 있는 DocumentFragment에article구조를 업데이트하고 실제 DOM에 DocumentFragment를 업데이트하여 반응 시간을 개선할 수 있다.
4. 메모리
4-1 메모리 생명 주기
🕵️♀️메모리 생명 주기란?
메모리 할당 :
- 프로그램이 사용할 수 있도록 운영체제가 메모리를 할당.
메모리 사용 :
- 실제로 프로그램이 사용하는 단계. 개발자가 코드 상에서 할당된 변수를 사용함으로써 읽기와 쓰기 작업이 이루어짐.
메모리 해제 :
- 프로그램에서 필요하지 않은 메모리 전체를 되돌려주어 다시 사용가능하게 만드는 단계
4-2 메모리 누수와 Garbage Collection
🕵️♀️메모리 누수란?
프로그램이 필요하지 않은 메모리 공간을 계속해서 점유하는 현상을 의미한다.
🕵️♀️Garbage Collection이란?
사용하지 않는 메모리는 자바스크립트 엔진이 추정하여 메모리를 해제하는데 이를 Garbage Collection 이라고 한다. 시스템에서 가비지 컬렉션을 수행하는 부분을 가비지 컬렉터라고 한다.
✍ 자바스크립트에서의 가비지 컬렉션 방식
자바스크립트에서의 가비지 컬렉션 방식은 참조 카운팅이다. 메모리에 존재하는 값을 몇개의 변수와 함수가 참조하고 있는지 살펴보고, 참조가 0이 되면 값을 메모리에서 삭제한다.
💬 전역 변수의 경우, 프로그램이 종료되기 전까지 계속 메모리에 존재하게 된다.
