JS 的加载执行顺序

近来对JS在html中的加载顺序有点小疑惑,遂测试分析了一把:

 

[html] 

  1. <html>
  2.     <head>
  3.         <div>before head</div>
  4.         <script type=”text/javascript”>
  5.             var test = function() {
  6.                 alert(“I’m in head!”);
  7.             }
  8.             test();
  9.         </script>
  10.         <div>after head</div>
  11.     </head>
  12.     <body>
  13.         <script type=”text/javascript”>
  14.             var testPart1 = function() {
  15.                 alert(“I’m in body-part1!”);
  16.             }
  17.             testPart1();
  18.         </script>
  19.         <div>Just a test case…</div>
  20.         <script type=”text/javascript”>
  21.             var testPart2 = function() {
  22.                 alert(“I’m in body-paer2!”);
  23.             }
  24.             testPart2();
  25.         </script>
  26.         <script type=”text/javascript”>
  27.             var testPart3 = function() {
  28.                 alert(“I’m in body-part3!”);
  29.             }
  30.         </script>
  31.     </body>
  32.     <script type=”text/javascript”>
  33.         var testEnd = function() {
  34.             alert(“I’m in the end!”);
  35.         }
  36.         testEnd();
  37.     </script>
  38.     <footer>you are in footer…<footer>
  39.     <script type=”text/javascript”>
  40.         alert(“I’m behind of the footer!”);
  41.     </script>
  42. </html>

结果依次为:div标签”before head”出现,”I’m in head!”,div标签”after head”出现,”I’m in body-part1!”, div “Just a test case…”出现,”I’m in body-part2!”,”I’m in the end!”,footer标签”
you are in footer…”出现,”I’m behind of the footer!”。
说明了以下几点:
1) 按照html从上到下的顺序加载(并不是都先加载head然后加载body,如果head放在body后,就变成了先加载body后加载head,只不过习惯上head在前)。

 

2) html的tags和script脚本也是按照位置的先后顺序加载的。

3) script中如果只有函数定义而没有去触发,这个函数是不会被执行的。

标签