如果我们把嵌入在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>
原文：http://my.oschina.net/u/1989321/blog/316766