大家好，我是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标记中。为什么选择谷歌风格的指南https://developers.google.com/speed/docs/insights/BlockingJS仍然建议我们可以在head标记中编写内联脚本，因为访问和操作DOM在任何脚本文件中都非常常见。
根据
所以这里有一些解释。
因此，在
如果获取的脚本不直接访问DOM，则使用异步是有意义的。
使用defer是有意义的，例如，如果JS文件很大（例如，fetch需要5秒），并且我们希望在页面上向用户显示某个内容。加载脚本后，我们通过脚本中的js将页面更改为嵌入的“外观”。
请注意，这些不是异步和延迟的所有用例。
建议您检查此加载的答案并执行脚本的顺序
通常的方法是在head标记中只加载javascript。然后在加载整个html文件后，在文档onload中调用函数。
document.addEventListener('DOMContentLoaded', function() {
console.log('document - loaded - ');
//call your functions
}, true);
