JS外链式在html头部引入无效的问题

JavaScript019

JS外链式在html头部引入无效的问题,第1张

原因:

浏览器是单线程的,如果放在头部,浏览器会先加载script文件并执行,此时会形成一个阻塞,影响后续的dom文件的加载和执行。

缺点:

避免措施:

注意:

虽然说将外部引入的js引用放在 body 末尾处,不过也是有顺序的,需要将一些 依赖文件放在前边

例如jquery文件需要放在前边,这样后边函数中使用$才不会报错。

你的js代码要想运行有效,必须满足两个条件:一、jQuery必须加载完毕;二、页面的DOM结构必须加载完毕。如果把代码放到head,那么这时候jQuery和你的代码几乎是同时加载的,当你的代码运行时,jQuery很可能尚未加载完毕,这样条件一就很可能不满足;其次,这时候HTML的body尚未加载,这样条件二也不满足,所以代码运行无效。如果把代码放到body中所有标签的最后面,当你的代码运行时,jQuery和DOM都肯定已加载完毕,所以是有效的。

其实把你的js代码放到head中也是可以的,但必须放到load事件函数中,即这样:

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(function(){

$("div:contains('a')").css("text-decoration", "underline")

})

</script>

</head>

<body>

<div>abc</div>

<div>asdf</div>

<div>qwer</div>

<div>asdw</div>

</body>

</html>