javascript的执行顺序

JavaScript执行顺序的问题

1. 变量的提前声明（啰嗦一下）

alert(myStr); // 弹出"undefined";

var myStr = "Hello World!";

alert(myStr); // 弹出"Hello World";

2. “定义式”函数定义与“赋值式”函数定义

　　页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描，如果遇到定义式函数，则进行预处理(类似于C等的编译)，处理完成之后再开始由上至下执行；
　　遇到赋值式函数，则只是将函数赋给一个变量，不进行预处理(类似1中变量必须先定义后引用的原则)，待调用到的时候才进行处理。下面举个简单的例子：

//“定义式”函数定义
Fn1();
function Fn1(){ alert("Hello World!"); } //正常执行，弹出“Hello World!”，浏览器对Fn1进行了预处理，再从Fn1();开始执行。
//“赋值式”函数定义 
Fn2();
var Fn2 = function(){ alert("Hello wild!"); } //Firebug报错：Fn2 is not a function，浏览器未对Fn2进行预处理，依序执行，所以报错Fn2未定义。

3. 代码块及js文件的处理 “代码块”是指一对

　　浏览器对每个块或文件进行独立的扫描，然后对全局的代码进行顺序执行

　　所以，在一个块(文件)中，函数可以在调用之后进行“定义式”定义；但在两个块中，定义函数所在的块必须在函数被调用的块之前。

4. body的onload函数与body内部函数的执行

　　body内部的函数会先于onload的函数执行

　　body的onload事件触发条件是body内容加载完成，而body中的js代码会在这一事件触发之前运行

　　body的onload事件调用的函数，也是利用了回调机制——body加载完成之后，回调执行OnLoad()函数。

5、js的执行过程也是文档load过程的一部分

页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序， <script />标记里面的或者通过src引入的外部JS，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。

每个个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。

6、document.write()

　　document.write()会把输出写入到脚本文档所在的位置，浏览器解析完documemt.write()所在文档内容后，继续解析document.write()输出的内容，然后在继续解析HTML文档。

见下面的例子：

<script type="text/javascript">
    document.write('<script type="text/javascript" src="test.js"></script>');
    document.write('<script type="text/javascript">');
    document.write('alert(2);')
    document.write('alert("我是" + tmpStr);');
    document.write('</script>');
</script>
  <script type="text/javascript">
    alert(3);
</script>

test.js

var tmpStr = 1; alert(tmpStr);

结果：

•在Firefox和Opera中的弹出值的顺序是：1、2、我是1、3
•在IE中弹出值的顺序是：2、1、3，同时浏览器报错：tmpStr未定义；因为ie中可以遇到js中的src属性可以同步加载并继续渲染dom

解决方法：

<script>
    document.write('<script type="text/javascript" src="test.js"></script>');
</script>
<script type="text/javascript">
    document.write('<script type="text/javascript">');
    document.write('alert(2);')
    document.write('alert("我是" + tmpStr);');
    document.write('</script>');
</script>
<script type="text/javascript">
    alert(3);
</script>

7、如何改变Javascript在页面的执行顺序

（1）、利用onload

（2）、延迟脚本defer:

　　告诉浏览器立即下载，但是延迟执行，只是用与外部脚本。即让脚本完全呈现之后在执行，且总是按照他们的顺序执行。例子如下：

<!DOCTYPE html>
<html>
<head>
    <title>Example HTML Page</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!--这里放内容--> </body>
</html>

（3）、异步脚本async:

　　　　告诉浏览器立即下载，表示当前脚本不必等待其他脚本下载和执行，也不会阻塞文档呈现，并不能保证他们按照他们在页面出现的顺序。所以异步脚本一定会在页面的load事件前执行。

<!DOCTYPE html>
<html>
<head>
    <title>Example HTML Page</title>
    <script type="text/javascript" async src="example1.js"></script>
    <script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!--这里放内容--> </body>
</html>

（4）、利用Ajax。
　　因为xmlhttpRequest能判断外部文档加载的状态，所以能够改变代码的加载顺序。