Javascript执行步骤与顺序

最新推荐文章于 2024-03-24 03:27:29 发布

jie310600

最新推荐文章于 2024-03-24 03:27:29 发布

阅读量214

点赞数

分类专栏： JavaScript 文章标签： Javascript执行步骤与顺序

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

[b]Javascript执行步骤与顺序[/b]

1.JavaScript是单线程

[b]执行步骤:[/b]
step 1. 读入第一个代码块（以<script>指令串</script>）。
step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
step 4. 执行代码段，有错则报错（比如变量未定义）。
step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。
step6. 结束。

[b]执行原理:[/b]
（1）所有任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。系统把异步任务放到"任务队列"之中，然后继续执行后续的任务。
（3）一旦"执行栈"中的所有任务执行完毕，系统就会读取"任务队列"。如果这个时候，异步任务已经结束了等待状态，就会从"任务队列"进入执行栈，恢复执行。
（4）主线程不断重复上面的第三步。

执行栈中的代码，总是在读取"任务队列"之前执行。

[b]执行顺序:[/b]
1.而根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在<body>前面的<script>代码块中
2.需要在页面元素加载完后执行的js放在</body>元素后面，body标签的onload事件是在最后执行的。

<script type="text/javascript">
    alert("first");
    function Fn(){
        alert("third");
    }
</script>
<body onload="Fn()"> //onload事件是在最后执行的

</body>
<script type="text/javascript">
    alert("second");
</script>

[b]body内部的函数会先于onload的函数执行[/b]

//html head...
<script type="text/javascript">
function fnOnLoad(){
alert("I am outside the Wall!");
}
</script>
<body onload="fnOnLoad();">
<script type="text/javascript">
alert("I am inside the Wall..");
</script>
</body>
//先弹出“I am inside the Wall..”;
//后弹出“I am outside the Wall!”

[b]JavaScript是单线程[/b]
1.你肯定要问：那延时执行、Ajax异步加载，不是多线程的吗？
下面这样的程序确实看起来像“多线程”：

function fn1(){
setTimeout(function(){
alert("我先调用")
},1000);
}
function fn2(){
alert("我后调用");
}
fn1();
fn2();
// 先弹出：“我后调用”，
// 1秒后弹出：“我先调用”

看上去，fn2()和延时程序是分两个过程再走，但其实，这是JavaScript中的“回调”机制在起作用，类似于操作系统
中的“中断和响应” —— 延时程序设置一个“中断”，然后执行fn2()，待1000毫秒时间到后，再回调执行fn1()。

参考原文：[url]http://www.admin10000.com/document/3752.html[/url]
参考原文：[url]http://www.cnblogs.com/zxj159/archive/2013/05/17/3084598.html[/url]

jie310600

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript执行步骤与顺序

[b]Javascript执行步骤与顺序[/b]1.JavaScript是单线程[b]执行步骤:[/b]step 1. 读入第一个代码块（以指令串）。step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。step ...
复制链接

扫一扫

专栏目录