javascript 성능 최적화 및 브라우저 처리 방법

DOM트리 : 페이지 구조를 나타내는 트리

Render트리 : 화면에 표시할 구조를 나타내는 트리

(DOM에 기반하지만, 숨겨진(hidden) DOM의 노드는 렌더트리에는 존재하지 않음)

 

 

 

리플로우 발생 시점

 - 페이지 처음 표시

 - 보이는 DOM 추가 or 제거

 - 위치 변경

 - 크기 변경 (margin, padding, border두께, width, height)

 - 내용 변경 (텍스트, 이미지)

 - 브라우저 창 크기 변경

 

렌더 트리 변경 처리 방법

리플로우는 비용이 많이 들기 때문에 브라우저 대부분은 렌더 트리 변경을 큐에 모았다가 한번에 처리

 

리플로우가 발생하는 렌더트리 강제 변경

 - 오프셋 offsetTop, offsetLeft, offsetWidth, offsetHeight

 - 스크롤 scrollTop, scrollLeft, scrollWidth, scrollHeight

 - 클라이언트 clientTop, clientLeft, clientWidth, clientheight

 - getComputedStyle() (IE에서는 currentStyle 사용)

 

리플로우와 리페인트 최소화 방법

1. 노드를 생성하여 삽입할 때(ex : 행이 100줄인 테이블 생성)

createElement(), appendChild()를 사용하는 것보다 스크립트 변수에 문서를 만들어 innerHTML을 사용하여 삽입하자

2. DOM변경 한번에 처리하기

cssText속성으로 스타일을 변경하자

 - el.style.cssText = 'border-left:1px; padding: 5px';

DOM요소에서 여러가지를 변경해야 할 경우

 - 요소를 숨기고 변경한 후 다시 드러냄

 - 현재 DOM 바깥에서 문서 조각을 만들어 변경한 후 문서에 복사

 - 현재 요소를 문서 밖의 노드에 복사해서 사본을 변경한 후 원래 요소를 대체함

 

 

추후 정리 추가할 예정

 

 

출처 : https://www.youtube.com/watch?v=-vgUhRG2ZeE