html中脚本的执行顺序

来源：互联网发布：win10广告屏蔽软件编辑：程序博客网时间：2024/06/08 18:37

刚接触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 onload="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等待所有的页面内容（包括图片）加载完毕后执行

这里测试并不全面，还可以完善，有兴趣可以做一下

0 0