js html css加载顺序

浏览数：18 / 时间：2015年06月09日

一：js运行机制执行顺序

　　1.1：

step 1.  读入第一个代码块。
step 2.  做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。只有IE下会报语法错，chrome,ff直接没管；
step 3.  对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
step 4.  执行代码段，有错则报错（比如变量未定义）。
step 5.  如果还有下一个代码段，则读入第二个代码快，重复step2。
step 6.  结束。

　　1.2：代码块是指<script></script>为一块；

　　1.2：语法报错str没有定义，和报错定义了但是赋值在后面图如下

1.3：预编译处理，JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享；，JS的解析过程分为两个阶段：预编译期(预处理)与执行期。预编译期JS会对本代码块中的所有声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此时处理函数的只是申明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。

1.3：而根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在<body>前面的<script>代码块中，而需要在页面元素加载完后的js放在</body>元素后面，body标签的onload事件是在最后执行的。

1.4：申明式函数和赋值函数的区别

// 申明式函数
function Fn（）｛
    alert("Fn");     
｝

// 赋值函数
var Fn=function(){
    alert("Fn");
}

1.5:

<script type="text/javascript">
      alert(str);    // 　1.IE下报与发错，下面的跳过不执行；chrome，ff下直接2：
      alert("我是代码块一");   
      var test = "我是代码块一变量";
</script>
<script type="text/javascript">
      alert("我是代码块二");     // 2：alert了
      alert("test"+test);     // 3：弹出undefine,上面错了之后后面的test没有申明
</script>

1.6

<script type="text/javascript">
      Fn();  // 执行结果："执行了声明式函数",在预编译期声明函数及被处理了，所以即使Fn()调用函数放在声明函数前也能执行。
      function Fn(){ 　　// 声明式函数
         alert("执行了声明式函数");
      }
         
      var Fn = function(){  // 赋值式函数
         alert("执行了赋值式函数");
      }
</script>

<script type="text/javascript">
      alert(str);　　// 浏览器报错,但并没有弹出信息窗
</script>

<script type="text/javascript">
      alert(str); 　　// 弹窗"undefined"
      var str = "aaa";
</script>