javascript 성능 최적화 및 브라우저 처리 방법 Javascript & HTML & CSS/pure javascript2016. 12. 21. 17:52
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 바깥에서 문서 조각을 만들어 변경한 후 문서에 복사
- 현재 요소를 문서 밖의 노드에 복사해서 사본을 변경한 후 원래 요소를 대체함
추후 정리 추가할 예정
'Javascript & HTML & CSS > pure javascript' 카테고리의 다른 글
Naver의 front-end 스터디 자료 (0) | 2016.12.31 |
---|---|
Javascript 객체지향 개발 (0) | 2016.12.28 |
javascript의 유효 범위 (0) | 2016.12.14 |
javascript event 전달 막기 (0) | 2016.12.06 |
javascript 객체지향 연습 - LinkedList 만들기 (0) | 2016.12.05 |