메뉴 건너뛰기

XE Guidebook

조회 수 5 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

▣ jQuery의 Performance를 높이려면.. 


웹 개발자들은 jQuery의 강력하고 쉬운 기능을 사용함으로써
개발에 따른 공수를 줄이고 프로그램 개발을 아주 용이하게 하였지만,
상대적으로 클라이언트의 부하는 증가하게 되었다.
 
jQuery 사용 시 아래와 같은 방법으로 사용하게 되면,  
클라이언트의 부하를 줄이고 성능을 어느 정도 좀 올릴 수 있을 것이다.
 
 

▶ 셀렉터의 구체화

 
jQuery는 셀렉터를 사용할 때, 보다 구체적으로 자세히 명시하게 되면 성능이 올라간다.
 
$(‘#elementID’), $(‘elementName’)는 조금 상황이 다르지만,
“class” 또는 “attribute”를 통한 셀렉트 시에는
최대한 자세히 명시를 해 주면 성능에 큰 도움이 된다.
 
가령, 셀렉터로 “class”를 사용할 경우에는, 
단순히 $(“.myClass”) 보다는 $(“div > ul > li.class”)와 같이 구체적이고 자세한 정보를 주면,
jQuery가 HTML문서에서 탐색하는 범위가 줄어 들어 성능이 향상된다.
 
 

▶ 셀렉터의 사용 자제

 
셀렉터를 사용하다 보면 같은 요소를 여러 번 셀렉트하는 경우가 발생하곤 하는데,
이럴 경우에는 기존에 사용한 셀렉터는 변수를 사용하여 재사용하거나,
.end() 메서드를 이용하여 반복 사용하지 않는 것이 좋다.
 
가령, 다음과 같은 2개의 jQuery 스크립트는 
  $("div.container").find("ul").css("padding","5px").css("margin","0 0 10px 0");
  $("div.container").find("li").css("margin","0 0 0 10px");
 
변수를 사용하여 반복되는 셀렉터를 대체하는 것이 좋으며,
  var $container = $("div.container");
  $container.find("ul").css("padding","5px").css("margin","0 0 10px 0");
  $container.find("li").css("margin","0 0 0 10px");
 
.end() 함수를 이용하여 반복 사용하지 않는 것이 좋다.
  var $container = $("div.container");
  $container.find("ul").css("padding","5px").css("margin","0 0 10px 0")
  .end()
  .find("li").css("margin","0 0 0 10px");

 
 

▶ 순수 javaScirpt 사용

 
jQuery는 javaScirpt의 복잡한 함수로 이루어진 라이브러리로, 
jQuery 함수의 실행은 내부에서 구현된 복잡한 로직을 통해 결국 javascript를 실행하고 있기 때문에, 
해당 로직을 피하고 javaScirpt 코드를 바로 사용하게 되면 그만큼 성능이 좋아진다.
  
가령, 다음과 같은 식으로 코딩하면 성능이 더 올라가게 된다.  
 
  - $("#id") 보다는 document.getElementById("id")
  - $("#id").css("color", "#09f") 보다는 document.getElementById("id").style.color = "#09f";
    $("#id").hide() 보다는 document.getElementById("id").style.display = "none";

 
또한, DOM 처리를 할 때에도 jQuery 보다는
순수 javaScript를 사용하는 것이 성능 면에서는 더 좋아진다.
 
아래 예제에서 ( 방법 1 ) 보다는 ( 방법 2 )가 성능이 더 올라간다.
 

( 방법 1 )

  $(document).ready(function () {
    var $htmlData = $("<ul/>");
    for (var i = 0; i < 5; i++) {
      $htmlData.append($("<li/>").text('신기루.com(' + i.toString() + ')'));
    }
    $htmlData.appendTo('#container');
  });
 

( 방법 2 )

  $(document).ready(function () {
    var htmlData = '<ul>';
    for (var i = 0; i < 5; i++) {
      htmlData += '<li>신기루.com(' + i.toString() + ')' ;
    }
    htmlData += '</ul>';
    $('#container').html(htmlData);
 
 

▶ css() 메서드는 CSS를 적극 활용


 
.css() 메서드를 사용하여, 선택한 개체에 특정 스타일을 적용할 경우에
jQuery는 내부에서 많은 처리를 하게 된다.
.css() 함수의 잦은 사용보다는 CSS 파일에 각각의 스타일 클래스를 작성하고,
해당 클래스를 적용하는 것이 좋다.
 
가령, 다음과 같은 toggle() 메서드를 사용하는 jQuery 스크립트에서
  
  $("div").toggle(
    function(){
      $(this).css({
        "background-color":"#09f",
        "font-size":"18px",
        "font-weight":"bold",
        "color":"#fff"
      });
    },
    function(){
      $(this).css({
        "background-color":"#f60",
        "font-size":"12px",
        "font-weight":"normal",
        "color":"#000"
      });
    }
  );
 
CSS 스타일시트를 적극 활용하여
toggle() 메서드 구문을 아래와 같이 사용하는 것이 좋다.
 
/* CSS */
 
  .on {
    background-color:#09f;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }
  .off {
    background-color:#f60;
    font-size:12px;
    font-weight:normal;
    color:#000;
  }
 
 
/* jQuery */
 
  $("div").toggle(
    function(){
      $(this).addClass("on");
    },
    function(){
      $(this).addClass("off");
    }
  );


List of Articles
번호 분류 제목 글쓴이
63 JQuery 개요 01-01 jQuery란? file happiziger
62 JQuery 개요 01-02 jQuery 기능 happiziger
61 JQuery 개요 01-03 jQuery 라이브러리의 설치와 사용 file happiziger
60 JQuery 개요 01-04 jQuery 맛보기 예제 file happiziger
59 JQuery Core 02-01 jQuery Core file happiziger
58 JQuery Core 02-02 jQuery()를 이용하여 jQuery object를 생성하는 방법 happiziger
57 JQuery Core 02-03 jQuery 스크립트의 작성 위치와 문서준비이벤트의 사용 happiziger
56 JQuery Core 02-04 jQuery의 단축 표현인 “$” 변경하기 file happiziger
55 Selector 03-01 jQuery Selector 의의와 종류 happiziger
54 Selector 03-02 기본 셀렉터(Basic Selector) file happiziger
53 Selector 03-03 계층 선택자 (Hierarchy selector) file happiziger
52 Selector 03-04 속성 선택자 (Attribute Selector) file happiziger
51 Selector 03-05 기본 필터 선택자 (Basic Filter) file happiziger
50 Selector 03-06 내용 필터 선택자 (Content Filter) file happiziger
49 Selector 03-07 보임 필터 선택자 (Visibility Filter) file happiziger
48 Selector 03-08 자식 요소 필터 선택자 (Child Filter) file happiziger
47 Selector 03-09 폼 선택자 happiziger
46 Traversing 04-01 Traversing(탐색)의 개념 happiziger
45 Traversing 04-02 트리 구조 탐색 (Tree Traversal) file happiziger
44 Traversing 04-03 필터링 (Filtering) file happiziger
Board Pagination Prev 1 2 3 4 Next
/ 4