你在哪里包含jQuery庫？谷歌JSAPI？ CDN？
[英]Where do you include the jQuery library from? Google JSAPI? CDN?
問題描述
有幾種方法可以包含jQuery和jQuery UI，我想知道人們在使用什么？
- 谷歌JSAPI
- jQuery的網站
- 你自己的網站/服務器
- 另一個CDN
我最近一直在使用Google JSAPI，但發現設置SSL連接需要很長時間，甚至只能解決google.com問題。 我一直在谷歌使用以下內容：
<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>
編輯2：這是我去年包括jQuery沒有任何問題的方式：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
不同的是刪除http: . 通過刪除它，您不必擔心在http和https之間切換。
16 個解決方案
解決方案1
153 已采納 2009-02-13 20:12:30
毫無疑問，我選擇讓Google API服務器提供JQuery服務。 我沒有使用jsapi方法，因為我沒有利用任何其他Google API，但如果改變了那么我會考慮它...
第一： Google api服務器分布在世界各地而不是我的單一服務器位置：更緊密的服務器通常意味着訪問者的響應時間更快。
第二：許多人選擇在Google上托管JQuery，因此當訪問者訪問我的網站時，他們可能已在其本地緩存中安裝了JQuery腳本。 預緩存內容通常意味着訪問者的加載時間更短。
第三：我的網絡托管公司向我收取使用的帶寬費用。 如果訪問者可以在其他地方獲得相同的文件，則每個用戶會話消耗18k是沒有意義
我了解到，我將一部分信任放在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庫，您還可以更改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>
解決方案2
19 2009-02-13 19:58:21
您可能希望在外部服務器上托管的一個原因是解決與特定服務器的concurent連接的瀏覽器限制。
但是，鑒於您使用的jQuery文件可能不會經常更改，瀏覽器緩存將啟動並使大多數情況下都沒有用。
在外部服務器上托管它的第二個原因是降低到自己服務器的流量。
但是，考慮到jQuery的大小，它可能只是您流量的一小部分。 您應該嘗試優化實際內容。
解決方案3
14 2009-02-13 19:47:42
jQuery 1.3.1分鍾只有18k的大小。 我不認為在初始頁面加載時要求太多。 之后它會被緩存。 結果，我自己主持。
解決方案4
14 2009-02-13 19:57:46
如果您想使用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>
解決方案5
8 2009-02-13 23:07:43
我不希望我開發的任何公共站點依賴於任何外部站點，因此，我自己托管jQuery。
當其他（Google，jquery.com等）發生故障時，您是否願意在您的網站上停電？ 較少的依賴關系是關鍵。
解決方案6
6 2009-02-13 20:36:23
優點：Google上的主機有好處
- 可能更快（他們的服務器更優化）
- 他們正確處理緩存 - 1年（我們很難做出更改，以便在我們的服務器上獲得正確的標題）
- 已在另一個域上擁有指向Google托管版本的鏈接的用戶已在其緩存中包含該文件
缺點：
- 某些瀏覽器可能會將其視為XSS跨域並禁止該文件。
- 特別是運行Firefox NoScript插件的用戶
我想知道你是否可以從谷歌包括，然后檢查一些全局變量的存在，或者某些，如果你的服務器沒有加載？
解決方案7
6 2009-02-13 22:10:39
這里有一些問題。 首先，您指定的異步加載方法：
<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倍，即使它來自谷歌，我的壓縮文件版本比谷歌的K大幾倍。 這甚至在文件加載和（可能）緩存之后。 所以對我來說，由於帶寬並不重要，所以不重要。
最后，你有一個潛行的問題，一個偏執的瀏覽器將請求標記為某種XSS嘗試。 這通常不是默認設置的問題，但在公司網絡上，用戶可能無法控制他們使用的瀏覽器，更不用說安全設置可能會出現問題。
所以最后我不能真正看到我至少使用Google AJAX API for jQuery（更多“完整”的API在某些方面是不同的故事），除了在這里發布示例。
解決方案8
4 2009-02-13 20:22:44
除了建議在自己的服務器上托管它的人之外，我建議將它保存在單獨的域（例如static.website.com）上，以允許瀏覽器將其加載到與其他內容線程分開的位置。 這個提示也適用於所有靜態的東西，比如圖像和CSS。
解決方案9
4 2009-02-13 20:30:48
我必須為在Google上托管的圖書館投票-1。 他們正在收集數據，谷歌分析風格，以及圍繞這些庫的包裝。 至少，我不希望客戶端瀏覽器做的比我要求它做的更多，更不用說頁面上的任何其他東西了。 更糟糕的是，這是谷歌的“新版本”，不是邪惡的 - 使用不顯眼的JavaScript來收集更多的使用數據。
注意：如果他們改變了這種做法，超級。 但是我最后一次考慮使用他們的托管庫時，我監控了我網站上的出站http流量，定期呼叫谷歌服務器不是我期望看到的。
解決方案10
3 2015-06-26 19:44:49
我將添加此作為本地托管這些文件的原因。
最近，南加州TWC上的一個節點無法解析ajax.googleapis.com域（僅限IPv4用戶），因此我們無法獲取外部文件。 直到昨天（現在它仍然存在）這已經是間歇性的。由於它是間歇性的，我在解決SaaS用戶問題時遇到了大量問題。 花了無數個小時試圖跟蹤為什么有些用戶沒有使用該軟件的問題，而其他用戶正在坦承。 在我通常的調試過程中，我不習慣詢問用戶是否關閉了IPv6。
我偶然發現了這個問題，因為我自己正在使用這個特定的“路由”到文件，而且我只使用IPV4。 我發現開發人員工具的問題告訴我jquery沒有加載，然后開始做traceroutes等......找到真正的問題。
在此之后，我很可能永遠不會回到外部托管的文件，因為：谷歌不必為此成為一個問題，並且...這些節點中的任何一個都可能被DNS劫持和惡意js泄露而不是實際的文件。 一直以為我是安全的，谷歌域永遠不會下降，現在我知道用戶和主機之間的任何節點都可能是一個失敗點。
解決方案11
3 2009-02-13 19:47:58
關於這個問題我可能是老派，但我仍然對皺紋感到不滿。 也許谷歌是個例外，但總的來說，在你自己的服務器上托管文件真的很有禮貌。
解決方案12
2 2011-03-29 11:54:56
這里有一些有用的資源，希望可以幫助你選擇你的CDN。 MS最近通過其CDN為交付庫添加了一個新域。
舊格式： http ： //ajax.microsoft.com/ajax/jQuery/jquery-1.5.1.js新格式： http ： //ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js
這不應該發送microsoft.com的所有cookie。 http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_11
這里有一些關於所有技術在網絡上使用的最流行技術的統計數據。 http://trends.builtwith.com/
希望可以幫助您選擇。
解決方案13
2 2009-02-13 19:47:45
我只是包含jQuery站點的最新版本： http ： //code.jquery.com/jquery-latest.pack.js它符合我的需求，我從不擔心更新。
編輯：對於一個主要的網絡應用程序，當然控制它; 下載並自己提供。 但對於我的個人網站，我不在乎。 事情並沒有神奇地消失，它們通常會被棄用。 我跟不上它，知道將來的版本要改變什么。
解決方案14
1 2010-02-16 12:28:39
在頭部：
(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>
解決方案15
1
如果我負責的“活”的地盤我更好的了解所發生的一切， 進入我的網站。 出於這個原因，我自己在相同的服務器或靜態/外部服務器上托管jquery-min版本，但無論是哪種方式，只有我（或我的程序/代理）在驗證/測試每個更改后才能更新庫
解決方案16
0 2017-11-21 15:14:27
我在我自己的服務器上用我的其他js文件托管它，並且就是這一點，將它們組合起來（用django-compresser，這里，但這不是重點）作為一個js文件，與網站的一切需要投入其中。 無論如何你都需要提供你自己的js文件，所以我認為沒有理由不在那里添加額外的jquery字節 - 一些更多的kbs比傳輸請求要便宜得多。 你並不依賴任何人，只要你的縮小的js被緩存，你也會超級快。
在第一次加載時，基於CDN的解決方案可能會獲勝，因為您必須從您自己的服務器加載額外的jquery千字節（但是，沒有額外的請求）。 不過，我懷疑這種差異是顯而易見的。 然后，在第一次加載已清除緩存的情況下，您自己的托管解決方案可能會更快，因為需要更多請求（和DNS查找）來獲取CDN jquery。
我想知道這一點幾乎從未被提及，以及CDN似乎如何接管世界:)
Chrome擴展程序| 如何在cdn的內容和后台腳本中包含庫
[英]Chrome Extension | How to include library in content and background scripts from cdn
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.