외부 자바 스크립트 참조 및 자체 사본 호스팅

jQuery를 사용하는 웹 앱이 있다고 가정 해보십시오. 필요한 자바 스크립트 파일을 내 서버에서 웹 사이트 파일과 함께 호스팅하거나 jQuery의 CDN에서 참조하는 것이 좋습니다 (예 : http://code.jquery.com/jquery-1.7.1.min.js ). ?

나는 양쪽에 대한 전문가를 볼 수 있습니다 :

• 내 서버에 있다면 외부 의존성이 줄어 듭니다. jQuery가 다운되거나 호스팅 구조 또는 이와 유사한 것을 변경하면 내 앱이 중단됩니다. 그러나 나는 그것이 자주 일어나지 않을 것 같은 느낌이 든다. 이 작업을 수행하는 소규모 사이트가 많이 있어야하며 jQuery 팀은 사이트를 중단하지 않기를 원할 것입니다.
• 그것이 내 서버에 있다면 누군가가 보안 문제를 부를 수있는 외부 참조가 적습니다.
• 그것이 외부 적으로 참조된다면, 파일을 제공하기 위해 대역폭에 대해 걱정할 필요가 없습니다 (그 정도는 아니지만).
• 외부에서 참조되고 모든 파일의 자체 사본이 필요한 많은 서버 에이 웹 사이트를 배포하는 경우 복사 / 업데이트 해야하는 파일이 하나 적습니다.

두 가지를 모두 수행해야합니다.

Google 과 같은 CDN에서 호스팅을 시작하십시오. CDN 은 자체 사이트보다 가동 시간이 더 길고 응답 시간이 가장 빠르기 때문입니다. 또한 CDN에 링크 된 페이지를 방문한 사용자는 캐시 된 파일 사본을 사용하므로 사본을 다시 다운로드 할 필요가 없으므로 초기 로딩 속도가 훨씬 빨라집니다.

그런 다음 CDN이 다운 될 경우를 대비하여 자신의 서버에 대한 대체 참조를 추가하십시오 (아마도 안전하지만 안전합니다). 대체는 이해하기 쉽지만 사용되는 스크립트에 맞게 사용자 정의해야합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery) document.write('<script src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>

HTML 요소를 닫고 스크립트가 실패 </script>하므로 <script>요소 내부에 아무 것도 쓰지 마십시오 . 간단한 수정은 백 슬래시를 이스케이프로 사용하는 것 <\/script>입니다.

_{두 가지를 모두 수행해야하는 또 하나의 이유 :}

당신은 인기있는 CDN을 선택하면 그러나 멀리에, 그것은 과거의 어떤 다운 시간을해야 가능성이 매우 확률이 낮다 먼 미래 (~로부터 18 개월 지금 주어진 무어의 법칙 ) 호스팅 형식 변경, 또는 주소가 조정하거나 할 때 네트워크가 월페이퍼 또는 기타 다른 곳에 배치되면 링크가 더 이상 작동하지 않을 수 있습니다. 폴백을 사용하는 경우, 생성 한 모든 웹 사이트를 다시 방문하여 CDN 링크를 변경하기 전에 호스팅을위한 새로운 형식으로 조정할 시간이 조금 있습니다.

_{두 가지를 모두하는 또 다른 이유 :}

최근에 인터넷이 끊겼습니다. 스크립트 리소스의 로컬 복사본을 연결 한 프로젝트에서 로컬로 계속 작업 할 수 있었고 로컬 복사본을 연결해야하는 많은 프로젝트가 있음을 금방 알 수있었습니다.

나는 똑같은 질문 을 했고이 기사를 읽었으며 Google이 jQuery 라이브러리를 호스팅 할 수 있다는 아이디어를 얻었습니다.

이 기사에서는 Google의 CDN (Content Delivery Network)에서 라이브러리를 호스팅 할 수있는 주요 이점을 설명합니다.

• 지연 시간 감소 -물리적으로 서버 근처에 있지 않은 사용자는 사용자가 임의로 위치한 서버에서 강제로 다운로드하는 것보다 Google에서 더 빠르게 jQuery를 다운로드 할 수 있습니다.
• 병렬 처리 증가 -브라우저는 동시에 만들 수있는 연결 수를 제한합니다. 어떤 브라우저에 따라이 제한은 호스트 이름 당 두 개의 연결만큼 낮을 수 있습니다. Google AJAX 라이브러리 CDN을 사용하면 사이트에 대한 하나의 요청이 없어져 더 많은 로컬 컨텐츠를 병렬로 다운로드 할 수 있습니다.
• 더 나은 캐싱 -Google AJAX 라이브러리를 사용하면 사용자가 jQuery를 전혀 다운로드하지 않아도됩니다. 반면에 jQuery를 로컬로 호스팅하는 경우 사용자는 한 번 이상 다운로드해야합니다. 각 사용자는 이미 브라우저 캐시에 수십 개의 동일한 jQuery 사본을 가지고 있지만 jQuery 사본은 사이트를 방문 할 때 무시됩니다.

자신의 라이브러리를 호스팅하기위한 전문가로 나열한 두 가지 글 머리 기호에 대해서는 클라우드 버전을 호스팅하는 Google이라는 점을 기억하고 Google은 가용성과 보안이 유지되는 한 자신의 작업을 알고 있으며 신뢰할 수 있습니다. 그러나 @zzzzBov는이 질문에 대한 답을 매우 잘 설명합니다. 라이브러리의 로컬 사본을 저장하고 어떤 이유로 든 CDN 버전에 액세스 할 수없는 경우에는 기본값으로 설정하는 것이 좋습니다.

개인적으로 http://html5boilerplate.com/ 에서 힌트를 얻습니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="includes/js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

그러면 Google에서 기본 jQuery 파일을 가져 오지만 어떤 이유로로드되지 않으면 다음 줄이 사용자의 서버에서 파일을로드합니다.

CDN을 사용하는 것이 좋습니다. CDN이 Google 인 경우 @CFL_Jeff와 @Morons가 언급했듯이 더 좋습니다.

나는이 답변을 추가하여 다른 곳을 가리킬 때 종종 간과되는 것을 지적 합니다. 혼합 된 내용 경고를 피합니다 . 프로토콜없는 URL 사용을 고려하십시오. 예 :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript">
</script>

프로토콜이없는 URL을 사용하는 데 여전히 일부 지원 문제가 있으므로 http : // 링크를 모두 // 로만 변경할 수 있습니까?에 대한 답변을 참고 하십시오. SO에 있지만, 적어도 잠재적 혼합 내용 경고를 처리하려고 할 몇 가지 방법입니다.

Google의 API 라이브러리 를 참조해야합니다 .

주요한 이유는 페이지로드 속도를 높이기 위해서 입니다. 사용자가 동일한 라이브러리를 참조하는 다른 사이트를 이미 방문한 경우 해당 사이트는 이미 브라우저 캐시에 저장 되므로 전혀 다운로드 할 필요가 없습니다 .

나는 틀릴 수 있지만 document.write를 구현하면 DOM의 모든 것을 덮어 씁니다. 본문 끝에 자바 스크립트 파일을 배치하는 것이 좋습니다.

이전 답변을 기반으로 다음 방법을 제안합니다.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

if(!window.jQuery)
{
    //Creates the script element
    var script = document.createElement('script'); 
    //Adds the type attribute with "text/javascript" value
        script.setAttribute('type', 'text/javascript'); 
    //Adds the source attribute and populates it
        script.setAttribute('src', 'Put_The_Relative_Path_To_Your_JavaScript_File_Here'); 
    //Adds it to the end of the body, as it is good practice, to prevent render-blocking.  
    document.body.appendChild(script);

}

//Note that there's no need for you to verify with an onload function, since all scripts
//must be loaded before going to the next one! 

</script>

지리적 위치와 엄격한 화이트 리스팅이 반드시 필요한 안전한 자세와 관련된 어떤 것도 위에 언급되어 있지 않기 때문에 로컬 사본을 호스팅하는 것이 가장 좋습니다. 해당 파일을 로컬로 호스팅하지 않으면 보안 상태가 클라이언트로 떨어지게됩니다.