JavaScript运行机制详解

 
var test = function(){
alert("test");
}
var test2 = function(){
alert("test2");
}
setTimeout(function(){
alert("setTimeout");
},1000);
test();
test2();
//test
//test2
//setTimeout;

上面代码的运行结果一直让我很费解,为什么test()test2()没有在setTimeout()之后才执行,相当于先执行了定时器外面的函数,而后再执行定时器里的函数,这是为什么呢?在解释之前,我们有必要知道JavaScript的运行机制。
***

一、JavaScript为什么是单线程

要回答这个问题,只要我们假设一下,如果JavaScript支持多线程,一个线程在某个DOM节点上添加内容,另外一个线程删除了这个节点,那么浏览器该以哪个线程为准呢?所以答案也就不言而喻了。为了避免复杂性,JavaScript从诞生就是单线程。
在HTML5中,推出了web worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程的控制,且不得操作DOM,所以也是没有违背JavaScript单线程的本质。
***

二、任务队列

因为JavaScript是单线程,意味着任务要一个接着一个完成,但是,如果前一个任务执行时间很长,那么后面的任务就得一直阻塞着,这样用户体验十分差。
JavaScript的设计者考虑到了这一点,所以他将JavaScript的任务分为两种,在主线程上执行的任务"同步任务",被主线程挂载起来的任务"异步任务",后者一般是放在一个叫任务队列的数据结构中。
那么一般异步执行运行机制如下(也是JavaScript的运行机制):

  • (1)所有同步任务都在主线程上执行,形成一个执行栈。
  • (2)主线程之外,还有一个“任务队列”,只要异步任务有了运行结果,就在“任务队列”之中放置一个事件。
  • (3)一旦“执行栈”中的所有同步任务执行完毕了,系统就会读取“任务队列”,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
  • (4)主线程不断重复上面的三步。(事件循环)

参考图片(图片来源 阮一峰老师讲解的JavaScript运行机制详解)


三、事件和回调函数

看了前面的讲解,我一开始提出的问题视乎可以这样理解,test()test2()属于“执行栈”中的同步任务,而定时器则是任务队列里面的异步任务,那么定时器就是属于异步任务中的一种,在讲定时器之前先认识一下任务队列里面的另外一个重要成员,事件。其实任务队列就是一个事件队列,因为一般我们绑定一个事件,比如点击事件等等,都是在某一个时刻才触发执行的,这个时候就得放到任务队列里面,等待执行,而在某个DOM节点上绑定了事件,就要有相应的回调函数,它们是相辅相成的。
所谓回调函数,就是那些被挂载起来,等待执行的代码,主线程执行任务队列里面的异步任务,其实就是执行这些回调函数。
一般只有主线程所有任务都执行完毕了,才会执行任务队列里面的异步任务,一般是按照队列的“先进先出”顺序执行,但是因为存在定时器,所以主线程要检查执行时间,只有到了规定的时间,才能返回主线程。
***

四、定时器

终于到特殊的定时器了,定时器主要由setTimeout()setInterval()两个函数来完成,它们的内部运行机制完全一样,不同的只是,前者一次性执行,而后者反复执行。定时器,属于任务队列中的异步任务,所以才会出现上面的问题,再看几个例子就能理解了,

console.log(1);
setTimeout(function(){ console.log(2);},1000);
console.log(3);

上面代码的执行结果是1,3,2,因为只有setTimeout里面的代码是异步任务,其它都是主线程里的同步任务,所以只有执行完了主线程中的所有任务,才会执行setTimeout中的任务。

参考:https://www.cnblogs.com/mcray/p/6938417.html

JavaScript运行机制详解的更多相关文章

  1. JavaScript 运行机制详解:再谈Event Loop

    原文地址:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Eve ...

  2. JavaScript 运行机制详解:深入理解Event Loop

    Philip Roberts的演讲<Help, I'm stuck in an event-loop>,详细.完整.正确地描述JavaScript引擎的内部运行机制. 一.为什么JavaS ...

  3. javascript运行机制详解: 再谈Event Loop(转)

    作者: 阮一峰 日期: 2014年10月 8日 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts ...

  4. JavaScript 运行机制详解:Event Loop

    参考地址:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是 ...

  5. JavaScript 运行机制详解

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...

  6. 【repost】JavaScript 运行机制详解:再谈Event Loop

    一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲<Help, I'm stuck i ...

  7. [转] JavaScript 运行机制详解:再谈Event Loop

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...

  8. [转载]JavaScript 运行机制详解:再谈Event Loop

    https://app.yinxiang.com/shard/s8/sh/b72fe246-a89d-434b-85f0-a36420849b84/59bad790bdcf6b0a66b8b93d5e ...

  9. 【朴灵评注】JavaScript 运行机制详解:再谈Event Loop

    PS: 我先旁观下大师们的讨论,得多看书了~   别人说的:“看了一下不觉得评注对到哪里去,只有吹毛求疵之感. 比如同步异步介绍,本来就无大错:比如node图里面的OS operation,推敲一下就 ...

随机推荐

  1. GJP_Project

    1. view层作用: 视图层,即项目中的界面 l  controller层作用: 控制层, 获取界面上的数据,为界面设置数据; 将要实现的功能交给业务层处理 l  service层作用: 业务层, ...

  2. flask模板的基本用法(定界符、模板语法、渲染模板),模板辅助工具(上下文、全局对象、过滤器、测试器、模板环境对象)

    flask模板 在动态web程序中,视图函数返回的HTML数据往往需要根据相应的变量(比如查询参数)动态生成. 当HTML代码保存到单独的文件中时,我们没法再使用字符串格式化或拼接字符串的当时在HTM ...

  3. PyCharm2017破解步骤

    前段时间买了一套python的学习视频,附带一个Pycharm的安装包和注册码,现在注册码被JetBrains封杀了,不得已在网上找了一下破解的教程,在这里记录一下: 先找到破解补丁无需使用注册码,下 ...

  4. Android开源图表图形库K线图

    Android开源图表图形库K线图 web端k线图一般使用TradingView,android原生的一般是在MPAndroidChart 基础上做开发的,目前看到一个比较好的K线开源组件是KChar ...

  5. golang学习笔记14 golang substring 截取字符串

    golang学习笔记14 golang substring 截取字符串golang 没有java那样的substring函数,但支持直接根据 index 截取字符串mystr := "hel ...

  6. 【JavaScript 6连载】四、apply和call的用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. mybatis的dao的mapper写法

    ## MyBatis的Dao编写[mapper代理方式实现] step1: 写一个接口,并写抽象方法 package com.sjl.mapper; import com.sjl.model.User ...

  8. java使用wait(),notify(),notifyAll()实现等待/通知机制

    public class WaitNotify { static boolean flag=true; static Object lock=new Object(); static class Wa ...

  9. fjwc2019

    机房搬迁.......再加上文化课.......咕了十几天才有空补上....... day0听一个教授讲理论......在学长的带领下咕掉了..... D1 T1:#178. 「2019冬令营提高组」 ...

  10. memset与malloc性能测试(转)

    前一段跟同事聊项目组已有的一些工具,同事讲里面有太多的malloc与memset,对性能的影响比较大,因此今天就在自己的机器上测试了这两个函数,不多说,上数据.测试环境:2.2GHZ.2G内存mems ...