attribute Javascript-頭,身體還是jQuery?



html title (2)

這個問題只是為了澄清一些問題。 之前已經提出了類似這樣的一些問題,這將它們全部歸結為一個問題 - 在HTML文檔中JavaScript應該放在哪裡,或者更重要的是,它是否重要? 所以,我要問的其中一件事就是

<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>

完全不同(在功能方面)

<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>

更重要的是,我想專注於以任何方式修改或使用DOM元素的JS。 所以我知道如果你輸入像document.getElementById("test").innerHTML = "Hello world!" 在你的身體<element id="test"></element> ,它將無法工作,因為正文從上到下加載,使得JS首先加載,然後繼續嘗試操作一個元素還不存在。 所以它應該像上面那樣進入<head>或者在</body>標籤之前。 問題是,除了組織和排序之外,選擇哪一個是否重要,如果是,那麼以何種方式?

當然,還有第三種方法--jQuery方式:

$(document).ready(function(){ /*Code goes here*/ });

這樣,放置代碼的正文在哪裡都沒關係,因為它只會在所有內容都被加載時執行。 這裡的問題是,是否值得導入一個巨大的JS庫只是為了使用一個方法,需要可以用準確放置腳本來替換? 我想在這裡澄清一點,如果你想回答,請繼續! 總結:不同類型的腳本應該放在哪裡 - 頭部或身體,和/或它是否重要? jQuery是否值得為它準備好活動?

https://src-bin.com


Answer #1

最推薦的方法是將它放在</body>標籤之前。 雅虎表現文章還表明除了雅虎和谷歌的YSlowPage Speed插件之外。

引用上面鏈接的雅虎文章:

腳本引起的問題是它們阻止了並行下載。 HTTP / 1.1規范建議瀏覽器每個主機名並行下載不超過兩個組件。 如果您從多個主機名提供圖像,則可以並行執行兩次以上的下載。 但是,在下載腳本時,即使在不同的主機名上,瀏覽器也不會啟動任何其他下載。

當你將腳本放在<head>標籤中時,瀏覽器會為它們提供服務,從而保持其他東西保持不變,直到加載腳本,用戶會感覺到頁面加載緩慢。 這就是你應該把腳本放在底部的原因。

至於:

$(document).ready(function(){/*Code goes here*/});

當DOM可用並準備好進行操作時會觸發它。 如果你把代碼放在最後,你不一定需要這個,但通常這是必需的,因為你想在DOM可用時立即做一些事情。


Answer #2

通過這樣的方式可以並行下載javascripts:

(function () {
    var ele = document.createElement('script');
    ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
    ele.id = "JQuery";
    ele.onload = function () {
        //code to be executed when the document has been loaded
    };
    document.getElementsByTagName('head')[0].appendChild(ele);
})();

在該示例中,它從Google下載縮小的JQuery v1.7.2,這是下載JQuery的好方法,因為從Google下載它就像使用CDN一樣,如果用戶已經在使用相同文件的頁面上,則可能會緩存它因此不需要下載

有一個非常好的谷歌技術談論這裡http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp





html