在什么情況下，可以將HTML標記中的腳本標簽包含在head標簽中而不使用async和defer屬性？

Question

嗨，大家好我是JavaScript和Web開發的新手。 最近，我遇到了有關腳本標記位置的問題。 我知道這是一個常見的問題，我已經查看了關於stackoverflow的一些答案以及Google上的該樣式指南。 但是對於這個問題我還是不太清楚。

例如，我有一個帶有這樣的外部腳本js文件的html頁面

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src='js.js'>
    </script>
  </head>
  <body>
  </body>
</html>

js文件是

var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);

在我看來，此js文件不依賴於html文件可用的任何DOM元素，因此在此放置腳本標記的位置無關緊要。 但事實證明，我必須將此腳本標簽放在正文關閉標簽的底部，否則日期將不會按預期顯示在頁面上。 另一個解決方法是像這樣在腳本標記中使用defer屬性

<script src='js.js' defer></script>

這讓我感到困惑，如果腳本具有與DOM相關的任何操作，在我看來，如果沒有defer或async屬性，就無法將其放在前端的head標簽內。 為什么這個Google樣式指南https://developers.google.com/speed/docs/insights/BlockingJS仍然建議我們在head標記中編寫內聯腳本，因為在任何腳本文件中訪問和操作DOM都非常常見。

根據http://caniuse.com/#feat=script-defer的說法，所有瀏覽器中的94.59％支持此功能。 94.92％的人至少部分支持它。 為什么異步和延遲屬性沒有得到廣泛使用？ 我的意思是，我在那里查看了許多HTML源代碼，而只是在任何地方都沒有看到async和defer屬性？

Answer 1

因此，這里有一些啟發。

從那時起，在HTML中使用<script></script>而不使用任何其他屬性將阻止HTML解析（換句話說就是“將html加載到瀏覽器窗口中”）。 成功下載后，將提取指定的腳本並執行。 之后，將恢復執行（將加載頁面）。
使用<script async></script>允許HTML解析器在下載腳本之前不阻止解析。
使用<script defer></script>可以完全解析HTML，然后將執行腳本代碼。

因此，從主題中回答您的問題- <head></head>腳本可以包括在內（並且可以正常運行），如果它們不需要訪問尚未存在的內容。 在您的示例中，您嘗試將sth附加到body（尚不存在）。 如果您在<head></head>中使用<script async></script> ，則也不能保證其正常工作。 例如。 腳本很小（幾乎可以立即下載）-它將在html完全解析之前執行（導致訪問尚不存在的內容）。 我們可以安排異步請求的時間，這是它們美麗的一部分。

如果獲取的腳本不能直接訪問DOM，則使用異步是有意義的。

使用defer是有意義的，例如 如果JS文件很大（例如，提取需要5秒），並且我們想向用戶顯示sth。 在頁面上。 腳本加載后，我們通過腳本中的js將頁面更改為它的“外觀”。

請注意，這些並非都是異步和延遲的所有用例。

Answer 2

建議您檢查此負載的答案並執行腳本的順序

通常的方法是在head標簽中僅加載javascript。 然后，在加載整個html文件之后，在文檔onload中調用您的函數。

document.addEventListener('DOMContentLoaded', function() {
  console.log('document - loaded - ');

  //call your functions
}, true);

在什么情況下，可以將HTML標記中的腳本標簽包含在head標簽中而不使用async和defer屬性？

問題描述

2 個解決方案

解決方案1
2 2018-07-12 23:29:51

解決方案2
0 2018-07-12 23:08:29

在什么情況下，可以將HTML標記中的腳本標簽包含在head標簽中而不使用async和defer屬性？

問題描述

2 個解決方案

解決方案1 2 2018-07-12 23:29:51

解決方案2 0 2018-07-12 23:08:29

解決方案1
2 2018-07-12 23:29:51

解決方案2
0 2018-07-12 23:08:29