자바스크립트에서 preventDefault, stopPropagation 은 비슷해 보이면서도 다른 목적을 가지고 있는 이벤트 핸들러 함수이다. 이 함수의 큰 목적은 preventDefault : 현재 객체에 있는 모든 실행요소를 멈춘다. stopPropagation : 상위 노드로 가는 이벤트를 멈춘다. 1. stopPropagation 두개의 이벤트 함수를 이해하기 위해서는 이벤트 버블링을 알아야 한다. 위와 같은 간단한 예제를 보면 클릭을 클릭하면 어떻게 실행이 될까? 1) parent -> child 2) child -> parent 답은 2번이다. 이벤트 버블링은 현재 있는 노드부터 상위(부모)노드로 올라가면서 진행이 된다. 그런데 나는 여기서 클릭을 누르면 child만 띄우고 parent 띄우..

브라우저가 페이지의 구성요소 전체(Html, Javascript, CSS)를 내려받으면 기본족으로 내부적인 데이터 구조 두가지를 만든다 DOM 트리 : 페이지 구조를 나타내는 것 렌더트리 : DOM 노드를 어떻게 표시할 지 나타내는 것 렌더트리는 DOM트리 노드 중 표시할 모든 노드에 대해 적어도 하나의 노드르 만든다. 렌더트리에 있는 노드는 페이지 요소를 마진, 패딩, 테두리, 포지션등 박스로 취급하는 CSS모델과 연관해서 프레임 또는 박스로 불린다. DOM 트리와 렌더트리를 다 만들면 브라우저는 페이지 요소를 표시(페인트) 할 수 있다. DOM이 완료가 되고 그 후에 DOM이 변경 되면 브라우저는 변경된 요소에 대해 구조, 위치, 디자인 등 다시 계산하여 DOM에 적용을 한다. 이러한 과정을 Refl..

2개의 API 함수는 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환한다. 사용방법은 간단하다 querySelector은 첫번 째 값을 반환하는 것만 제외하면 사용법은 querySelectorAll과 똑같다

생각없이 개발을 하다보면 지역변수를 선언하지 않고 객체에 직접접근하여 사용하는 경우가 있다. 특히 반복문을 작성할 때 많이들 실수하는 부분인데 이런 부분은 작은 사이트일 때는 큰 변화가 없지만 큰 사이트일 수록 속도에 비약적으로 차이가 난다. 간단한 예제를 보자 div의 개수를 가져와서 반복문을 돌리는 간단한 예제이다. 위의 반복문은 직접접근, 아래의 반복문은 지역번수에 캐시해서 돌아간다. 개수가 작을 때는 크게 상관이 없겠지만 개수가 늘어나면 늘어날 수록 시간차이는 분명 존재한다. 대략 0.6초 가 차이나는데 브라우저가 느린환경이라면 더 느릴수도 있다는 이야기이다.

자바스크립트에서는 데이터를 저장하고 읽는 위치에 따라 코드의 전반적인 성능에 분명한 차이가 있다. 1) 리러털 값과 지역변수는 매우 빨리 접근이 가능하고, 배열과 객체는 이보다는 느리다. 2) 스코프 밖의 변수는 스코프 체인의 첫 번째 변수 객체에 있으서 지역변수보다 느리다. 변수 스코프가 체인이 깊을 수록 접근하는데 시간이 많이 걸리고 전역변수는 스코프 체인 검색에 가장 마지막에 검색이 되어 시간이 많이 걸린다. 3) with 문은 그냥 쓰지 말아라 4) 중첩된 객체멤버는 성능에 많이 느려진다. 피하라. 사용해야 한다면 최소한으로 접근을 하고 지역변수에 캐시해서 사용하자 5) 속성(프로퍼티) 메서드(함수)가 프로토타입 체인 깊이 있을 수록 느리다. 위와 같은 방식을 피해서 코드를 작성하면 분명이 빨라질..

자바스크립트의 성능을 높이기 위해 가장 기본적으로 스코프체인이라는 것을 알아야한다. 스코프체인이란 함수안에서 선언된 변수를 함수가 찾아가는 과정을 말한다. 스코프체인에서 가장 먼저 검색을 하게 되는 것은 지역변수이며 가장 마자막에 검색을 하는 것은 전역변수 이다. 함수를 실행하게 되면 실행문맥이라는 내부객체가 생성이 되며, 실행문맥은 함수가 실행되는 환경을 정의한다. 함수를 여러번 호출 하면 실행문맥도 여러 개 만들어 지고 함수가 완전히 실행되면 실행문맥은 파괴된다. 여기서 스코프 체인이 일어나는데 활성화 객체(Activation object)와 전역객체(Global object)가 실행이 되어 우선 적으로 활성화 되어 있는 객체를 검색해서 할당된 변수를 찾습니다. 지역변수를 먼저 검색한다고 생각하시면 ..