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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
javascript事件模型实例分析
Jan 30 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
为什么要在引入的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 curl的深入解析
2013/06/02 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
JavaScript表单验证实现代码
2017/05/22 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
学python最电脑配置有要求么
2020/07/05 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
一些Solaris面试题
2013/03/22 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
中学教师培训制度
2014/01/31 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Python访问Redis的详细操作
2021/06/26 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL