JS在html之中加载顺序

最新推荐文章于 2021-05-31 00:39:04 发布

原创最新推荐文章于 2021-05-31 00:39:04 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端心得

本文深入探讨了HTML中JS的加载顺序与执行机制，解析了<script>标签位置对加载的影响，以及$(function(){...}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html被浏览器加载过程中，JS的加载时受到<script />的位置影响的，因为html加载时时从上往下加载的，一般来说，我们在写HTML中写js，如果是外部引用的写在最上面，内部（页面里）的写在最下面。
而且$(function(){...})是在页面JS加载完之后才会加载。同样的还有body标签的onload事件。
例如（例子需要引入Jquery文件）：

<html>
	 <script src='js/jquery-3.3.1.min.js' type="text/javascript"></script>
	<script>
			$(function(){alert($("#text").value);})
			
		</script>
	<body>
		<input type="text" value="I AM BOY" id="text" />
	</body>
	<script>alert("I AM GIRL");</script>
</html>

这段代码中,最先输出的是 I AM GIRL,之后在输出I AM BOY；
分析：js在加载中$(function(){…})最后加载，因此，在页面的js块中alert最先加载执行，在进行function中的内容。
除此之外，JavaScript在编译执行时按照代码块进行的，会把声明性的函数提取出来，然后按照顺序执行。是单线程处理。
例2：

Demo1：

<html>
	<body>
	</body>
	<script>alert(name);</script>
	<script>
			var name="LI HUA";
	</script>
</html>

Demo2：

<html>
	<script>
			var name="LI HUA";
	</script>
	<body>
	</body>
	<script>alert(name);</script>
	
</html>

Demo3：

<html>
	 <script src='js/jquery-3.3.1.min.js' type="text/javascript"></script>
	<script>
			var name="LI HUA";
			$(function(){alert(name)})
	</script>
	<body>
	</body>
	<script>alert(name);
	name="XIAO MING"</script>
	
</html>

DEMO4：

<html>
	 <script src='js/jquery-3.3.1.min.js' type="text/javascript"></script>
	<script>
			$(function(){var name="LI HUA"; alert(name)})
	</script>
	<body>
	</body>
	<script>alert(name);
	name="XIAO MING"</script>
	
</html>

思考这3个Demo中的输出结果是什么？
第一个是NULL；
第二个是LI HUA;
第三个是LI HUA、XIAO MING;
第四个是NULL、LI HUA.
可以发现JS也有全局变量和局部变量之分，代码块之间可以共享全局变量，错误的加载顺序会导致错误的程序。因此在引用外部资源时，记得不要冲突。