Layout Minimize (레이아웃 최소화)
브라우저 렌더링 과정에서 레이아웃(Layout) 과정이 발생하면 부모 / 자식 요소들의 크기를 재계산하고 하위 요소들에 모두 영향을 주기 때문에 부하가 매우 크다
렌더링 병목현상을 최소화하기 위해 레이아웃의 실행을 최소화할 필요가 있다.
강제 동기 레이아웃 / 레이아웃 스래싱(Layout Thrashing) 피하기
강제 동기 레이아웃 : 레이아웃은 기본적으로 비동기로 실행하지만 동기적으로 발생하여 실행시간이 불필요하게 증가하는 경우
레이아웃 스래싱(Layout Thrashing) : 강제 동기 레이아웃이 연속적으로 발생하는 현상
ex) 기하학적인 속성을 계산하여 반환하기 전 스타일을 변경
function LayoutThrashingComponent() {
const box = document.getElementById('box');
for(let i = 0; i < 10; i++) {
box.style.left = i + 'px';
box.style.top = i + 'px';
let width = box.offsetWidth;
let height = box.offsetHeight;
}
}
function OptimizeComponent() {
const box = document.getElementById('box');
let width = box.offsetWidth;
let height = box.offsetHeight;
for(let i = 0; i < 10; i++) {
box.style.left = i + 'px';
box.style.top = i + 'px';
}
}