Javascript 先加载，即使代码在标签末尾
[英]Javascript loads first even though code at the end of <body> tag
问题描述
I have added external Javascript at the end of tag in HTML file however, the alert loads first and only on hitting the "Okay" button on alert, the content loads up.
我在 HTML 文件的标记末尾添加了外部 Javascript 但是，警报首先加载，并且只有在警报上点击“确定”按钮时，内容才会加载。 Below is my HTML and JS code.下面是我的 HTML 和 JS 代码。
*I already tried putting the script in the and async/defer thing too. *我已经尝试过将脚本放入异步/延迟中。
<!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");
4 个解决方案
解决方案1
3 已采纳 2020-11-14 12:38:47
the DOM parsing normally happens on the main thread. DOM 解析通常发生在主线程上。 So if the main JavaScript execution thread is busy, DOM parsing will not progress until the thread is free.所以如果主 JavaScript 执行线程忙，DOM 解析将不会进行，直到线程空闲。
If the script element is an external script file, the browser will start the download of the external script file off the main thread but it will halt the execution of the main thread until that file is downloaded.如果脚本元素是一个外部脚本文件，浏览器将开始从主线程下载外部脚本文件，但它将停止主线程的执行，直到该文件被下载。 That means no more DOM parsing until the script file is downloaded.这意味着在下载脚本文件之前不再解析 DOM。
You should learn about the steps that happen when a website gets loaded/parsed/rendered您应该了解网站加载/解析/呈现时发生的步骤
Taken from: 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 .取自： https://medium.com/jspoint/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969#:~:text=When%20a%20web%20page% 20是%20Render%2DTree%20from%20it 。
if you would not have used alert() function, you wouldnt even notice that, but special to alert is that it stops all further execution until you confirmed the alert, regarding the written above, this explains why the page renders after confirming the alert如果你没有使用 alert() function，你甚至不会注意到，但提醒的特别之处在于它会停止所有进一步的执行，直到你确认警报，关于上面写的，这解释了为什么页面在确认警报后呈现
解决方案2
2 2020-11-14 12:30:27
alert is a synchronous function. Note that putting the script at the end of the body only means it will be run when the page is parsed and not when the content is shown. alert是一个同步的 function。请注意，将脚本放在主体的末尾仅意味着它会在解析页面时运行，而不是在显示内容时运行。 The content is only shown afterwards Because alert is synchronous, it will run first before then showing the content.内容只在后面显示 因为alert是同步的，它会先运行然后显示内容。
解决方案3
1 2020-11-14 12:29:46
You could try putting whatever logic you are doing on the onload event of the window like so:您可以尝试将正在执行的任何逻辑放在window的onload事件上，如下所示：
window.onload = () => {
// logic goes here
console.log('the document has been loaded');
};
解决方案4
-1 2020-11-14 12:36:00
Javascript has an asynchonous behaviour. Javascript 具有异步行为。 If you want ensure dom loaded before do anything consider use Jquery如果你想在做任何事情之前确保 dom 已加载，请考虑使用 Jquery
https://jquery.com/ https://jquery.com/
before place your Jquery library into your js code:在将 Jquery 库放入 js 代码之前：
$(document).ready(function(){
//... all your's stuffs here
});
A PRO TIP: Learn Jquery will lead you create amazing things!!专业提示：学习 Jquery 将带领您创造令人惊叹的事物！！ Best regards最好的祝福
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.