My-Book(History)
-
-
자바스크립트 성능 이야기(DOM 스크립팅)My-Book(History) 2015. 3. 28. 15:13
★- CSS 클래스나 규칙 사용리스트에 있는 이미지를 선택하여 CSS를 변경할때 잘못된 예 :// 사진 요소를 모두 얻는다.var aPhotoItems = document.getElementByClassName(".photo_item"); // 모든 사진 요소의 속성을 바꾼다.for (var i=0; i < aPhotoItems.length; i++) {aPhotoItems[i].style.backgroundColor = "#ccc"laPhotoitems[i].style.border = "1px solid #aaa";}많은 DOM 객체에 접근하는 것도 모자라 CSS 속성까지 변경한다면 심각한 성능 저하가 발생한다.어쩔 수 없이 많은 수의 요소를 다뤄야 할 때가 있을때에는 CSS 클래스를 활용해 여러 요소..
-
자바스크리브 성능 이야기(타이머의 활용)My-Book(History) 2015. 3. 28. 14:09
★- 점진적 렌더링function loadIMG(src) {var img = document.createElement("img");img.src = src;document.getElementById("content").appendChild(img);} // 이미지를 로딩하도록 스케줄링 한다.setTimeout(function() {loadIMG("01.jpg");},0); 점진적 렌더링 실행 과정 :레이아웃을 먼저 표시 -> setTimeout에 의해 큐에 이미지들이 쌓이기 시작 -> 스케줄링된 이미지들이 점진적으로 로딩되고 렌더링되게 한다.
-
자바스크립트 성능이야기(리플로&리페인트)My-Book(History) 2015. 3. 28. 10:45
★- 리플로 와 리페인트 리플로 : 변경(일부 또는 전체)이 필요한 렌더 트리에 대한 유효성 확인 작업과 함께 노드의 크기와 위치를 다시 계산한다. 이과정을 리폴로 또는 레이아웃, 레이아웃팅 이라 부른다.노드의 '크기' 또는 '위치'가 바뀌어 현재 레이아웃에 영향을 미쳐 배치를 다시 해야 할 때 리플로가 발생한다. 리페인트 :변경 영역의 결과를 표현하기 위해 화면이 업데이트되는 것을 의미한다. 리플로가 발생 하거나 배경색 변경 등의 단순한 스타일 변경과 같은 작업이 발생하는 경우다. ★- 리플로 최소화 방법 작업 그루핑잘못된 예 :function change() {var width = document.getElementById("layer1").style.width;document.getElementBy..
-
자바스크립트 성능 이야기(스코프 체인)My-Book(History) 2015. 3. 23. 18:13
★- 스코프 체인 객체 , 변수에 효율적으로 접근하도록 객체를 분류하고 객체를 특정한곳 저장해두는 공간을 뜻한다. ECMA-262 3 Edition 에서는 함수객체는 [[scope]] 라는 프로퍼티를 가지며 [[scope]]는 함수객체가 생성되는 시점과 관련된 Object Reference 정보를 가지고 있으며 이 Object Reference 정보들을 Scope Chain 이라고 한다고 정의한다. 즉 scope는 함수객체가 접근가능한 Valiable Object의 유효범위이며 이 Valiable Object들의 집함을 Scope Chain 이라고 한다. 함수객체는 생성과정에서 함수구문 내에서 선언된 지역변수들을 Valiable Object 라는 객체에 저장한다. 그리고 전역객체(Global Object..
-
자바스크립트 PatternsMy-Book(History) 2015. 3. 23. 17:05
a 는 지역 변수 b는 전역 변수가 된다. // 안티패턴. 사용하지 말것function foo() { var a = b = 0; } 이런 일이 생기는 이유는 평가가 오른쪽에서 왼쪽으로 진행되기 때문이다. 먼저 b = 0 이라는 표현식이 평가되는데, 이때 b는 선언되지 않은 상태다. 이 표현식의 반환 값 0 은 다시 var a 로 선언된 새로운 지역 변수에 할당된다. 즉 앞의 코드는 다음과 동일하다. var a = (b = 0); var 선언문을 빼먹었을때 부작용 - var를 사용하여 명시적으로 선언된 전역 변수(함수에 속하지않은 변수)는 삭제할 수 없다.- var를 사용하지 않고 생성한 암묵적 전역 변수는 삭제할 수 있다.(함수안에서 생성되었든 아니든)
-
-