javascript的加载和执行浅析

一直对js的加载和执行过程比较模糊，现在从几个简单例子看看javascript的加载和执行过程。

例一：
<script type="text/javascript">
  alert($);  // error: $未定义，后面的脚本也无法执行
  alert("我要执行");//不执行
</script>
<script src="http://tp.jrj.com.cn/js/jquery.js"></script>
<script type="text/javascript">
  alert($);  // function
</script>

结果及分析：script按顺序加载，每个script加载完即执行，如果执行有错会终止当前script的执行，对其它script没有影响。
jquery加载完成才执行后面的alert($);

例二：

<script type="text/javascript">
    alert(i); // undefined
    var i = 1;
    alert(i);
</script>

输出结果是 undefined，这是因为执行前script引擎先对脚本片段就行了"预解析"。预解析发生在语法分析阶段，语法分析得到变量表varDecls,函数funDecls,父级引用upvalue
等语法分析结构，并保存在语法树中。从上到下执行，虽然执行环境中已经有了i的变量定义但未初始化，所以输出为undefined

 

例三：
<script type="text/javascript">
    alert(i); // error: i未定义
    i = 1;
    alert(i);
</script>

执行报错。执行环境的scriptObject上找不到i，JS引擎再沿着scriptObject的upvalue往上寻找，最终在全局环境的scriptObject上都找不到，就产生运行时错误，终止脚本段执行。

再来看
<script src="http://tp.jrj.com.cn/js/jquery.js"></script>
<div style="border:1px solid red;width:100px;height:100px">
  1111
</div>
<img src="http://www.meinvnv.com/uploads/allimg/100325/1_100325043702_1.jpg"/>
<script type="text/javascript">
  alert($);  // function
</script>
jquery加载完后div才被渲染，同样img也是在jquery加载完后加载的。script加载执行时阻塞页面的渲染和资源加载。脚本可能改变文档流，甚至跳转页面，所以浏览器暂停是合理的。


小结：
1) 如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），运行顺序是：

step1. 加载、读入第一个代码段
step2. 做语法分析，对var变量和function定义做“预解析”，
       有错则报语法错误（比如括号不匹配等），并跳转到step4
step3. 执行代码段，有错则报错（比如变量未定义）
step4. 如果还有下一个代码段，则读入下一个代码段，跳到step2
step5. 结束


2) 脚本片段执行时，阻塞后面资源的渲染和加载。