javascript jquery教學 - 你從哪裡包含jQuery庫? Google JSAPI? CDN?




jquery引用 version (14)

毫無疑問,我選擇使用Google API服務器提供的JQuery。 我沒有使用jsapi方法,因為我沒有使用任何其他的Google API,但是如果發生了變化,那麼我會考慮它......

首先: 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>

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

最後,如果你不想使用谷歌並且更喜歡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 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上託管的圖書館投票-1。 他們正在收集數據,谷歌分析風格,以及圍繞這些庫的包裝。 至少,我不希望客戶端瀏覽器做的比我要求的更多,更不用說網頁上的其他任何東西。 更糟的是,這是谷歌的“不是邪惡的新版本” - 使用不引人注意的JavaScript來收集更多的使用數據。

注意:如果他們改變了這種做法,超級。 但是最後一次我考慮使用託管庫時,我監視了我站點上的出站http流量,並且定期撥打到Google服務器並不是我期望看到的。


頭:

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

除了建議將其託管在自己的服務器上的人之外,我還建議將其保留在單獨的域(例如static.website.com)上,以允許瀏覽器將其與其他內容線程分開。 這個技巧也適用於所有靜態的東西,比如說圖片和CSS。


jQuery 1.3.1分鐘只有18K大小。 我不認為在初始頁面加載時會有太大的衝擊。 之後它會被緩存。 因此,我自己主持。


這裡有幾個問題。 首先,您指定的異步加載方法:

<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()方法和帶有靜態jquery.min.js加載的$(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="...">標記和google.load()插入jquery插件,則插件可能會因“尚未定義jQuery”消息而失敗,因為它尚未加載。 我真的沒有看到解決這個問題的辦法。

第三個問題(使用任一方法)是它們是一個外部負載。 假設你有一些插件和你自己的Javascript代碼,你至少需要兩個外部請求來加載你的Javascript。 你可能最好把jquery,所有相關的插件和你自己的代碼放到一個縮小的文件中。

應該使用Google的Ajax Libraries API進行託管?

至於加載時間,實際上是加載了兩個腳本 - jsapi腳本和mootools腳本(上面的壓縮版本)。 這是兩個關係,而不是一個。 根據我的經驗,我發現加載時間實際上比我自己的個人共享服務器的加載速度慢2-3倍,即使它來自Google,而我的壓縮文件版本比谷歌版本大兩K。 這,即使在文件已經加載並且(可能)被緩存之後。 所以對我來說,由於帶寬並不重要,所以不會有問題。

最後,你有一個偏執狂瀏覽器標記請求的潛在問題,因為某種XSS嘗試。 這通常不是默認設置的問題,而是在企業網絡中,用戶可能無法控制他們使用的瀏覽器,更不用說您可能遇到問題的安全設置。

因此,最終我真的無法真正看到我至少使用Google AJAX API for jQuery(除了在此處發布示例外,更多“完整的”API在某些方面是不同的故事)。


我將添加這個作為本地託管這些文件的原因。

最近TWC上南加州的一個節點只能解析ajax.googleapis.com域(僅適用於使用IPv4的用戶),因此我們沒有獲取外部文件。 直到昨天為止,這一直是間歇性的(現在持續存在)。由於它是間歇性的,我在解決SaaS用戶問題時遇到了大量問題。 花了無數個小時試圖追踪為什麼一些用戶對軟件沒有任何問題,而其他用戶則是在喋喋不休。 在我平時的調試過程中,我不習慣詢問用戶是否關閉了IPv6。

我偶然發現了這個問題,因為我自己正在使用這個特定的“路由”來使用這個文件,而且我只使用IPV4。 我發現這個問題與開發人員的工具告訴我jquery沒有加載,然後開始做traceroutes等...來找到真正的問題。

在此之後,我很可能永遠不會回到外部託管的文件,因為:谷歌不必為此而成為問題,並且......任何一個這樣的節點都可能因DNS劫持而洩露並傳遞惡意的js而不是實際的文件。 一直以為我是安全的,因為谷歌域永遠不會倒下,現在我知道用戶和主機之間的任何節點都可能是一個失敗點。


我可能對此有點老派,但我仍然對盜鏈感到不滿。 也許Google是個例外,但總的來說,將文件託管在您自己的服務器上確實是一種很好的舉止。


我不希望我開發的任何公共站點依賴於任何外部站點,因此,我會自己託管jQuery。

當其他網站(Google,jquery.com等)宕機時,您是否願意在您的網站上發生停機? 關鍵依賴較少。


我把它與我的其他js文件放在我自己的服務器上,這就是這一點,將它們結合起來並縮小它們(用django-compresser,在這裡,但這不是重點)只能作為一個js文件服務,需要投入它。 您無論如何都需要為自己的js文件提供服務,所以我沒有理由不在其中添加額外的jquery字節 - 更多的kbs傳輸便宜得多,而不是更多的請求。 你不依賴任何人,只要你的js被緩存了,你的速度也會非常快。

在第一次加載時,基於CDN的解決方案可能會贏,因為您必須從您自己的服務器中加載額外的jquery千字節(但沒有額外的請求)。 不過,我懷疑這種差異是不明顯的。 然後,在第一次加載清除緩存的情況下,由於需要更多的請求(和DNS查找),您自己的託管解決方案可能會更快,以便獲取CDN jQuery。

我想知道這個問題幾乎從未被提及過,以及CDN如何接管世界:)


您可能希望在外部服務器上託管的一個原因是要解決瀏覽器對特定服務器的連接的限制。

但是,由於您使用的jQuery文件可能不會經常更改,因此瀏覽器緩存將會啟動並使這一點在大多數情況下毫無意義。

在外部服務器上託管它的第二個原因是降低到您自己的服務器的流量。

但是,考慮到jQuery的規模,它很可能只是您流量的一小部分。 您應該嘗試優化您的實際內容。


優點:Google上的主機有好處

  • 可能更快(他們的服務器更加優化)
  • 他們正確地處理緩存 - 1年(我們很難被允許進行更改以在我們的服務器上獲得標題)
  • 在另一個域上已經有谷歌託管版本鏈接的用戶已經在緩存中擁有該文件

缺點:

  • 某些瀏覽器可能將其視為XSS跨域並禁止該文件。
  • 特別是運行Firefox的NoScript插件的用戶

我想知道你是否可以從Google包含INCLUDE,然後檢查是否存在某個全局變量,或者某些情況,以及是否存在來自服務器的負載?


如果您想使用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>
<script>

我會這樣想的。 為什麼不? CDN不提供CSS來支持腳本文件

這個鏈接表明它們是:

我們感到特別興奮的是,jQuery UI CSS主題現在託管在Google的Ajax Libraries CDN上。





javascript jquery ssl google-ajax-libraries