标签: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>
标签:style http io java ar strong for 2014 div
原文地址:http://my.oschina.net/u/1989321/blog/316766