即使 <body> 标记末尾的代码，Javascript 也会先加载答案

【问题标题】：Javascript loads first even though code at the end of <body> tag即使 <body> 标记末尾的代码，Javascript 也会先加载
【发布时间】：2020-11-14 12:25:56
【问题描述】：

我在 HTML 文件的标签末尾添加了外部 Javascript，但是，警报首先加载，并且只有在警报上点击“确定”按钮时，内容才会加载。下面是我的 HTML 和 JS 代码。

*我也已经尝试将脚本放入和异步/延迟的东西中。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello</h1>

    <script src="index.js" charset="utf-8"></script>
  </body>
</html>

JS

alert("Hello");

【问题讨论】：

看不到 JavaScript 代码 :) 请重新添加
您可以在网络选项卡中验证 html 是否已加载第一个请求！尽管如此，警报的解析速度显然比渲染 html

标签： javascript html

【解决方案1】：

DOM 解析通常发生在主线程上。因此，如果主 JavaScript 执行线程很忙，则 DOM 解析将不会进行，直到线程空闲。

如果脚本元素是一个外部脚本文件，浏览器将从主线程开始下载外部脚本文件，但它会暂停主线程的执行，直到该文件被下载。这意味着在下载脚本文件之前不再进行 DOM 解析。

您应该了解加载/解析/渲染网站时发生的步骤

取自：https://medium.com/jspoint/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969#:~:text=When%20a%20web%20page%20is,the%20Render%2DTree%20from%20it。

如果你没有使用 alert() 函数，你甚至不会注意到，但特别提醒的是它会停止所有进一步的执行，直到你确认警报，关于上面写的，这解释了为什么页面在确认后呈现警报

【讨论】：

【解决方案2】：

alert 是一个同步函数。请注意，将脚本放在正文末尾仅意味着它将在页面被解析时运行，而不是在显示内容时运行。内容仅在之后显示因为alert是同步的，所以会先运行再显示内容。

【讨论】：

我认为您的意思是“同步”。 alert 非常不是异步的。

【解决方案3】：

您可以尝试将您正在执行的任何逻辑放在window 的onload 事件上，如下所示：

window.onload = () => {
  // logic goes here
  console.log('the document has been loaded');
};

【讨论】：

【解决方案4】：

Javascript 具有异步行为。如果您想确保在执行任何操作之前加载 dom，请考虑使用 Jquery

https://jquery.com/

在将 Jquery 库放入 js 代码之前：

$(document).ready(function(){

//... all your's stuffs here

});

专业提示：学习 Jquery 将带领您创造惊人的东西！最好的问候

【讨论】：

对不起，-1。 jQuery 可能会占用大量资源，尤其是对于像这样的简单问题。
嘿家伙，我不认为他会像这样构建一个最简单的应用程序。球出;)
oops 无法撤销
@expressjs123 没问题 :D 愿这个答案对其他人有意义并呈现惊人的 Jquery