Web 프로그래밍/Javascript60 [Javascript HighPerformance] 이벤트 위임 프로그램을 구현하다 보면 등의 표현을 사용 할 때가 있다. 이벤트 핸들러를 등록하는 것도 DOM입장에서는 하나하나 시간이 드는 작업입니다. 그래서 이를 최소화 해주시는 것이 좋고 엘리먼트에 이벤트를 등록할 시에는 부모요소에 핸들러를 하나 붙여서 모든 자식 요소에서 발생하는 이벤트를 처리하도록 하는 것이 최적화된 기법입니다. 2016. 6. 9. [Javascript HighPerformance] 애니메이션 사용시 절대값 사용하기 모든 DOM 혹은 CSS 등에서 애니메이션을 넣어야 하는 상황이 온다면 해당 애니메이션 엘리먼트 요소를 절대값으로 위치하는 것이 좋다. 이유는 간단하다. 리플로우를 방지하기 위함이다. 절대값이 아닌 상대값(relative)로 애니메이션을 구현하게 된다면 다른 엘리먼트들도 변경이 되어 리플로우 되어 DOM 속도가 느려지게 된다. 절대값으로 지정하게 되면 애네메이션으로 지정된 엘리먼트만 동작하기 때문에 다른 엘리먼트 요소에 대해서 리플로우를 최소화 시킬 수 있다. 무슨말인지 모르겠는가? 리플로우를 공부하면 알 것이다. 2016. 6. 9. [Javascript HighPerformance] 문서조각을 이용하여 DOM 추가하기 문서조각을 이용하는 것은 리플로우의 작업을 최소화 하기 위해서 DOM 변경을 처리할 때 가장 좋은 방법입니다. 동적으로 추가하는 방식이다. 최소한의 DOM을 접근하기 때문에 성능면에서는 우수하나 알고 있는 사람이 많이 없어서 아쉬울 뿐이다 2016. 6. 9. [Javascript] preventDefault, stopPropagation 자바스크립트에서 preventDefault, stopPropagation 은 비슷해 보이면서도 다른 목적을 가지고 있는 이벤트 핸들러 함수이다. 이 함수의 큰 목적은 preventDefault : 현재 객체에 있는 모든 실행요소를 멈춘다. stopPropagation : 상위 노드로 가는 이벤트를 멈춘다. 1. stopPropagation 두개의 이벤트 함수를 이해하기 위해서는 이벤트 버블링을 알아야 한다. 위와 같은 간단한 예제를 보면 클릭을 클릭하면 어떻게 실행이 될까? 1) parent -> child 2) child -> parent 답은 2번이다. 이벤트 버블링은 현재 있는 노드부터 상위(부모)노드로 올라가면서 진행이 된다. 그런데 나는 여기서 클릭을 누르면 child만 띄우고 parent 띄우.. 2016. 6. 9. [Javascript HighPerformance] Reflow, Repaint 브라우저가 페이지의 구성요소 전체(Html, Javascript, CSS)를 내려받으면 기본족으로 내부적인 데이터 구조 두가지를 만든다 DOM 트리 : 페이지 구조를 나타내는 것 렌더트리 : DOM 노드를 어떻게 표시할 지 나타내는 것 렌더트리는 DOM트리 노드 중 표시할 모든 노드에 대해 적어도 하나의 노드르 만든다. 렌더트리에 있는 노드는 페이지 요소를 마진, 패딩, 테두리, 포지션등 박스로 취급하는 CSS모델과 연관해서 프레임 또는 박스로 불린다. DOM 트리와 렌더트리를 다 만들면 브라우저는 페이지 요소를 표시(페인트) 할 수 있다. DOM이 완료가 되고 그 후에 DOM이 변경 되면 브라우저는 변경된 요소에 대해 구조, 위치, 디자인 등 다시 계산하여 DOM에 적용을 한다. 이러한 과정을 Refl.. 2016. 6. 9. [Javascript] document.querySelectorAll , querySelector 2개의 API 함수는 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환한다. 사용방법은 간단하다 querySelector은 첫번 째 값을 반환하는 것만 제외하면 사용법은 querySelectorAll과 똑같다 2016. 6. 9. 이전 1 2 3 4 5 6 7 ··· 10 다음
