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的单线程的更多相关文章

  1. 深入理解Javascript单线程谈Event Loop

    假如面试回答js的运行机制时,你可能说出这么一段话:"Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后 ...

  2. 我想这次我真的理解了 JavaScript 的单线程机制

    今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触 ...

  3. 【前端知识体系-JS相关】深入理解JavaScript异步和单线程

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

  4. 深入理解JavaScript运行机制

    深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...

  5. Javascript是单线程的深入分析

    本来想总结一下的,网上却发现有人已经解释的很清楚了,特转过来. 这也解释了为什么在用自动化测试工具来运行dumrendtree时设定的超时和测试case设定的超时的关联性. 面试的时候发现99%的童鞋 ...

  6. JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  7. 深入理解JavaScript定时机制和定时器注意问题

    容易欺骗别人感情的JavaScript定时器 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不 ...

  8. 理解JavaScript中的事件轮询

    原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程,也 ...

  9. 阅读《深入理解JavaScript定时机制》

    鸟哥的这篇<深入理解JavaScript定时机制>从javascript线程角度分析了setTimeout和setInterval两个定时触发器的实现原理. 看完的体验就是主要要记住两点: ...

随机推荐

  1. 在类的头文件里尽量少引入其它头文件 &lt;&lt;Effective Objective-C&gt;&gt;

    与C 和C++ 一样,Objective-C 也使用"头文件"(header file) 与"实现文件"(implementation file)来区隔代码.用 ...

  2. PHP使用debug_backtrace方法跟踪代码调用

    在开发过程中,例如要修改别人开发的代码或调试出问题的代码,需要对代码流程一步步去跟踪,找到出问题的地方进行修改.如果有一个方法可以获取到某段代码是被哪个方法调用,并能一直回溯到最开始调用的地方(包括调 ...

  3. JavaScript对象(复习笔记)

    js对象 对象构造器 function person(firstname,lastname,age,eyecolor){ this.firstname=firstname; this.lastname ...

  4. regular expression 在线检测的网站

    http://regexone.com/   学习网站 http://regexone.com/lesson/optional_characters? http://regexone.com/less ...

  5. YTU 2918: Shape系列-4

    2918: Shape系列-4 时间限制: 1 Sec  内存限制: 128 MB 提交: 276  解决: 232 题目描述 小聪送给小亮和小华的形状他们都很喜欢,小亮和小华非要比一下他们两个的形状 ...

  6. Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(VSM)

    Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(V 时间:2010-04-12 16:06来源:SilverlightChina. ...

  7. BZOJ_4566_[Haoi2016]找相同字符_后缀自动机

    BZOJ_4566_[Haoi2016]找相同字符_后缀自动机 Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两 个子串中有 ...

  8. request的Content-Type小结

    一.Content-Type定义 Content-Type MediaType,即是Internet Media Type,互联网媒体类型:也叫做MIME类型,在Http协议消息头中,使用Conten ...

  9. Windows代码heap内存分析实战

    知识这东西有时候很奇怪,每次当你重新审视他的时候可能都会有新的收获.最近为了研究一个内存相关的问题,把windows heap相关的内容又复习了一遍,收获不小,记录一下,希望有朋友使用的时候少走些弯路 ...

  10. 使用css borer实现图层蒙版效果

    需要js 思路:假设目标元素是target.在外层定义元素宽高等于target,通过border设置元素铺满整个文档,设置border的透明图,实现蒙版,在元素的内部设置子元素,宽高100%;设置圆角 ...