如何理解JavaScript的单线程
JS的本质是单线程的。这点区别于JAVA的两个线程并发
但是,平时的JS,确实是同时运行很多任务,这又是怎么回事????
First,js的代码分为两种。同步代码和异步代码。
console.log(1)
console.log(1)
console.log(1)
这就是典型的同步代码,编写顺序就是执行顺序。
js引擎的主线程负责执行代码,由于只有这样一个线程,执行当然是同步的,即按照顺序来。
另外,还有一个叫做任务队列的东西,所有的异步代码都是从队列当中来。

通过上图我们就可以发现,JS根本不可能同时执行两个任务,本质上还是单线程的。
在JS中,所谓的异步分为三种:
第一,鼠标的键盘事件触发,例如onclick,onkeydown等等
第二,网络的事件触发,例如onload,onerror等等
第三,定时器,例如setTimeout,setInterval
因为这些任务的发生都不是发生在当下,而是过一段事件以后再执行。因此时间不可控。简单的就是说,你不能让因为5秒后要执行一个函数,就让主线程闲置5秒什么都不干吧!所以你只能继续执行后续的同步代码。而当你单击鼠标或滚动窗口时,主线程可能正在执行其他的任务,忙着呢!没有功夫处理,因此,事件触发线程就负责来接收这个事件,并把要执行的任务暂时保存在队列当中。等主线程把手里的同步代码执行完成后,就立刻会向任务队列提取最新的任务。
这也就解释了为什么我们总把JS的异步函数叫做回调了,因为真的不是马上执行,而是回头再调。
我们看一个简单的例子:
setTimeout("console.log(2)",0)
console.log(1)
反复执行这段代码,都是先打印1,后打印2
因为setTimeout是一个异步的任务,第二参数真正的含义是在0毫秒之后,将代码插入到队列中,而不是在0毫秒之后执行。
当插入任务队列后,主线程会继续执行后续的代码,也就是打印结果1,如果此时的当前的同步代码已经执行完毕,则主线程立刻会从任务队列中取出最新的任务执行。再打印出j结果2。
平时我们使用定时器,时间上往往不准确,就是因为在加入任务队列时。前面可能有很多任务在排队,你明明写了延迟80ms,可是却等了100ms才出现了结果。
同时我们也理解了,为什么setInterval的事件间隔不能设置为0,一般情况下浏览器允许的最小值为16ms,因为如果你设置了0的话,对于浏览器来说,压力简直太大了,定时器触发线程会玩命的往队列中插入任务,而不是完成一个在插入一个。
我们再看一个ajax的例子
var req = new XMLHttpRequest();
req.open("get","http://XXXXXXXXXXX");
req.onload = function(){................}
req.send();
这里的send和onload是可以交换顺序的,因为send是一个异步的方法
。。。。。。。。。。未完待续
如何理解JavaScript的单线程的更多相关文章
- 深入理解Javascript单线程谈Event Loop
假如面试回答js的运行机制时,你可能说出这么一段话:"Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后 ...
- 我想这次我真的理解了 JavaScript 的单线程机制
今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触 ...
- 【前端知识体系-JS相关】深入理解JavaScript异步和单线程
1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...
- 深入理解JavaScript运行机制
深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...
- Javascript是单线程的深入分析
本来想总结一下的,网上却发现有人已经解释的很清楚了,特转过来. 这也解释了为什么在用自动化测试工具来运行dumrendtree时设定的超时和测试case设定的超时的关联性. 面试的时候发现99%的童鞋 ...
- JavaScript可否多线程? 深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...
- 深入理解JavaScript定时机制和定时器注意问题
容易欺骗别人感情的JavaScript定时器 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不 ...
- 理解JavaScript中的事件轮询
原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程,也 ...
- 阅读《深入理解JavaScript定时机制》
鸟哥的这篇<深入理解JavaScript定时机制>从javascript线程角度分析了setTimeout和setInterval两个定时触发器的实现原理. 看完的体验就是主要要记住两点: ...
随机推荐
- Redis管理各类型存储数据命令
>>>字符串 1 SET key value 设置指定 key 的值 2 GET key 获取指定 key 的值. 3 GETRANGE key start end 返回 key 中 ...
- Notepad++ 两个格式化插件
格式化HTML--Tidy2 本来都可以通过Notepad++中的“插件>Plugin Manager>Show Plugin Manager>Tidy2” 这种方式来安装,不过内地 ...
- 浅谈JavaScript的字符串的replace方法
JavaScript字符串提供了一个replace方法.replace方法可以接受两个参数:第一个参数可以使RegExp对象或者一个字符串,第二个参数可以是一个字符串或者一个函数.如果第一个参数是字符 ...
- 2016/2/26 jQuery的技术 1,安装 2,语法选择器$ 事件触发 3,常用jQuery函数
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
- Struts 1 Struts 2
Key Technologies Primer https://struts.apache.org/primer.html Threads With Struts 1 you were require ...
- FunsionCharts Demo
原文路径:http://www.cnblogs.com/xuhongfei/archive/2013/04/12/3016882.html 一.简介 Ø FusionCharts 是InfoSoft ...
- file结构体中private_data指针的疑惑【转】
本文转载自:http://www.cnblogs.com/pengdonglin137/p/3328984.html hi all and barry, 最近在学习字符设备驱动,不太明白private ...
- POJ2912 Rochambeau —— 种类并查集 + 枚举
题目链接:http://poj.org/problem?id=2912 Rochambeau Time Limit: 5000MS Memory Limit: 65536K Total Submi ...
- Jquery与Dom对象相互转化
Jquery与Dom对象相互转化 jQurey对象和DOM对象的相互转换 在讨论jQurey对象和DOM对象的相互转换之前,我们先约定定义变量的风格.如果我们获取的对象是jQuery对象,那么我们 ...
- Oracle “CONNECT BY” 用法
Oracle “CONNECT BY”是层次查询子句,一般用于树状或者层次结果集的查询.其语法是: [ START WITH condition ] CONNECT BY [ NOCYCLE ] co ...