HTML5 Boilerplate和jQuery

Question

我想知道爲什麼http://html5boilerplate.com/的樣板文件在web內容之後聲明jQuery？這是否有一個很好的理由？

這是代碼片段...

<!-- Add your site or application content here --> 
    <p>Hello world! This is HTML5 Boilerplate.</p> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script> 
    <script src="js/plugins.js"></script> 
    <script src="js/main.js"></script> 

附： window.jQuery ||部分是做什麼的？

Answer 1

它檢查CDN副本是否正確加載。如果不是，則加載本地副本。

---

當jQuery在頁面上運行時，它會創建一個全局的jQuery變量。這也可以作爲全局對象的屬性來訪問：window.jQuery。如果jQuery沒有運行，window.jQuery將是undefined。

的||是以下的簡寫版本：

if (window.jQuery == undefined) { 
    document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>'); 
} 

這樣，如果谷歌的CDN下跌（或者如果瀏覽器無法訪問ajax.googleapis.com）你的網站不破。相反，jQuery的相同副本將從您的域中提供。

---

這是底部的原因是因爲這是Yahoo's performance guide建議：

造成腳本的問題是，他們阻止並行下載。 HTTP/1.1規範建議瀏覽器每個主機名並行下載至少兩個組件。如果您從多個主機名提供圖像，則可以同時發生兩個以上的下載。然而，當腳本正在下載時，瀏覽器將不會啓動任何其他下載，即使是在不同的主機名上。

[...]

如果腳本可以被推遲，這也被移動到頁面的底部。這將使您的網頁加載速度更快。

欲瞭解更多信息，請參閱Steve Souders'excellent article on this topic。

Answer 2

Where to place Javascript in a HTML file?涵蓋了爲什麼把javascript放在頁面底部是好事。基本上，因爲它使你的網頁加載速度更快。

window.jQuery ||正在檢查以確保您從CDN下載了jQuery。如果沒有（可以說CDN已關閉），它將使用您的本地文件。

Answer 3

最好在內容後面加入JavaScript，這樣JavaScript不會阻止加載頁面。

See Steve Sounder's blog post for more information.

從本地託管副本的window.jQuery ||部分負荷的jQuery如果CDN副本不可用。

基本上，腳本標記是從谷歌的服務器加載jQuery，這些服務器非常快速，位於世界各地。另外，由於很多網站都會從Google的服務器加載jQuery，因此很多人都將它緩存在瀏覽器中。無論哪種方式，人們會得到它真的很快。

問題是，如果谷歌的服務器關閉，它將無法加載jQuery。爲了保護我們免受jQuery從Google加載後出現的不可能發生的情況，我們有一個JavaScript表達式。這是一個條件表達式A OR B。在這種情況下，表達式的左邊是jQuery變量，如果它是從Google成功加載的，這將是jQuery全局對象，這是JavaScript中的「真實」值，它將評估爲true。由於在OR表達式中，如果一邊是真的，所以不需要評估B端JavaScript永遠不會執行這行代碼的其餘部分。這被稱爲short circuit evaluation。

如果jQuery無法從Google CDN加載全局jQuery變量將是未定義的。這是一個「假」值，所以JavaScript將執行OR表達式的右側。在這種情況下，右側在頁面上寫入新的腳本標籤。新的腳本標記從相對域加載jQuery，這意味着與託管此站點的服務器相同。它可能不如從谷歌載入它快，但至少我們知道它會起作用。