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 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
深入理解Python中字典的键的使用
2015/08/19 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Numpy之random函数使用学习
2019/01/29 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
使用K.function()调试keras操作
2020/06/17 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
保险公司晨会主持词
2014/03/22 职场文书
酒店节能降耗方案
2014/05/08 职场文书
尊师重教演讲稿
2014/09/04 职场文书
2014最新离职证明范本
2014/09/12 职场文书
意向协议书
2015/01/27 职场文书