어디에 당신을 포함 jQuery 라이브러리에서?Google JSAPI?CDN?

https://stackoverflow.com/questions/547384

23-08-2019
|

문제

수있는 몇 가지 방법을 포함 jQuery 및 jQuery UI 과 내가 무슨 사람들은 사용하지 마십시오.

Google JSAPI
jQuery 사이트
귀하의 사이트/서버
다른 CDN

나는 최근에 사용하는 Google JSAPI,하지만 그것이 오래 걸리는 시간을 설정하는 SSL 연결 또는 해결 google.com.나는 다음을 사용하여 Google:

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>

내가 좋아하는 아이디어를 사용하여 Google 도 캐시를 방문할 때 다른 사이트 및 대역폭을 절감하는 우리의 서버에서이지만,그것을 유지하는 경우는 느린 사이트의 일부 변경 될 수 있습니다 포함합니다.

당신은 무엇을 사용합니까?당신이 어떤 문제가 있었?

편집: 그냥 많이 방문한 jQuery 의 사이트 및 그들은 다음과 같은 방법을 사용:

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

Edit2: 여기에는 방법이었을 포함 jQuery 없이 모든 문제에 대해 마지막 년도:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

차이는 제거 http:.을 제거하여 이를 걱정할 필요가 없습에 대한 전환 사 http 와 https.

해결책

의심의 여지없이 나는 Google API 서버에서 jQuery를 제공하기로 선택했습니다. 다른 Google API를 활용하지 않기 때문에 JSAPI 방법을 사용하지 않았지만 변경되면 변경되면 고려할 것입니다 ...

첫 번째: Google API 서버는 내 단일 서버 위치 대신 전 세계에 배포됩니다. 더 가까운 서버는 일반적으로 방문자의 응답 시간이 빠릅니다.

초: 많은 사람들이 Google에서 jQuery를 호스팅하기로 선택하므로 방문자가 내 사이트에 오면 이미 로컬 캐시에 jQuery 스크립트가있을 수 있습니다. 사전 준비된 컨텐츠는 일반적으로 방문자의로드 시간이 빠른 것을 의미합니다.

제삼: 내 웹 호스팅 회사는 사용 된 대역폭을 청구합니다. 방문자가 다른 곳에서 동일한 파일을 얻을 수있는 경우 사용자 세션 당 18k를 소비하는 의미는 없습니다.

나는 올바른 스크립트 파일을 제공하고 온라인으로 제공되도록 Google에 신뢰의 일부를 배치한다는 것을 이해합니다. 이 시점까지 나는 Google을 사용하는 것에 실망하지 않았으며 말이되지 않을 때 까지이 구성을 계속할 것입니다.

지적 할 가치가있는 한 가지 ... 사이트에 안전하고 안전하지 않은 페이지가 혼합되어 있으면 Google 소스를 동적으로 변경하여 안전한 페이지에 불안한 콘텐츠를로드 할 때 볼 수있는 일반적인 경고를 피할 수 있습니다.

다음은 다음과 같습니다.

<script type="text/javascript">
    document.write([
        "\<script src='",
        ("https:" == document.location.protocol) ? "https://" : "http://",
        "ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>" 
    ].join(''));
</script>

2010 년 9 월 8 일 업데이트 - HTTP 및 HTTPS를 제거하여 코드의 복잡성을 줄이고 다음 구문을 사용하여 코드의 복잡성을 줄이기위한 몇 가지 제안이있었습니다.

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

또한 jQuery 라이브러리의 최신 주요 버전이로드되었는지 확인하려면 jQuery 메이저 번호를 반영하도록 URL을 변경할 수도 있습니다.

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

마지막으로 Google을 사용하지 않고 jQuery를 선호하는 경우 다음 소스 경로를 사용할 수 있습니다 (jQuery가 SSL 연결을 지원하지 않음을 명심하십시오).

<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>

다른 팁

외부 서버에서 호스팅하려는 한 가지 이유는 특정 서버에 동시에 연결되는 브라우저 제한을 해결하기 때문입니다.

그러나 사용중인 jQuery 파일이 자주 변경되지 않을 가능성이 높으면 브라우저 캐시가 시작되어 그 지점을 대부분 뿌릴 것입니다.

외부 서버에서 호스팅하는 두 번째 이유는 트래픽을 자신의 서버로 낮추기 때문입니다.

그러나 jQuery의 크기가 주어지면 트래픽의 작은 부분이 될 가능성이 있습니다. 실제 콘텐츠를 최적화하려고 시도해야합니다.

jQuery 1.3.1 분의 크기는 18k입니다. 나는 그것이 초기 페이지로드에 대해 묻기에 너무 많은 히트라고 생각하지 않습니다. 그 후 캐시됩니다. 결과적으로, 나는 그것을 직접 주최합니다.

Google을 사용하려면 직접 링크가 더 응답 할 수 있습니다. 각 라이브러리에는 직접 파일에 대한 경로가 있습니다. 이것은 jQuery 경로입니다

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

그냥 질문을 다시 읽으십시오. HTTPS를 사용하는 이유가 있습니까? 이것은 예제에서 Google 목록에 스크립트 태그입니다.

<script src="http://www.google.com/jsapi"></script>

나는 외부 사이트에 의존하기 위해 개발 한 공개 사이트를 원하지 않기 때문에 jQuery를 직접 호스팅 할 것입니다.

다른 사람 (Google, jquery.com 등)이 다운 될 때 사이트에 중단을 기꺼이 하시겠습니까? 적은 종속성이 핵심입니다.

장점 : Google의 호스트는 이점이 있습니다

아마도 더 빠릅니다 (서버는 더 최적화되어 있음)
그들은 캐싱을 올바르게 처리합니다 - 1 년 (우리는 서버에서 헤더를 바로 잡기 위해 변경하기 위해 고군분투합니다).
이미 다른 도메인의 Google 호스팅 버전에 대한 링크가있는 사용자는 이미 캐시에 파일이 있습니다.

단점 :

일부 브라우저는 XSS를 크로스 도메인으로보고 파일을 허용하지 않을 수 있습니다.
특히 Firefox 용 Noscript 플러그인을 실행하는 사용자

Google에서 포함시킬 수 있는지 궁금한 다음 글로벌 변수 또는 SomeSuch의 존재를 확인하고 서버에서 부재가로드되는지 확인하십시오.

여기에는 몇 가지 문제가 있습니다. 먼저 지정한 비동기 부하 방법 :

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('jquery', '1.3.1');
  google.setOnLoadCallback(function() {
    // do stuff
  });
</script>

몇 가지 문제가 있습니다. 스크립트 태그는 검색되는 동안 페이지로드를 일시 중지합니다 (필요한 경우). 이제로드가 느리면 이것은 나쁘지만 jQuery는 작습니다. 위의 방법의 실제 문제는 jQuery.js로드가 많은 페이지에서 독립적으로 발생하기 때문에 jQuery가로드되기 전에로드 및 렌더링을 완료하여 jQuery 스타일링이 사용자의 눈에 보이는 변경.

다른 방법은 다음과 같습니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

SetonLoadCallback () 메소드 vs $ (document) .ready ()가 정적 jquery.min.js로드를 사용하여 SetonLoadCallback () 메소드를 사용하여 간단한 테이블을 가지고 셀 배경을 노란색으로 변경하는 것과 같은 간단한 예제를 시도하십시오. 두 번째 방법은 눈에 띄는 깜박임이 없습니다. 첫 번째 의지. 개인적으로 나는 그것이 좋은 사용자 경험이 아니라고 생각합니다.

예를 들어 : 이것을 실행합니다.

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    .odd { background-color: yellow; }
  </style>
</head>
<body>
<table>
  <tr><th>One</th><th>Two</th></tr>
  <tr><td>Three</td><td>Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
  <tr><td>Seven</td><td>Nine</td></tr>
  <tr><td>Nine</td><td>Ten</td></tr>
</table> 
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
    $(function() {
      $("tr:odd").addClass("odd");
    });
  });
</script>
</body>
</html>

테이블이 나타나면 행이 노란색으로 나타납니다.

Google.load () 메소드의 두 번째 문제는 제한된 범위의 파일 만 호스팅한다는 것입니다. 이것은 jQuery가 매우 플러그인 의존적이기 때문에 문제입니다. jQuery 플러그인을 <script src="..."> 태그와 google.load() 플러그인은 아직로드되지 않았기 때문에 "jQuery가 정의되지 않은"메시지로 실패 할 것입니다. 나는 이것에 대한 방법을 실제로 보지 못한다.

세 번째 문제는 (두 가지 방법 모두) 하나의 외부 하중이라는 것입니다. 플러그인과 자신의 JavaScript 코드가 있다고 가정하면 JavaScript를로드하기위한 최소 2 개의 외부 요청이 최선을 다하고 있습니다. jQuery, 모든 관련 플러그인 및 자신의 코드를 얻는 것이 더 나을 것입니다.

에서 호스팅에 Google의 Ajax 라이브러리 API를 사용해야합니까?:

로드 시간과 관련하여 실제로 JSAPI 스크립트와 Mootools 스크립트 (위의 압축 버전)라는 두 개의 스크립트를 실제로로드하고 있습니다. 그래서 그것은 하나가 아닌 두 개의 연결입니다. 내 경험에 따르면, Google에서 나왔음에도 불구하고 내 개인 공유 서버에서로드하는 것보다로드 시간이 실제로 2-3 배 느 렸으며 압축 파일의 버전은 Google보다 K가 더 크다는 것을 알았습니다. 이것은 파일이로드 된 후에도 (아마도) 캐시 된 후에도. 그래서 저에게는 대역폭이 중요하지 않기 때문에 중요하지 않습니다.

마지막으로 편집증 브라우저가 일종의 XSS가 시도한대로 요청을 표시하는 잠재적 인 문제가 있습니다. 일반적으로 기본 설정의 문제가 아니라 사용자가 문제가있는 보안 설정은 물론 사용하는 브라우저를 제어 할 수없는 회사 네트워크에서 문제가됩니다.

결국 나는 여기에 예제를 게시하는 것을 제외하고는 적어도 jQuery에 Google Ajax API를 jQuery에 사용하는 것을 실제로 볼 수 없습니다.

자체 서버에서 호스팅하는 것을 조언하는 사람들 외에도 브라우저가 다른 콘텐츠 스레드와 별도로로드 할 수 있도록 별도의 도메인 (예 : static.website.com)에 보관할 것을 제안했습니다. 이 팁은 또한 모든 정적 물건, 이미지 및 CSS에도 적용됩니다.

Google에서 호스팅 된 라이브러리에 대해 -1에 투표해야합니다. 그들은 이러한 라이브러리 주변의 래퍼와 함께 데이터, Google 웹 로그 분석 스타일을 수집하고 있습니다. 최소한, 나는 클라이언트 브라우저가 내가 요구하는 것보다 더 많은 일을하는 것을 원하지 않습니다. 더 나쁜 것은, 이것은 눈에 띄지 않는 JavaScript를 사용하여 더 많은 사용량 데이터를 수집하는 Google의 "새 버전"입니다.

참고 : 그들이이 연습을 바꾸었다면, 슈퍼. 그러나 마지막으로 호스팅 된 라이브러리 사용을 고려했을 때 사이트에서 아웃 바운드 HTTP 트래픽을 모니터링했으며 Google 서버에 대한 정기적 인 전화는 내가 기대할 수있는 것이 아닙니다.

나는 이것에 대해 구식일지도 모르지만 여전히 핫 링크에 눈살을 찌푸 렸습니다. 어쩌면 Google은 예외이지만 일반적으로 자신의 서버에서 파일을 호스팅하는 것은 정말 좋은 매너 일뿐입니다.

이 파일을 로컬로 호스팅하는 이유로 이것을 추가하겠습니다.

최근 TWC 남부 캘리포니아의 노드는 ajax.googleapis.com 도메인 (IPv4를 가진 사용자) 만 해결할 수 없었으므로 외부 파일을 얻지 못합니다. 이것은 어제까지 간헐적으로 시작되었습니다 (지금은 지속됩니다.) 간헐적이기 때문에 SAAS 사용자 문제를 해결하는 데 많은 문제가 발생했습니다. 왜 일부 사용자가 소프트웨어에 아무런 문제가 없는지 추적하는 데 많은 시간을 보냈고 다른 사용자는 탱킹을하고있었습니다. 평소 디버깅 과정에서 나는 사용자에게 IPv6을 끄 었는지 묻는 습관이 없습니다.

나는 나 자신 이이 특정 "경로"를 파일에 사용하고 있고 IPv4 만 사용하고 있기 때문에이 문제를 우연히 발견했습니다. 개발자 도구에서 jQuery가로드되지 않았다고 말한 다음 Traceroutes 등을 시작하기 시작했습니다. 실제 문제를 찾기 시작했습니다.

그 후에는 외부 호스팅 파일로 돌아 가지 않을 것입니다. Google은 문제가되기 위해 이것을 내려갈 필요가 없습니다. 실제 파일 대신. 항상 Google 도메인이 절대 다운되지 않을 것이라는 점에서 안전하다고 생각했습니다. 이제 사용자와 호스트 사이의 노드가 실패 지점이 될 수 있다는 것을 알고 있습니다.

jQuery 사이트의 최신 버전 만 포함합니다. http://code.jquery.com/jquery-latest.pack.js 그것은 내 요구에 맞고 업데이트에 대해 걱정할 필요가 없습니다.

편집 : 주요 웹 앱의 경우 확실히 제어하십시오. 그것을 다운로드하고 직접 제공하십시오. 그러나 개인 사이트의 경우 덜 신경 쓰지 못했습니다. 사물은 마술처럼 사라지지 않으며 일반적으로 먼저 더 이상 사용되지 않습니다. 나는 향후 릴리스를 위해 무엇을 바꿀지 알기에 충분히 그것을 따라 잡습니다.

여기에서 유용한 자료 인 Hope는 CDN을 선택하는 데 도움이 될 수 있습니다. MS는 최근에 CDN을 가로 지르는 전달 라이브러리를위한 새로운 도메인을 추가했습니다.

오래된 형식 : http://ajax.microsoft.com/jquery/jquery-1.5.1.js새로운 형식 : http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js

Microsoft.com의 모든 쿠키를 보내지 않아야합니다.http://www.asp.net/ajaxlibrary/cdn.ashx#using_jquery_from_the_cdn_11

여기에서 모든 기술에서 웹에서 사용되는 가장 인기있는 기술에 대한 일부 통계.http://trends.builtwith.com/

희망은 당신이 선택하는 데 도움이 될 수 있습니다.

내가 '라이브'사이트에 대한 책임이 있다면 진행중인 모든 일을 알고 더 좋습니다. ~ 안으로 내 사이트. 이러한 이유로 나는 동일한 서버 또는 정적/외부 서버에서 jQuery-Min 버전을 직접 호스팅하지만 모든 변경 사항을 확인/테스트 한 후 I (또는 내 프로그램/프록시)만이 라이브러리를 업데이트 할 수있는 위치를 사용합니다.

머리 속 :

  (function() {
    var jsapi = document.createElement('script'); jsapi.type = 'text/javascript'; jsapi.async = true;
    jsapi.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.google.com/jsapi?key=YOUR KEY';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('head')[0]).appendChild(jsapi);
  })();

몸의 끝 :

<script type="text/javascript">
google.load("jquery", "version");
</script>

나는 그것을 호스트와 다른 js 파일에서 내 자신의 서버는 시점을 결합 및 축들(씩-compresser,여기에,하지만점)으로 제공 될 수 있도록 한 js 파일과 함께,모든 사이트가 필요합니다.당신은 서비스를 제공해야 자신의 js 파일 어쨌든,그래서 나는 볼 수 없는 이유를 추가하지 추가 jquery 바이트가 너무 더 kbs 은 훨씬 더 많은 저렴 전송하는,더 이상 요청을 만들 수 있습니다.당신이 의존하지 않는 사람,그리고 즉시로 귀하의 축소 된 js 가 캐시에,당신은 빠른 슈퍼니다.

에서 첫 번째로드,CDN 기반의 솔루션을 이길 수 있습해야 하기 때문에 부하를 추가 jquery kb 에서 자신의 서버(그러나지 않고,추가적인 요청).의심의 차이가 눈에 띄는,하지만.그리고,에 첫 번째 부하와 함께 캐시를 삭제,귀하의 호스팅 솔루션은 아마도 항상있을 것입니다 훨씬 빠르기 때문에 더욱 요청(및 DNS 조회)필요하고,가 CDN jquery.

나는 어떻게 이점은 거의 언급하지 않았고,어떻게 효율 것을 통해 전 세계)

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow