[javascript] jQuery 라이브러리는 어디에 포함합니까? 구글 JSAPI? CDN?

JAVASCRIPT / 글쓴이

jQuery와 jQuery UI를 포함시키는 몇 가지 방법이 있으며 사람들이 무엇을 사용하는지 궁금합니다.

  • 구글 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 간 전환에 대해 걱정할 필요가 없습니다.

답변

의심의 여지없이 JQuery가 Google API 서버에서 제공하도록 선택했습니다. 다른 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>

업데이트 9/8/ 2010-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 라이브러리가로드되도록하려면 URL을 변경하여 jQuery 주요 번호를 반영 할 수도 있습니다.

<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에서 포함시킬 수 있는지 확인한 다음 전역 변수가 있는지 확인하고 서버에서 부재가로드되는지 확인하십시오.

답변

여기 몇 가지 문제가 있습니다. 먼저 지정한 비동기로드 방법 :

<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>

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

예를 들어 다음을 실행하십시오.

<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의 문제입니다. <script src="...">태그가 있는 jquery 플러그인을 포함 시키려고 google.load()하면 플러그인이 아직로드되지 않았기 때문에 “jQuery가 정의되지 않았습니다”라는 메시지와 함께 플러그인이 실패 할 수 있습니다. 나는 이것에 대한 방법을 실제로 보지 못한다.

세 번째 문제점 (두 방법 중 하나)은 외부로드가 하나라는 것입니다. 일부 플러그인과 자체 Javascript 코드가 있다고 가정하면 Javascript를로드하기위한 최소 두 개의 외부 요청이 있습니다. jquery, 모든 관련 플러그인 및 자체 코드를 가져 와서 축소 된 파일에 넣는 것이 좋습니다.

에서 호스팅해야 당신이 사용 구글의 아약스 라이브러리의 API? :

로드 시간과 관련하여 jsapi 스크립트와 mootools 스크립트 (위에서 압축 된 버전)의 두 가지 스크립트를 실제로로드하고 있습니다. 그것은 하나가 아니라 두 개의 연결입니다. 내 경험상,로드 시간이 Google에서 온 경우에도 개인 공유 서버에서로드하는 것보다 실제로 2-3 배 느리다는 것을 알았습니다. 압축 파일의 버전은 Google보다 몇 K 더 큽니다. 이것은 파일이로드되고 (아마도) 캐시 된 후에도 가능합니다. 따라서 대역폭은별로 중요하지 않기 때문에 중요하지 않습니다.

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

결국 여기에 예제를 게시하는 것을 제외하고는 적어도 jQuery 용 Google AJAX API를 사용하는 것이 실제로는 아닙니다 (더 많은 “완전한”API는 다른 이야기입니다).