일상속으로

nhn은 이렇게 한다 자바스크립트 성능 이야기의 내용들을 발췌하였음바로 활용할 수 있는 부분을만 추려서 요약한다.코드 스타일 부분에서는 크게 아래 3가지를 통해 성능을 향상시킬 수 있다. 변수, 객체 생성 및 접근정규표현식반복문 변수, 객체 생성 및 접근1) 배열 생성 : var arr = []; 이 var arr = new Array() 보다 빠름2) 배열 데이터 초기화 및 접근 : arr[i] = i;이 vs arr.push(i); 보다 빠름3) 객체 생성 : var obj = {}; vs var obj = new Object(); 보다 빠름4) 객체 데이터 초기화 및 접근 : obj.a = 1; vs obj["a"] = 1; 보다 빠름5) 문자열 생성 : var str = "test"; vs var..

자바스크립트 성능 최적화 #1 포스트와 마찬가지로 NHN은 이렇게 한다 자바스크립트 성능 이야기의 내용들이다.브라우저 렌더링 과정 및 기타에서도 속도를 향상 시킬수 있다. 렌더링 및 기타 방법에는 크게 아래 4가지 방법이 있다. reflow, repaint 최소화노출 제어를 통한 reflow 최소화 (display 속성 이용)DOM, 객체 캐싱기타 reflow, repaint 최소화같거나 동일한 작업은 그룹을 묶어 실행한다. (구버전 브라우저에서는 전의 작업의 경우, 여러번의 reflow와 repaint가 발생하나 최신 버전 크롬의 경우 한번만 발생한다고 함)reflow와 repaint에 대한 설명은 아래 글 참고브라우저 렌더링 : reflow & repaint1234567891011// 전var wid..

렌더링 과정1) DOM 트리 생성2) 스타일 구조체 생성3) 렌더 트리 생성4) 레이아웃 처리5) Paint6) 페이지 기능에 따라 Reflow, Repaint가 추가로 발생 reflow생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시, 영향받은 모든 노드(자식, 부모 등)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업1234function reflow() { document.getElementById('test').style.width = '100px'; return false;}Colored by Color Scriptercs repaintReflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업.수치와 상관없는 background-color, visibillty, outline..

트리구조 탐색(Tree Traversal)DOM Tree의 Tree 구조를 기반으로 찾아가는 방식. Method 설명 childern() 선택한 노드의 모든 자식 요소를 선택 find() 선택한 노드의 자손 요소 중 조건에 맞는 요소를 선택 next() 선택한 노드의 다음 노드를 선택 nextAll() 선택한 노드의 다음 모든 노드를 선택 parent() 선택한 노드의 부모 노드를 선택 parents() 선택한 노드의 모든 부모 노드를 선택 prev() 선택한 노드의 이전 노드를 선택 prevAll() 선택한 노드의 모든 이전 노드를 선택 closest() 선택한 노드를 포함하면서 가장 가까운 상위 노드를 선택 nextUntil() 다음에 위치한 노드를 조건에 맞을 때까지 찾음 parentsUntil()..