Javascript代码在页面加载时的执行顺序介绍


Posted in Javascript onMay 03, 2013

一、在HTML中嵌入Javasript的方法
1.直接在Javascript代码放在标记对<script>和</script>之间
2.由<script />标记的src属性制定外部的js文件
3.放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>
4.作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="javascript:alert('我是由javascript:协议执行的javascript')">点击我</a>
5.利用javascript本身的document.write()方法写入新的javascript代码
6.利用Ajax异步获取javascript代码,然后执行
 

第3种和第4种方法写入的Javascript需要触发才能执行,所以除非特别设置,否则页面加载时不会执行。

二、Javascript在页面的执行顺序
1.页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序, <script />标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执行,而且执行过程是文档装载的一部分。
2.每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。
3.变量的调用,必须是前面已经声明,否则获取的变量值是undefined。

<script type="text/javscrpt">//<![CDATA[
alert(tmp);  //输出 undefined
var tmp = 1;
alert(tmp);  //输出 1
//]]></script>

4.同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误。
<script type="text/javscrpt">//<![CDATA[
aa();            //浏览器报错
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa();   //输出 1 
function aa(){alert(1);}
//]]></script>

5.document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,然后在继续解析HTML文档。
<script type="text/javascript">//<![CDATA[
    document.write('<script type="text/javascript" src="test.js"><\/script>');
    document.write('<script type="text/javascript">');
    document.write('alert(2);')
    document.write('alert("我是" + tmpStr);');
    document.write('<\/script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    alert(3);
    //]]></script>

test.js的内容是:
var tmpStr = 1;
alert(tmpStr);

•在Firefox和Opera中的弹出值的顺序是:1、2、我是1、3
•在IE中弹出值的顺序是:2、1、3,同时浏览器报错:tmpStr未定义
原因可能是IE在document.write时,并未等待加载SRC中的Javascript代码完毕后,才执行下一行,所以导致2先弹出,并且执行到document.write(‘document.write("我是" + tmpStr)')调用tmpStr时,tmpStr并未定义,从而报错。

解决这个问题,可以利用HTML解析是解析完一个HTML标签,再执行下一个的原理,把代码拆分来实现:

<script type="text/javascript">//<![CDATA[
    document.write('<script type="text/javascript" src="test.js"><\/script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    document.write('<script type="text/javascript">');
    document.write('alert(2);')
    document.write('alert("我是" + tmpStr);');
    document.write('<\/script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    alert(3);
    //]]></script>

这样IE下和其他浏览器输出值的顺序都是一直的了:1、2、我是1、3。

三、如何改变Javascript在页面的执行顺序
1.利用onload

<script type="text/javascript">//<![CDATA[
window.onload = f;
function f(){alert(1);}
alert(2);
//]]></script>

输出值顺序是 2、1。

需要注意的是,如果存在多个winodws.onload的话,只有最有一个生效,解决这个办法是:

window.onload = function(){f();f1();f2();.....}

利用2级DOM事件类型
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}

2.IE中可以利用defer,defer作用是把代码加载下来,并不立即执行,等文档装载完毕之后再执行,有点类似window.onload,但是没有window.onload那样的局限性,可以重复使用,但是只在IE中有效,所以上面的例子可以修改成为
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><\/script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<\/script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>

这样IE就不报错了,输出值的顺序变成:1、3、2、我是1

当HTML解析器遇到一个脚本,它必须按常规终止对文档的解析并等待脚本执行。为了解决这个问题HTML4标准定义了defer。通过defer来提示浏览器可以继续解析HTML文档,并延迟执行脚本。这种延迟在脚本从外部文件载入时非常有用,让浏览器不必等待外部文件全部载入之后才继续执行,能有效的提高性能。IE是目前唯一支持defer属性的浏览器,但IE并没有正确的实现了defer属性,因为延迟的脚本总是被延迟,直到文档结束,而不是只延迟到下一个非延迟的脚本。这意味着,IE中延迟的脚本的执行顺序相当混乱,并且不能定义任何后面非延迟脚本并须的函数和变量。在IE中所有的defer的脚本执行时间应该都是HTML文档树建立以后,window.onload之前。

3.利用Ajax。
因为xmlhttpRequest能判断外部文档加载的状态,所以能够改变代码的加载顺序

Javascript 相关文章推荐
javascript 四则运算精度修正函数代码
May 31 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 #Javascript
javascript两种function的定义介绍及区别说明
May 02 #Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 #Javascript
jquery 触发a链接点击事件解决方案
May 02 #Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 #Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 #Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 #Javascript
You might like
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP多进程编程实例详解
2017/07/19 PHP
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Unicode和Python的中文处理
2017/03/19 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python中bisect的使用方法
2019/12/31 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python如何在DataFrame增加数值
2020/02/14 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
护理专业的自荐信
2013/10/22 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
教师一岗双责责任书
2014/04/16 职场文书
文明之星事迹材料
2014/05/09 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
项目建议书
2015/02/04 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL