2011-11-30 2 views
0

레거시 프로젝트에서 나는 모두의 jquery 사용자 정의 코드를 모든 페이지의 한 파일에 하나의 doc.ready로 저장합니다 (유지 관리가 쉽지만 페이지 당 불필요한 선택기가 많이 필요함). 나는 (a) 이것은 엉망인 프로그래밍이다 (b) 이것은 나쁜 성능이되어야한다는 것을 생각하기 시작했다. 그래서 나는 약간의 연구를하기 시작했다.jQuery 성능 (쿼리 낭비)

기본적으로 하나의 js 파일을 원했지만 해당 페이지에 필요한 쿼리/선택기/기능 만로드하거나 제공하려고했습니다.

나는이 옵션을 가로 질러 온 : body 태그를

mylib.article.init(); 

global.js

var mylib = 
{ 
    article_page : 
    { 
     init : function() 
     { 
      // Article page specific jQuery functions. 
     } 
    }, 
    traffic_light : 
    { 
     init : function() 
     { 
      // Traffic light specific jQuery functions. 
     } 
    } 
} 
을 닫는 위의 페이지의 하단에

  1. http://www.artzstudio.com/2009/04/jquery-performance-rules/#eliminate-query-waste

(스크립트 호출

2.

$(document).ready(function() { 
    $('#sideNav LI:not(#current)').hide(); 
}); 

일부 페이지는 측면 탐색이없는에도 불구하고,이에 오류가 발생하지 않습니다 http://jonraasch.com/blog/5-performance-tuning-tricks-for-jquery

우리는 페이지로드에 측면 탐색 요소를 축소하려는 사이트의 일부에 있다고 가정 모든 브라우저는 숨김 기능이 필요할 때만 실행되도록합니다.

$(document).ready(function() { 
    var sideNavPages = ['catalog', 'order', 'contact']; 

    if (jQuery.inArray(thisPage, sideNavPages) != -1) { 
     $('#sideNav LI:not(#current)').hide(); 
    } 
}); 

위의 2 개 중 어느 것이 더 좋습니까? 세 번째로 더 좋은 옵션이 있습니까?

사람들이 생각하는 것을 잘 알고 있습니다.

Adi.

답변

1

의 jQuery 코드가 없으면 성능 차이를 느끼지 않을 것입니다. 는 DOM 요소를 찾기 위해 최적화되고, DOM 조작이 중 하나 가장 느린 자바 스크립트 작업입니다,하지만 같은이 상대적으로 사소한 작업이 (같이 당신은 할 수 있습니다.

그러나 이에 대한 필요성을 발견 한 경우 제가 추천하는 방법은 # 1이를 구성하는 한 영리한 방법은 같은 같은 조직 JS해야하는 것입니다.

var handlers = { 
    id1: function() { 
     $(document).ready(function() { 

     }); 
    }, 

    id2: function() { 
     $(document).ready(function() { 

     }); 
    } 
} 

을 다음과 같은 핸들러를 호출 할 수 있습니다;

var id = $('body').attr('id'); 
if (id && typeof obj[id] == "function") { 
    obj[id](); 
} 
0

둘 중 첫 번째 것을 선호합니다. 다른 한편으로는 하나의 JS 파일 만 갖고 싶다고 생각하는 것이 좋습니다. 각 유형의 페이지에 대한 코드를 분리하고 필요한 코드 만 포함하면 요구 사항을 충족시킬뿐만 아니라 전체 페이지 크기를 줄일 수 있습니다.

어쨌든.

"우리는 작은 효율성에 대해 잊지한다, 시간의 약 97 % 말 : 조기 최적화는 모든 악의 뿌리입니다"이 모든 것은 또 다른 생각에 차있다

- 도널드 크 누스

Donald Knuth은 매우 현명한 사람입니다. 실행중인 선택기의 수가 눈에 띄는 문제를 일으키고 있다고 생각하지 않는다면 코드에 어떤 복잡성도 추가 할 필요가 없을 것입니다.