jquery8 자바스크립트 성능 최적화 #1 : 코드 스타일 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 va.. 2018. 12. 19. 자바스크립트 성능 최적화 #2 : 렌더링 + α 자바스크립트 성능 최적화 #1 포스트와 마찬가지로 NHN은 이렇게 한다 자바스크립트 성능 이야기의 내용들이다.브라우저 렌더링 과정 및 기타에서도 속도를 향상 시킬수 있다. 렌더링 및 기타 방법에는 크게 아래 4가지 방법이 있다. reflow, repaint 최소화노출 제어를 통한 reflow 최소화 (display 속성 이용)DOM, 객체 캐싱기타 reflow, repaint 최소화같거나 동일한 작업은 그룹을 묶어 실행한다. (구버전 브라우저에서는 전의 작업의 경우, 여러번의 reflow와 repaint가 발생하나 최신 버전 크롬의 경우 한번만 발생한다고 함)reflow와 repaint에 대한 설명은 아래 글 참고브라우저 렌더링 : reflow & repaint1234567891011// 전var wid.. 2018. 12. 19. jQuery - 탐색(Traversing) 트리구조 탐색(Tree Traversal)DOM Tree의 Tree 구조를 기반으로 찾아가는 방식. Method 설명 childern() 선택한 노드의 모든 자식 요소를 선택 find() 선택한 노드의 자손 요소 중 조건에 맞는 요소를 선택 next() 선택한 노드의 다음 노드를 선택 nextAll() 선택한 노드의 다음 모든 노드를 선택 parent() 선택한 노드의 부모 노드를 선택 parents() 선택한 노드의 모든 부모 노드를 선택 prev() 선택한 노드의 이전 노드를 선택 prevAll() 선택한 노드의 모든 이전 노드를 선택 closest() 선택한 노드를 포함하면서 가장 가까운 상위 노드를 선택 nextUntil() 다음에 위치한 노드를 조건에 맞을 때까지 찾음 parentsUntil().. 2018. 11. 2. jQuery - 자주 사용되는 함수 정리 함수 명함수 설명엘리먼트 조작each(Function)선택된 엘리먼트가 다수일 경우에 each 함수를 사용하여 차례대로 엘리먼트를 선택한다.에트리뷰트 조작attr(name, value)선택된 엘리먼트의 name 에트리뷰트의 값을 value로 설정 attr(name)선택된 엘리먼트의 name 에트리뷰트의 값을 얻어옴. attr(Attributes)선택된 엘리먼트를 프로퍼티(json)형태로 설정할 수 있음 val()엘리먼트의 value 에트리뷰트 값을 얻어옴. attr("value")와 동일함. val(content)엘리먼트의 value 에트리뷰트 값을 content로 설정함.에트리뷰트 제거removeAttr(name)해당 어트리뷰트의 값이 초기화 된다.스타일 변경addClass(names)선택된 엘리먼트에.. 2018. 11. 2. jQuery - selector 요약 정리 셀렉터는 jQuery의 가장 강력한 기능이다. 간단하게 설명을 하자면, HTML 문서 안에는 다양한 엘리먼트들이 포함되어 있는데, 이를 컨트롤 하기란 결코 간단한 일이 아니다. 일반적으로 자바스크립트에서 엘리먼트를 얻기 위해 많이 쓰이는 방법은 document.getElementById("엘리먼트 ID 속성 값") 함수를 사용하면 되지만, 일단 소스 코드가 길어지고 얻을 수 있는 엘리먼트들도 매우 한정적이다. 하지만 jQuery에서는 $("셀렉터 문법") 함수를 사용하여 매우 간단하고 다양한 스타일의 엘리먼트들을 쉽게 얻을 수 있다. 셀렉터로 얻은 엘리먼트들을 확장 집합이라 하는데, 특수한 배열 형태의 객체로 반환이 된다. 이렇게 반환된 객체들은 jQuery가 지원하는 매우 다양한 함수들을 사용할 수 있.. 2018. 11. 2. jQuery - each() 메서드 jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있습니다.each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다. each() 메서드는 다음과 같은 두 가지 타입이 있습니다.JAVASCRIPT// jQuery 유틸리티 메서드$.each(object, function(index, item){});// jQuery 일반 메서드$(selector).each(function(index, item){})위의 메서드를 차례로 알아보도록 하겠습니다. $.each()$.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다.다시 말해, 배열과 length 속성을 갖는 배열과 .. 2018. 11. 2. 이전 1 2 다음 반응형
