码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript 中js语句执行顺序

时间:2014-09-22 14:20:43      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   java   ar   strong   for   2014   div   

如果我们把嵌入在HTML中的<script> js coding </script>看做Js代码块(实际上Js没有代码块的意义一说,如果真要看成代码块那也应该是按函数块来划分)的话,下面就是Js代码执行顺序:


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

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

  step 2.  做语法分析,解析时的基本语法格式,有错则报语法错误(比如括号不匹配等),并跳转到step5。

  step 3.  对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明),也就是这些var 变量和function会最先预处理,即存储在内存中,但是变量只是声明,并没有赋值,其之下的任意代码块都能执行调用函数和变量。

  step 4.  执行代码段,有错则报错(比如变量未定义),报错之后,如果没有catch则此段代码执行结束,报错之后的变量都不会赋值

  step 5.  如果还有下一个代码段<script> js coding </script>,则读入下一个代码块,重复step2。

  step6. 结束。

 

根据HTML文档流的执行顺序

            需要在页面元素渲染前执行的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>


Javascript 中js语句执行顺序

标签:style   http   io   java   ar   strong   for   2014   div   

原文地址:http://my.oschina.net/u/1989321/blog/316766

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!