刚接触javascript,对于脚本放在html源码中的不同位置,执行顺序不太了解,做了个实验,贴出结果,记录下来以后用得着。
测试代码,如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>测试js执行顺序</title>
<script language="JavaScript" type="text/javascript" defer>
alert('defer里的内容')
</script>
<script language = 'javascript' type='text/javascript'>
alert('head中普通的script');
//document.onload = alert('onload里的script');
</script>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript">$(function(){
alert('jquery中的script');
});
</script>
</head>
<body οnlοad="alert('写在body的onload事件中的script');">
#############
#############
<br>
<script language = 'javascript' type='text/javascript'>
alert('页面中的script');
</script>
◎◎◎◎◎◎◎◎◎◎◎◎◎
◎◎◎◎◎◎◎◎◎◎◎◎◎
</body>
</html>
<script language = 'javascript' type='text/javascript'>
alert('html闭合标签外的script');
</script>
比较这段代码在ie7和firefox中的表现如图
左侧是ie7弹出的现实列表,而右侧是firefox弹出的事件列表
对比可以发现,二者就是对defer的处理不同,其他还是一致的。什么是defer呢?这里是从网上找到的一段文字:
----------------------------------------
javascript权威指南 版4中说到:
使用src性质从外部javascript文件读取脚本时,HTML解析器和javascript解释器都会停止下来等待文件装载完毕。
浏览器之所以这样做(在下载js文件期间,停止一切html的解析和渲染), 是因为在文件下载回来之前无法知道 js 文件中是否会包含 document.write 这种改变 dom 的语句。
使用 defer 来告诉浏览器,
"我的这段js代码不会包含document.write 啦, 你先放心解析和显示其他html啊。
不用傻傻的等我,等你把html都处理完,再来处理我这里把"
这个时候浏览器就会暂时跳过你的这段js(就好像他们原本就不存在一样),等他忙完其他那些
乱七八糟的事情后才回过头来处理你的这个js,处理完你的这个js(就是包含defer属性的那些)后,
浏览器想:“应该有onload事件”,于是 window.onload事件触发了。
但是 firefox不支持defer
----------------------------------------
所以才表现上述不同。这里我们可以看出:
1. ie才支持defer,所以如果写跨浏览器代码,就不要用它了
2. 在head之中的js脚本最先执行,如果这里面的js使用src来载入,需要等这部分js完全载入在能进行下一步动作。如果这部分代码不改变dom,最好还是放到页尾
3. 页面中的js代码早于jquery和onload事件执行
4. jquery的ready时间早于onload事件执行,它不必等待页面中的图片加载就可以执行
5. onload等待所有的页面内容(包括图片)加载完毕后执行
这里测试并不全面,还可以完善,有兴趣可以做一下