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. 【STORAGE】Qlogic FC存储交换机cmd配置方法

    *************************************************************** ****原文: blog.csdn.net/clark_xu  徐长亮专 ...

  2. C项目实践--图书管理系统(4)

    前面已经把图书管理系统的所有功能模块都已实现完毕了,下面通过运行来分析该系统的操作流程并检验是否符合逻辑设计要求. 3.系统操作过程 F5 运行 1.登录系统 系统运行之后,提示输入用户名和密码,系统 ...

  3. C编程中fread 、fwrite 用法总结

    在C语言中进行文件操作时,我们经常用到fread()和fwrite(),用它们来对文件进行读写操作.下面详细绍一下这两个函数的用法.   我们在用C语言编写程序时,一般使用标准文件系统,即缓冲文件系统 ...

  4. beego6

    package main //beego使用的是go语言原生的模版 import ( //_ "beego1/routers" //默认controll文件夹里面的控制器 &quo ...

  5. HDU4009 Transfer water —— 最小树形图 + 不定根 + 超级点

    题目链接:https://vjudge.net/problem/HDU-4009 Transfer water Time Limit: 5000/3000 MS (Java/Others)    Me ...

  6. bootstrap3.0学习笔记记录1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. VS 一些用法设置

    /************************************************************************ * VS 一些用法设置 * 说明: * 最近要用到C ...

  8. Ruby: 获取IE的一些信息(其实应用AutoIt脚本本身,获取这些信息更加简单)

    require'win32/registry' hkey_local_machine=Win32::Registry::HKEY_LOCAL_MACHINE defgetKeyValue(hive, ...

  9. 洛谷 P1315 观光公交 —— 贪心

    题目:https://www.luogu.org/problemnew/show/P1315 问题是想不明白改动一条边会对后面造成怎样的影响: 实际上影响的会是一段,当某个车站出发时间受其来人牵制时, ...

  10. 小程序-demo:小熊の日记

    ylbtech-小程序-demo:小熊の日记 1.CHANGELOG.md # -- * 更新开发者工具至`v0.10.101100` * 修改`new`页的数据绑定方式 & 修改多行文本框输 ...