JavaScript运行机制详解
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中的任务。
JavaScript运行机制详解的更多相关文章
- JavaScript 运行机制详解:再谈Event Loop
原文地址:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Eve ...
- JavaScript 运行机制详解:深入理解Event Loop
Philip Roberts的演讲<Help, I'm stuck in an event-loop>,详细.完整.正确地描述JavaScript引擎的内部运行机制. 一.为什么JavaS ...
- javascript运行机制详解: 再谈Event Loop(转)
作者: 阮一峰 日期: 2014年10月 8日 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts ...
- JavaScript 运行机制详解:Event Loop
参考地址:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是 ...
- JavaScript 运行机制详解
一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
- 【repost】JavaScript 运行机制详解:再谈Event Loop
一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲<Help, I'm stuck i ...
- [转] JavaScript 运行机制详解:再谈Event Loop
一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
- [转载]JavaScript 运行机制详解:再谈Event Loop
https://app.yinxiang.com/shard/s8/sh/b72fe246-a89d-434b-85f0-a36420849b84/59bad790bdcf6b0a66b8b93d5e ...
- 【朴灵评注】JavaScript 运行机制详解:再谈Event Loop
PS: 我先旁观下大师们的讨论,得多看书了~ 别人说的:“看了一下不觉得评注对到哪里去,只有吹毛求疵之感. 比如同步异步介绍,本来就无大错:比如node图里面的OS operation,推敲一下就 ...
随机推荐
- sql server和oracle数据库
sql server和oracle数据库安装按照官方教程即可:以及他们相应的管理工具,sql server management studio自带的,oracle的管理工具PLSQL需要单独下载安装, ...
- JAVA基础3---JVM内存模型
Java虚拟机执行Java程序的时候需要使用一定的内存,根据不同的使用场景划分不同的内存区域.有公用的区域随着Java程序的启动而创建:有线程私有的区域依赖线程的启动而创建 JVM内存模型大致可以分为 ...
- vue打包报内存溢出
vue-cli 构建的项目:package.json 文件里修改: "build": "node build/build.js" 修改为: "buil ...
- Java动态菜单添加
自己做出来的添加数据库配置好的动态菜单的方法 private void createMenu() { IMenuDAO dao = new MenuDAOImpl(); String sql1 = ...
- JDBC和servlet设计思路、DAO模式思路、MVC思路粗略总结
#JDBC和Servlet联合起来使用的项目思路: 说明:建库,最好一开始设置utf8字符集 step1: 在数据库中建表 如 create table t_user{ ...... } step ...
- Python基本数据类型——列表
序列 序列是Python中的内置数据结构,常见的序列有:列表.字典.元组. 所有的序列都有自己的索引,程序可以通过索引来访问对应的值. 列表 list list是Python的一种最常见的内置数据类型 ...
- Java中五种遍历HashMap的方式
import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class Java8Templat ...
- GitHub使用笔记1:git客户端配置多ssh key
公司用gitlab 外网的github同时配置 这样就导致我们要配置不同的ssh-key对应不同的环境. 具体操作步骤如下: 1:生成一个公司用的SSH-Key $ ssh-keygen -t rsa ...
- 2018-2019-1 20189206 vim.c插件安装
vim插件安装 vim插件安装 由于今天在安装vim.c插件耗费了很多时间,配置文件一直不生效,特此记录以下安装插件的方法. 安装vim.c按照博客的方法 第一步:创建目录~/.vim 这个目录是用来 ...
- [WARNING]: Could not match supplied host pattern, ignoring: servers
Centos7.5 ansible执行命令报错 问题: [root@m01 ~]# ansible servers -a "hostname" [WARNING]: provide ...