[WEB] 브라우저 렌더링 성능을 높히는 개발

 

 

---

1. 과도한 DOM 크기 지양하기

DOM의 깊이가 렌더링 성능에 어떤 영향을 줄까요?

• 페이지 크기가 동일한 경우에도 중첩된 트리가 있는 페이지가 성능이 낮다.

1) body.children[4];
2) body.children[0].children[0].children[0].children[0].children[0];

 

주기적으로 DOM 크기와 깊이 확인하기

• Lighthouse 또는 PageSpeed Insights와 같은 도구를 사용하여 사이트의 DOM 크기와 깊이를 측정할 수 있습니다. 특정 시간에 페이지에 얼마나 많은 요소가 있는지 빠르게 확인하려면 브라우저의 콘솔에서 아래를 실행하면 됩니다.
• 30~5000 사이

document.querySelectorAll("*").length;

CSS 선택자의 범위와 복잡성을 줄이는 것