如何理解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两个定时触发器的实现原理. 看完的体验就是主要要记住两点: ...
随机推荐
- 在类的头文件里尽量少引入其它头文件 <<Effective Objective-C>>
与C 和C++ 一样,Objective-C 也使用"头文件"(header file) 与"实现文件"(implementation file)来区隔代码.用 ...
- PHP使用debug_backtrace方法跟踪代码调用
在开发过程中,例如要修改别人开发的代码或调试出问题的代码,需要对代码流程一步步去跟踪,找到出问题的地方进行修改.如果有一个方法可以获取到某段代码是被哪个方法调用,并能一直回溯到最开始调用的地方(包括调 ...
- JavaScript对象(复习笔记)
js对象 对象构造器 function person(firstname,lastname,age,eyecolor){ this.firstname=firstname; this.lastname ...
- regular expression 在线检测的网站
http://regexone.com/ 学习网站 http://regexone.com/lesson/optional_characters? http://regexone.com/less ...
- YTU 2918: Shape系列-4
2918: Shape系列-4 时间限制: 1 Sec 内存限制: 128 MB 提交: 276 解决: 232 题目描述 小聪送给小亮和小华的形状他们都很喜欢,小亮和小华非要比一下他们两个的形状 ...
- Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(VSM)
Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(V 时间:2010-04-12 16:06来源:SilverlightChina. ...
- BZOJ_4566_[Haoi2016]找相同字符_后缀自动机
BZOJ_4566_[Haoi2016]找相同字符_后缀自动机 Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两 个子串中有 ...
- request的Content-Type小结
一.Content-Type定义 Content-Type MediaType,即是Internet Media Type,互联网媒体类型:也叫做MIME类型,在Http协议消息头中,使用Conten ...
- Windows代码heap内存分析实战
知识这东西有时候很奇怪,每次当你重新审视他的时候可能都会有新的收获.最近为了研究一个内存相关的问题,把windows heap相关的内容又复习了一遍,收获不小,记录一下,希望有朋友使用的时候少走些弯路 ...
- 使用css borer实现图层蒙版效果
需要js 思路:假设目标元素是target.在外层定义元素宽高等于target,通过border设置元素铺满整个文档,设置border的透明图,实现蒙版,在元素的内部设置子元素,宽高100%;设置圆角 ...