Javascript 中js语句执行顺序

时间 2019-11-19

原文原文链接

若是咱们把嵌入在HTML中的<script> js coding </script>看作Js代码块（实际上Js没有代码块的意义一说，若是真要当作代码块那也应该是按函数块来划分）的话，下面就是Js代码执行顺序：javascript

这里转载 Js执行顺序总结概括请参考 http://www.3lian.com/edu/2014/04-07/139469.htmlcss

step 1. 读入第一个代码块<script> js coding </script>，按HTML中声明的顺序排列。html

　　step 2. 作语法分析，解析时的基本语法格式，有错则报语法错误（好比括号不匹配等），并跳转到step5。java

　　step 3. 对var变量和function定义作“预编译处理”（永远不会报错的，由于只解析正确的声明），也就是这些var 变量和function会最早预处理，即存储在内存中，可是变量只是声明，并无赋值，其之下的任意代码块都能执行调用函数和变量。函数

　　step 4. 执行代码段，有错则报错（好比变量未定义），报错以后，若是没有catch则此段代码执行结束，报错以后的变量都不会赋值spa

　　step 5. 若是还有下一个代码段<script> js coding </script>，则读入下一个代码块，重复step2。code

　　step6. 结束。orm

根据HTML文档流的执行顺序htm

须要在页面元素渲染前执行的js代码应该放在<body>前面的<script>代码块中，事件

而须要在页面元素加载完后的js放在</body>元素后面，

body标签的onload事件注册的函数是在最后执行的。另外请记住，window.onload 就是body上注册的onload事件，那么若是咱们

body以前声明了window.onload = function(){};将会不起做用，缘由是被body中的onload覆盖，然而，若是咱们把

window.onload放在body以后的代码块，那么他就会覆盖body中注册的onload事件，这个相对于$(document).ready(function()

{})执行要晚，jQuery是在Dom树加载完以后就运行，也就是标签到位就行，它并不像window.onload 要求全部资源都被加载完成后

想要获取一个元素的高度或宽度，只要元素被加载后就能获取到，可是必须display不为none

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
 <link href="form.css" rel="stylesheet"></link>
 <script type="text/javascript">
 
// 执行此处代码块，首先加载函数至内存中，可是不会加载click，会加载 variable，可是不会赋值
function fun(){ 
   alert('BODY ONLOAD 页面已经渲染完成以后，等body后面的script代码块执行完后在执行');
   document.getElementById('panel').onclick = click;
  }
click = function(){
    alert('点击后执行');
   }
 
  var variable = ‘hello’；
 
 </script>
 <script type="text/javascript">
      alert('body start 当即执行，页面还未渲染');
  
 </script>
    <title>hello_world</title>
    <style type="text/css">
    </style>
</head>
<body onload="fun()">
 <div class="container">
 </div>
</body>
<script>
 alert('body end 页面渲染后马上执行');
// 元素的高度和宽度必须在页面渲染完成以后才获取其值，并且该元素必须不是display：none
</script>
</html>