2016-03-25 26 views
0

頂我一直在使用模板作爲這樣一會兒引導模板和我嘗試修改或添加更多的腳本,我總是會遇到這兩種情況下爲什麼要使用JavaScript運行時,在頁面的底部或有時

情景1:在某些模板中,腳本僅在將它們放置在頂部即頭部時才起作用。 但同時在元素

<head> 
<!--required scripts here e.g.--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 

</head> 

<body> 

    <div class="content"> 
     <!--elements that require scripts i.e. forms and button--> 
    </div> 
<footer> 


</footer> 
</body> 

方案2的底部不起作用:在一些模板,腳本只有當它們被放置在底部頁腳工作。 但是當放在我靠想了解這些場景背後的思想元素

<head> 

</head> 

<body> 

    <div class="content"> 
     <!--elements that require scripts i.e. forms and button--> 
    </div> 
<footer> 
<!--required scripts here e.g.--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 


</footer> 
</body> 

頂部不起作用。這是什麼導致這種行爲?或者應該考慮什麼?

+0

的[在哪裏?是把

1

JavaScript一次運行一件事。通常它首先運行代碼。因此,在運行聲明它們的代碼之前,您不能要求變量或函數。例如:

<script> var one = 1 </script> 
<script> console.log(one) </script> 

將然而註銷1:

<script> console.log(one) </script> 
<script> var one = 1 </script> 

將註銷不確定。

在你的例子中,我認爲代碼壞了,因爲它需要jQuery,但jquery在代碼試圖運行後加載。

1

JavaScript是一個單線程編程環境。在頭標頂部加載多個腳本時,其下面的其他腳本標記將被阻止,直到該腳本標記加載爲止。如果一個腳本標記無法加載,則其餘所有腳本都會卡住......直到瀏覽器超時爲該腳本標記。爲了解決這個阻塞問題,開發人員在過去幾年中一直在將腳本標記移動到網頁的底部。

當一個網站有大量的JS文件在頁面頂部&正在從第3,第4,第5,通過第N方廣告供應商服務器加載時,問題真的很明顯。當廣告供應商的服務器脫機時,他們的廣告無法再投放 - 這種情況經常發生 - 那麼頁面上的JS會等待瀏覽器超時。這會導致頁面在加載時出現卡住現象。這會造成糟糕的用戶體驗。

將腳本標記移動到頁面底部的開發者技巧有助於緩解這兩個問題。它也使網頁加載更快&可用於更快爲兩個用戶&搜索機器人。由於搜索引擎機器人關心頁面加載時間,他們可以在網頁加載速度很快時爲網站提供支持。

因此,儘可能將腳本標記移動到頁面底部很重要。

+0

問題不是頁面加載速度更快。問題是元素不能正常工作,例如由javascript激活的按鈕。其他人在腳本處於頂部時工作,而其他人在腳本底部時工作 –

+0

某些jQuery代碼可以在沒有包裝頁面加載功能的情況下編寫。所以它尋找$('。content'),不包括$(function(){$('。content')});後面的代碼示例將等待整個DOM加載,然後再運行jQuery。如果您要將調試器添加到jQuery庫中,那麼當頁面頂部加載

相關問題