js在Html页面结构中引入的正确位置_html中插入javacript的正确位置是什么-CSDN博客

本文链接：https://blog.csdn.net/qq_33300026/article/details/98068541

在错误的位置引用大量的JS文件会导致页面静态元素迟迟加载不出来而给人一种网页顿卡的感觉.那么怎么才能解决这个问题呢?正确的做法是在<body></body>标签后面引入js文件.而body前面引入CSS文件.不会像我以前的通常做法是在<head></head>节点里面直接引入所有的css和js.因为如果有多个js文件被引入，那么对于浏览器来说，这些js文件被被串行地载入，并依次执行.

DOM文档加载步骤：

解析html结构；
加载外部脚本和样式表文件；
解析并执行脚本；
dom树构建完成（触发DOMContentLoaded和 jquery ready事件）；
加载图片等外部文件；（会触发图片load事件）
页面加载完毕。（触发load事件

例如里面两个代码片段

片段一:

	<body>
		<div style="width: 500px;height: 500px;border-radius: 50%;background-color: greenyellow;"></div>
	</body>
	<script type="text/javascript" src="http://www.google.com/" ></script>

片段二:

	<script type="text/javascript" src="http://www.google.com/" ></script> 	
	<body>
		<div style="width: 500px;height: 500px;border-radius: 50%;background-color: greenyellow;"></div>
	</body>

片段一中的圆会比片段二中的圆先出现在页面.正式由于上面说的原因.因此在web开发中Html页面最好在body后引入js文件,然后写内部js脚本.否则就会出现页面加载时全白的卡顿错觉!!!