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 相关文章推荐
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
js 概率计算(简单版)
Sep 12 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
js的对象与函数详解
2019/01/21 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
使用Python生成随机密码的示例分享
2016/02/18 Python
python实现数据库跨服务器迁移
2018/04/12 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
Jupyter加载文件的实现方法
2020/04/14 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
12岁生日感言
2014/01/21 职场文书
颁奖典礼主持词
2014/03/25 职场文书
大学新闻系自荐书
2014/05/31 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python