JavaScript 全面解析各种浏览器网页中的JS 执行顺序


Posted in Javascript onFebruary 17, 2009

我们知道javaScript是一种解释型语言,他的执行是自上而下,但是各个浏览器对于至上而下的理解是有细微差别的,而代码的上下游也就是程序流又对于程序正确至关重要,所以我觉得有必要深入理解多个js块儿的执行顺序。
首先得知道有多少方法能把javaScript加入到页面中呢?常见下述的前2种,其实还有更多。
1.页面中直接引入外部js文件:<script src="my.js"></script>
2.页面中直接写如js片段<script>alert(1)</script>
3.在js中引入js文件document.write("<scr"+"ipt src='my.js'></scr"+"ipt>");
注意:这时候"..</script>"必须拆成"</scr"+"ipt>",否则浏览器可能会把父js片段关闭掉,出错;
4.同样在js中引用其他js片段,document.write("<scr"+"ipt>alert(1)</scr"+"ipt>");
你可能觉得这个并没有必要,既然已经在script中了还套一层干嘛?呵呵,怎么说也是一种写法,而且它具有其特殊的行为,稍后我们讨论到。
5.使用Ajax中的xmlHttpRequest结合eval()来引入js,我最早在Dojo的代码见到,写的详细些:
var ajaxRequest = getXmlHttpRequest()//省去各个浏览器得到xmlHttpRequest的部门
ajaxRequest.open("GET","my.js",false);//使用xmlHttpRequest对象Get方法的同步调用
ajaxRequest.send(null);
sJsFragment = ajax.responseText;//得到字符串为js片段
eval(sJsFragment);//执行js片段
注意:这里要求my.js即后来的sJsFragment内容得是非常规范的js,切没有//开头的注释,怎样检查js是否规范呢?去http://jslint.com/
6.无所不能的Dom方法,这个我最早在Yahoo的前端代码中见到,非常厉害,也写的详细些:
var oScript = document.createElement("script");//创建一个Script元素
oScript.src = "my.js";//制定src属性
document.getElementsByTagName("head")[0].appendChild(oScript);
说明:my.js的内容会在oScript加入到文档中之后获得并执行。仔细看下这段容易发现这个调用是异步的,可以在文档载入之后通过事件触发,我用它变通了一下,作为了xmlHttpRequest的Get方法在跨域取数时的替代,获得了很完美的效果,以后有机会专门写篇文。
六种不少吧,可能还会有吧,而且这几种之间还可能相互嵌套,变化无常。
其中1、2、4、6种方式引入的javaScript的执行顺序是非常自然的,随着页面的载入以及后续的事件触发,它们遵守先来后到、而其内部自上而下。
我们主要关注的是第3、4种引入js方法带来的问题(转帖请注明出处:http://blog.csdn.net/lenel)

Javascript 相关文章推荐
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 #Javascript
动态为事件添加js代码示例
Feb 15 #Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 #Javascript
javascript Ext JS 状态默认存储时间
Feb 15 #Javascript
Javascript 获取链接(url)参数的方法
Feb 15 #Javascript
JavaScript 获得选中文本内容的方法
Feb 15 #Javascript
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 #Javascript
You might like
PHP缓存技术的使用说明
2011/08/06 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
python实现简单的计时器功能函数
2015/03/14 Python
python中Flask框架简单入门实例
2015/03/21 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python 通过exifread读取照片信息
2020/12/24 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
linux面试题参考答案(4)
2014/09/21 面试题
学校卫生检查制度
2014/02/03 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
七一慰问简报
2015/07/20 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python