JavaScript與腳本文件放置位置混淆

技術上將腳本放在html頁面的底部是JavaScript Best Practice。但我很困惑爲什麼一些腳本應該在頁面頂部調用，如Angular。因此，當我使用Angular-like庫時，我正在打破JavaScript最佳實踐？JavaScript與腳本文件放置位置混淆

任何解釋？

來源

2016-08-18 DININDU

最佳實踐_guidelines_，而不是規則。 – Tushar

這並不重要。角加載你的頁面，所以你必須等待JS加載。您將它們放在底部的原因是您沒有增加頁面加載等待時間。 – Randy

@Tushar感謝您的提示。 – DININDU

從技術上講，如果您不關心順序加載腳本文件「太多」，那纔是最好的做法。你可以先打電話給你，先找出你需要一個圖書館。因此，在加載HTML後，人們將其所有自定義腳本加載到底部，因此他們不需要照顧該特定的事件，並且不需要處理render blocking scripts這就是當您將它們全部放在頭標記中時會發生的情況。

但是，JavaScript庫實際上是需要首先完全加載的依賴關係。技術上也是在小樂隊（或者現在比較慢的智能手機）。你也應該知道http協議允許你一次下載2個請求。

考慮到這些信息，我說最佳實踐是一個捆綁腳本文件放在async模式從頭標記加載，最好是縮小。可以用咕嚕/咕嚕設置或某種方式實現。

<head> 
    <title></title> 
    <script src='path-to-bundled-script.js' async='async' /> 
</head>

的async屬性可以確保網頁加載不上這個腳本等待被完全加載。它仍然會等待多個http請求，因此可以順序執行。

所以，當你正在開發，你沒有完成這個捆綁的咕嚕/吞嚥設置，你會打錯誤，說庫沒有加載或符號無法識別。

要解決此問題，您可以使用屬性defer。

<head> 
    <title></title> 
    <script src='path-to-library.js' defer='defer' /> 
    <script src='path-to-library2.js' defer='defer' /> 
    <script src='path-to-library3.js' defer='defer' /> 
    <script src='path-to-custom1.js' defer='defer' /> 
    <script src='path-to-custom2.js' defer='defer' /> 
</head>

使用defer屬性時，頁面加載將等待腳本執行，但不會完全加載HTML。

使用這種技術，你可以忘掉的結束標記作爲最佳實踐，你會獲得速度可測試與谷歌的pagespeed insight

來源

2016-08-18 16:15:52

這實際上取決於要加載的頁面的內容（要提取的數據）。如果它大部分是靜態的，只有少量的AngularJS綁定，那麼最好將它放在底部。但是對於完全動態的內容，您希望在頁面的頂部加載AngularJS，例如在REST風格的Web服務中。如果我們需要一些數據（綁定）以角度的方式，我們需要把它放在最上面，邏輯很簡單。

來源

2016-08-18 16:08:15

JavaScript與腳本文件放置位置混淆

回答

相關問題