本文深入解析JavaScript在浏览器中的执行机制，详细对比六种常见的JS引入方式，包括外部文件引入、内联脚本、document.write动态注入、Ajax结合eval执行以及DOM动态创建脚本元素。重点分析不同加载方式对页面渲染及代码执行顺序的影响，特别是异步与同步加载的区别，帮助开发者掌握跨域取数及复杂场景下的脚本控制技巧。
JavaScript执行顺序基础
JavaScript作为一种解释型语言，其代码通常遵循自上而下的执行逻辑。然而，不同浏览器对这一执行流程的理解存在细微差异。由于代码的执行顺序直接决定了程序流的走向，进而影响程序的正确性，因此深入理解多个JavaScript代码块在浏览器中的具体执行顺序显得尤为重要。
JavaScript引入页面的常见方法
首先需要明确的是，将JavaScript代码嵌入到网页中的方法多种多样。除了常见的两种基础方式外，实际上还存在更多复杂的引入手段。
第一种常见方式是在HTML页面中直接通过script标签引入外部JavaScript文件，例如：<script src="my.js"></script>。
第二种方式是在页面中直接编写内联的JavaScript代码片段，例如：<script>alert(1)</script>。
第三种方式是在JavaScript代码内部使用document.write方法动态引入外部JS文件，具体写法为：document.write("<scr"+"ipt src='my.js'></scr"+"ipt>");。
需要注意的是，上述代码中的</script>标签必须拆分为"</scr"+"ipt>"的形式。如果直接写完整的</script>，浏览器可能会错误地识别为父级script标签的结束符，从而导致脚本执行出错。
第四种方式同样是在JavaScript代码中通过document.write引入其他JS片段，例如：document.write("<scr"+"ipt>alert(1)</scr"+"ipt>");。
虽然这种方式看似多余，即在已存在的script块中再次嵌套script标签，但它确实是一种合法的写法，并且具有特殊的执行行为，这将在后续讨论中详细阐述。
Ajax结合eval的动态加载
第五种方式是利用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的内容）必须是规范的JavaScript代码，且不能以//开头的注释作为起始。如何检查JS代码是否规范？可以访问http://jslint.com/进行验证。
DOM动态创建脚本元素
第六种方式是利用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）