关于script在页面的最佳位置以及html执行顺序_脚本内容放在网页内容上面是不是就在前面显示-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_26878363/article/details/82744486

本文探讨了HTML文件中JavaScript与DOM的交互时机，解释了为何应将部分JS代码置于<body>标签之后以优化页面加载速度，并提供了代码示例。

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

首先需要知道：

html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。

　　　　所以，大部分网上讨论是将script脚本放在<body>之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，加快了页面的加载速度。

　　　　但又不能将所有的script放在body之后，因为有一些页面的效果的实现，是需要预先动态的加载一些js脚本。所以这些脚本应该放在<body>之前。

　　　　其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。

<!DOCTYPE html>
<html>
	<head></head>
	<script type="text/javascript">
		document.getElementById("text").innerHTML = "Test script";
	</script>
	
	<body>
		<h1 id="text"></h1>
	</body>
</html>

控制台将出现：Uncaught TypeError: Cannot set property 'innerHTML' of null
at test.html?__hbt=1537172343687:5

将script脚本放在body之后:

<!DOCTYPE html>
<html>
	<head></head>
	
	<body>
		<h1 id="text"></h1>
	</body>
	
	<script type="text/javascript">
		document.getElementById("text").innerHTML = "Test script";
	</script>
</html>