렌더링 최적화방법

@domenico-loia unsplash

렌더링 최적화 방법

1. 인라인 스타일 사용하지 않기

인라인 스타일은 가독성을 해칠 뿐 아니라 수차례 리플로우를 발생시킵니다. 그에 반해 외부 스타일을 사용할 경우 한 번만 리플로우를 발생합니다.

 

2. 작업 그룹핑

DOM 요소의 정보를 요청하고 변경하는 코드는 같은 형태의 작업끼리 묶어 실행시키는 것이 좋습니다.

 

function popChange() {
  let width = document.getElementById("pop1"). style.width;
  document.getElementById("pop2"). style.width = width;               
  let height = document.getElementById("pop3"). style.height;
  document.getElementById("pop4"). style.height = height;
}

 

3. 노출 제어 

display 속성의 값을 none으로 하면 렌더링 트리에서 노드가 빠지게 됩니다.

따라서 노드를 노출시킨 채 스타일을 변경하는 것보다 노드를 감추고 스타일을 변경한 후 노드를 노출시키는 것이 리플로우와 리 페인트 발생 횟수를 줄이는 방법입니다.

 

Ex)

let element = document.getElementById("box1");

for(let i=50; i <100; i++) {
  element.style.width = i + "px";
}

for(let i=1; i <=50; i++) {
  element.style.borderWidth = i + "px";
}

// 아래와 같이 렌더링 트리에서 빼준 다음, 스타일을 적용하고 다시 노출합니다.
// 이 경우 두 번의 리플로우 리 페인트만 발생합니다.
let element = document.getElementById("div1");
element.style.display = "none";
for(let i=50; i <100; i++) {
  element.style.width = i + "px";
}

for(let i=1; i <=50; i++) {
  element.style.borderWidth = i + "px";
}

element.style.display = "block";

 

4. 노드 복제

변경하려는 요소의 노드를 복제한 후 복제된 노드에 작업을 하고 교체를 해주게 되면 리플로우와 리 페인트는 한 번만 발생합니다.

 

5. 캐싱

여기서 설명하는 캐싱이란 별도의 변수에 자주 사용하는 갓을 저장하는 것입니다. 

scrollWidth와 같은 값을 호출할 경우 리플로우를 유발하기 때문에 반복 구문을 실행하기 전에 이를 변수에 담아 놓으면 리플로우 발생을 최소화할 수 있습니다.

 

이외에도 여러 가지가 있습니다.