我應該使用已經在底部身體標記之前的腳本的延遲嗎？

每次我把我的js文件放在頁面底部時，這個問題一直困擾着我。如果我在關閉body標籤之前將所有js文件放在底部，那麼我認爲瀏覽器將首先下載所有html和樣式表，然後它將解析html和css，最後它將發送js文件的請求。所以，我應該使用已經在底部身體標記之前的腳本的延遲嗎？

將使用defer在js文件已經在底部有什麼區別？
剛剛在身體標記呈現阻塞之前的非延遲腳本？

我的另一個問題是，如果我把所有的js文件放在頭上，並使用defer就可以了。這是否相當於將所有js文件放在底部？在瀏覽器向服務器發出請求並繼續下載HTML文件的其餘部分或者在下載完所有html和css後纔會向服務器發出請求，會在head中看到js？

據我所知async相當於defer和唯一的區別是js將在下載時執行，而不考慮文件的順序。所以，

對於已經在底部的js文件，除了執行它們的順序以外，是否會使用async？

來源

2016-11-05 user31782

是的，延遲基本上類似於把標籤放在身體的盡頭。 – dandavis

您可能正在尋找的是瀏覽器功能，以瞭解DOM是否已完全加載。從MDN：

<script> 
    document.addEventListener("DOMContentLoaded", function(event) { 
    console.log("DOM fully loaded and parsed"); 
    }); 
</script>

然後你可以把你的JavaScript等。無論，自當DOM完全加載

來源

2016-11-05 14:30:31 ilwcss

defer屬性執行的是一個布爾屬性。

存在時，它指定腳本在頁面完成解析時執行。

注意：defer屬性僅用於外部腳本（只有在src屬性存在時才應使用）。

來源

2017-03-23 10:07:16

嗯沒有。它在_page_解析後不會執行腳本。它在HTML文檔（DOM）被解析之後並且在DOMContentLoaded被激發之前執行腳本，按照MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/script您是否還有其他參考？ – user31782

我發現這從https://www.w3schools.com/tags/att_script_defer.asp你應該檢查它。 –

我發現MDN錯了一兩次，但是w3schools - 很多時候。所以我認爲MDN比w3school更值得信賴。 – user31782

通過HTML 5.2 spec查看腳本，發現this illustration W3C使用。

我們在這裏看到的是，在解析HTML時使用defer獲取腳本，但在執行之前一直等待解析結束。

async另一方面與解析一起提取，一旦提取完成，暫停HTML渲染以執行腳本。

由於HTML執行是同步的，因此可以假定在</head>之前放置的腳本上使用defer幾乎就像將它們放置在</body>之前一樣。

但是，如Chris Moschini所述，我不相信defer。我覺得this StackOverflow答案作爲一個整體可以更好地解釋defer如何影響加載JavaScript。

來源

2017-03-24 16:05:42

但是，如果我不使用延期，很多像gtmatrix這樣的網站會減少分數。現在我認爲現代瀏覽器已經正確實施了「延期」。 – user31782

也許是這樣。考慮到這一點，在''腳本中使用'defer'或在內容中混合使用可以阻止渲染過程，並且實際上可以加快頁面渲染時間。但是，它會影響執行時間，這會導致剛剛超過''的腳本。 –

我打算在上面的評論中提及[this]（https://developers.google.com/speed/docs/insights/BlockingJS）。 –

我應該使用已經在底部身體標記之前的腳本的延遲嗎？

回答

相關問題