script放置位置区别

最新推荐文章于 2024-05-11 10:05:08 发布

fighting inging

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量1.5k

点赞数 4

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44165163/article/details/108577322

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

script放置位置区别

script的位置不可以随便放的！！！
外部JS的引入方式和link引入外部css相似，但是要用script标签和结束标签

<script type='text/javascript' src='path'></script>

JS标签的位置决定了JS代码的加载顺序,浏览器是自上而下依次执行，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到script脚本是中断线程，会阻塞进程，立刻请求读取内容，执行代码，所以可能存在页面元素还没有构造的可能,待该script脚本执行结束之后程序才继续往下执行。

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

代码：

<script>
	var a=document.querySelector("input");
	a.onclick=function(){
		alert('111');
	}
</script>
</head>
<body>
	<input type="button" value="点餐">
</body>

此时，动态框弹不出来,因为body中代码还没有加载到,dom元素还没有生成

当script脚本放在body中，就可以了

<body>
	<input type="button" value="点餐">
	<script>
	var a=document.querySelector("input");
	a.onclick=function(){
		alert('111');
	}
</script>
</body>

此外,可以采用添加属性方法
方法1:添加defer属性，不阻塞进程，延迟到页面加载完成执行

<script type='text/javascript' src='path' defer></script>

方法2：添加async属性，不阻塞进程，加载完成立即执行*(不推荐)*

<script type='text/javascript' src='path' async></script>

还有一种方法
方法3:使用jquery的初始化页面方法，使用 $ 符号进行函数调用 $ (param)把点击事件加入到$(function(){})中，这个方法是等DOM页面加载完成后,执行此回调函数，所以不管放在哪里都可以了！

$(function(){ //DOM加载完成后执行
	//代码
	$('#.btn').onclick(function(){
	alert("aaa");
	})
})

将script脚本放在之后的话，dom的生成就不会因为长时间执行script脚本而延迟阻塞，加快了页面的加载速度。
但又不能将所有的script放在body之后，因为有一些页面的效果的实现，是需要预先动态的加载一些js脚本。所以这些脚本应放在之前。
所以，我认为script放置位置的原则，页面效果实现类的js应该放在body之前，动作，交互，事件驱动，需要访问dom属性的js可以放在body之后”。

fighting inging

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
script放置位置区别

script放置最佳位置script的位置不可以随便放的！！！html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到代码：<script> var a=document.querySelector("input"); a.onclick=function(){ alert('111'); }</script></head><body> <input t
复制链接

扫一扫