2012-03-11 3 views
1

현재 일종의 웹 앱을 만들고 있는데, 그 중 일부는 동적으로 페이지에 js 스크립트를로드하고 추가하여 작동합니다. 이를 위해 나는 그것을로드하는 JQuery의 $.getScript() 메서드를 사용하고 있습니다.

캐시 된 것으로 설정했습니다.

내 프로그램을 사용하면 스크립트가 이미 존재하면 어쨌든 캐시로 보이는 것으로부터 다시로드됩니다. 내가 궁금해하는 것은 이것이 사이트와 성능에 얼마나 영향을 미칠 것인가입니다. 기존 스크립트와 동일한 src를 가진 새로로드 된 스크립트가 이전 스크립트를 덮어 쓰거나 이전 스크립트와 함께 추가 된 새 스크립트입니까?

내 사이트가 AJAX 사이트이기 때문에 다른 페이지의 여러 스크립트가 시간이 지남에 따라로드 될 수 있습니다. 로드 할 수있는 스크립트의 수에 대한 브라우저 제한이 있습니까?

+0

조심하지 않으면 사전 최적화가 낭비 될 수 있습니다. 이 전반적인 것을 보는 방법에 대한 몇 가지 제안에 대해 야후의 [웹 사이트 속도 향상 모범 사례] (http://developer.yahoo.com/performance/rules.html)를 읽으십시오. 그러나 항상 모든 사이트가 다른 점을 기억하십시오 따라서 일부 기술은 항상 유용하거나 유용 할 수있는 것은 아니며 역효과를 낳을 수도 있습니다. –

+0

그리고 캐시 된 경우 캐시 된 복사본이 만료되지 않는 한 브라우저에서 다른 복사본을 요청하지 않거나 그렇지 않으면 강제로 전체 요청을 수행합니다. 또한, Javascript 파일 자체에 대한 제한이 없습니다 (알고있는 한). 그러나 수백 또는 수천 개의'script'를 추가하면 다른 문제가 발생할 수 있습니다. 동일한 스크립트를로드하기 위해 몇 가지 불필요한 호출을 할 수 있다는 것이 염려되는 경우 다른 방법 (예 : 요청하기 전에 파일이 이미 포함되어 있는지 확인)으로 해결해야합니다. –

+0

내 콘솔로 가면 같은 파일이 나열되지만 캐시 된 것입니다. 또한 실제로 호출 할 필요가있는 document.ready 비트가 있기 때문에 매번 불을 정렬해야합니다. –

답변

1

Ilya는 고려해야 할 몇 가지 중요한 점을 제공했다고 생각합니다. 귀하의 특정 질문에 대한 대답이라고 생각합니다. 당신이 달성 하려는지 경우, 그러나, $(document).ready() 핸들러를 다시 실행, 당신은 할 수 :

(function(){ 
    var myreadyfunction = function(){ 
     $('#affected').toggleClass('blue'); 
    }; 

    $(document).ready(myreadyfunction); 

    $(document).ready(function(){ 
     $('button').click(myreadyfunction); 
    }); 
})(); 

http://jsfiddle.net/Z97cm/

내가 전역에서 유지하기 위해 익명 (function(){})();로 봐줘서했습니다, 그 범위 밖에서 그 기능에 액세스해야 할 필요가 있다고 생각할 수도 있습니다. 그러나 그것은 제가 여러분이 말하는 것에 대한 일반적인 생각을 제공합니다.

+0

Thx 그 새로운 트릭을 위해 나는 그것을 줄 것이다. Thy는 Ilya에게 조언을 구합니다. –

2

사이트 성능에 영향을줍니다. 스크립트가 유효 기간이 설정된 클라이언트에 캐시 된 경우에도 브라우저는 새로 포함 된 스크립트를 구문 분석하고 실행해야합니다. 그보다는 스크립트가 이전 버전에서 이미 설정 한 변수를 무시하기 때문에 자바 스크립트 오류가 발생할 가능성이 매우 높습니다. 자바 스크립트 구문 분석 및 실행은 모든 브라우저에서 여전히 차단 작업이므로 파일 처리 중에는 UI가 잠길 것입니다.

질문의 두 번째 부분에 대답하려면, 내가 아는 한 주어진 페이지에 자바 스크립트 파일 수의 제한이 없습니다. 예외를 throw하지 않은 200 개 이상의 자바 스크립트가있는 페이지를 보았습니다.

+0

내 코드는 함수 또는 전역 변수를 사용하지 않으므로 포함 부분에 문제가 없습니다. 나는 그런 종류의 일을하기 위해 인라인 코딩을 사용한다. –

+0

그러면 JS 오류가 발생하지 않을 것입니다. 구문 분석은 여전히 ​​실행 스레드를 차단합니다.스크립트가 이미 포함되어 있는지 먼저 확인한 다음 페이지에없는 경우에만 스크립트를 추가하는 것이 좋습니다. –

+0

+1 매우 중요한 포인트가 있습니다. 호출 할 수있는 가변 함수를 사용하여이 특정 작업 (스크립트 재실행)을 수행하는 또 다른 방법이 있습니다. –