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 相关文章推荐
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
微信小程序 video组件详解
Oct 25 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
laravel学习教程之关联模型
2016/07/30 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
劳动之星获奖感言
2014/02/01 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
道德与公民自我评价
2015/03/09 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技