javascript defer 关键字未按预期运行答案

【问题标题】：javascript defer keyword not behaving as expectedjavascript defer 关键字未按预期运行
【发布时间】：2020-11-18 13:39:29
【问题描述】：

据我所知，如果我们在脚本标签上设置 defer 关键字，它不会阻止页面的其余部分呈现，页面的其余部分将在窗口之前呈现load 事件脚本标签将被执行。

我有一个简单的 HTML，它有一个带有 defer 属性的脚本标签。在脚本标签内，我有一个很长的循环，所以它需要时间，在这个脚本标签下面，我还有一个段落标签。理想情况下，当我重新加载浏览器时，应该呈现我的所有内容，然后应该执行脚本，但最后一段没有按预期提前呈现。

这里是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hi I am a p tag</p>
    <img src="./img/Screenshot 2020-07-25 at 11.50.51 PM.png" />
    <input type="text" />
    <link rel="stylesheet" href="./css/styles.css">
    <script type="text/javascript" src="./src/file1.js" defer></script>
    <p>I will be rendered earlier as above javascript file has a defer attribute</p>
</body>
</html>

【问题讨论】：

你可以为它创建一个在线示例吗？
尝试将脚本标签放在
之后

标签： javascript html

【解决方案1】：

脚本不是这里的问题。是您的link 标签导致了问题。

你可以在这里看到这个演示；

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_defer

如果在正文中添加此行；

<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.10/css/bootstrap.css" />

观察p 标签现在在警报之后如何呈现。

【讨论】：

但是为什么会导致这个问题。你能再解释一下吗？
另外，我还注意到一件事，如果我删除链接标签，则
标签会在之前呈现，但图像仅在脚本执行后才会呈现。
link 标签，尤其是stylesheets 应该在head 标签中声明。 head 标签中的内容将在正文的其余部分之前加载。因为您已将它放在正文中，所以它必须加载该样式表，但您的脚本会在此之前触发。将 CSS 放入 head 将确保它在正文之前加载。
必须提供image。仅在脚本运行后才呈现您的图像，因为您的脚本可能会阻止渲染（取决于您的脚本的作用），因此在警报示例中 - 警报会掩盖渲染并使其看起来像页面没有已加载但已加载，只有在警报关闭后才能看到它。
是的，但不延迟意味着它只会在页面的其余部分呈现后才执行脚本？

【解决方案2】：

问题不是脚本标签，而是链接标签。它应该位于<head> 内部，而不是<body>。

【讨论】：

这个。剧本不是问题。您对 CSS 的调用导致了此负载问题。