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 继承机制实例
Aug 12 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
详解Nuxt内导航栏的两种实现方式
Apr 16 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动态图像的创建
2006/10/09 PHP
php 代码优化之经典示例
2011/03/24 PHP
PHP中的替代语法介绍
2015/01/09 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python实现内存监控系统
2021/03/07 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
浅谈Python 函数式编程
2020/06/20 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
Numpy数组的广播机制的实现
2020/11/03 Python
css3的transition属性详解
2014/12/15 HTML / CSS
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
用友笔试题目
2016/10/25 面试题
英文自荐信格式
2013/11/28 职场文书
售后求职信范文
2014/03/15 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
高二数学教学反思
2016/02/18 职场文书
导游词之崇武古城
2019/10/07 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL