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

我们知道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）

赞 (0)

相关推荐

  • js 异步操作回调函数如何控制执行顺序

    需求: fun A() { asyn(parm1, parm2, onsuccess(){ }) ;} fun B() {asyn(paem1, parm2, onsuccess(){}) ;} 函数B要求执行在函数A之后 异步执行 如果直接使用 A(); B(); 是不能够满足执行条件的. 考虑将B作为回调函数传递给A,然后A再执行的onsucess中执行B函数 A(B); 即可实现功能需求. js是单线程的. 1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的

  • javascript attachEvent绑定多个事件执行顺序问题

    常见的绑定事件有直接绑定在页面元素中比如<div id="wrap" onclick="a();"></div>,这个换种方法也就是分离出来写在js代码里如document.getElementById('wrap').onclick = function(){a();},此时如果需要绑定多个方法则直接写在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或&

  • 如何确保JavaScript的执行顺序 之实战篇

    如何确保JavaScript的执行顺序 之实战篇

    1. 引言 我曾在文章<如何在多个页面使用同一个HTML片段 - 续>的最后提到JavaScript顺序执行的特性.虽然现代浏览器可以并行的下载JavaScript(部分浏览器),但考虑到JavaScript的依赖关系,他们的执行依然是按照引入顺序进行的. 为了更好的测试这个过程,我写了一个简单的HTTP处理程序页面 service.ashx,它可以接受两个参数: 1. file,需要返回文件的服务器端路径. 2. delay,延迟一定时间后再返回本次HTTP请求(毫秒). 一个典型的页面比如

  • Javascript代码在页面加载时的执行顺序介绍

    一.在HTML中嵌入Javasript的方法1.直接在Javascript代码放在标记对<script>和</script>之间2.由<script />标记的src属性制定外部的js文件3.放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>4.作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href=&q

  • 探析浏览器执行JavaScript脚本加载与代码执行顺序

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕①.这一点是没有争议的,并且在所有浏览器中的行为都是一致的,原因也不难理解:浏览器需要一个稳定的DOM结构,而JavaScript可能会修改DOM(改变DOM结构或修改某个

  • JavaScript 在各个浏览器中执行的耐性

    JavaScript 在各个浏览器中执行的耐性

    IE:执行超过500W条JScript引擎语句出现提示. Firefox:执行超过10秒出现提示. Safari:执行超过5秒出现提示. Opera:无论执行多久都不会出现提示,最有耐性. Chrome:执行超过约8秒(估计值)出现提示. 注:当弹出类似alert的模式对话框的时候,是不计时. 在Web开发的时候,经常会遇到的一种情况就是浏览器提示脚本运行时间过长,停止还是继续,无论你选择什么,相信你都会想尽一切办法让这个对话框远离你的用户们.可你是否知道,这些不同的浏览器究竟是如何判断,哪些脚

  • 解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法

    今天检查自己用JQuery+AJAX+PHP做的网站后台登录检测,发现登陆成功后执行页面跳转函数这段JavaScript(JS)代码特效在IE和谷歌浏览器Chrome下都可以很好地执行,兼容性还不错.结果到了火狐(FireFox)浏览器下setTimeout这个JS内置函数不执行了,无效了,也没报错!打开FireBUG指望它能检测出JS的错误,结果没用...Javascript(JS)脚本代码在各浏览器下的兼容是一个很头疼的问题,经过一番调试和搜索,终于解决了setTimeout这个JS代码在火

  • 如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙

    如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙

    1. 引言 在上一篇文章<如何确保JavaScript的执行顺序 - 之jQuery.html深度分析>中,我们揭示了jQuery.html函数之所以能在各种浏览器下保持动态JS顺序执行,其秘密在于 – 同步AJAX获取外部JavaScript. 我们先来简单回顾下HTML源代码(test2.htm): 复制代码 代码如下: <html> <head> <title></title> <script src="js/jquery-

  • js判断浏览器类型为ie6时不执行

    js判断浏览器类型 $.browser 对象$.browser.version 浏览器版本 复制代码 代码如下: var binfo = ''; if ($.browser.msie) { binfo = "Microsoft Internet Explorer " + $.browser.version; } else if ($.browser.mozilla) { binfo = "Mozilla Firefox " + $.browser.version;

  • Html中JS脚本执行顺序简单举例说明

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 如何确保JavaScript的执行顺序 之jQuery.html深度分析

    如何确保JavaScript的执行顺序 之jQuery.html深度分析

    我们先来简单回顾下HTML源代码(test2.htm): 复制代码 代码如下: <html> <head> <title></title> <script src="js/jquery-1.4.4.js" type="text/javascript"></script> <script> $(function(){ $('#container').html('<script s

  • javascript的解析执行顺序在各个浏览器中的不同

    简介 javascript是一种解释型语言,它的执行是自上而下的.但是各浏览器对于[自上而下]的理解是有细微差别的,而代码的上下游也就是程序流对于程序正确运行又是至关重要的.所以我们有必要深入理解js的执行顺序.为此,我设计了如下八个实验来获得最确切的结果. 实验 复制代码 代码如下: <script type="text/javascript"> //实验一: function t(a) { alert("[t(a)]a:" + a); } funct

随机推荐