一、如何理解 JS 的单线程?

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

  JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,

否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,

这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

二、什么是任务队列(消息队列)?

  单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。

JavaScript语言的设计者意识到这个问题,将所有任务分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)

  1、同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;

  2、异步任务:不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

  接下来通过俩个例子说明俩个的区别:

console.log('a');
while(true){}
console.log('b'); //结果: a

  因为这是同步任务,程序由上到下执行,遇到while()死循环,下面语句就没办法执行。

console.log('a');
setTimeout(function(){
console.log('b');
},0);
while(true){} //结果: a

  因为setTimeout()就是个异步任务。在所有同步任务执行完之前,任何的异步任务是不会执行的。

三、理解 Event Loop

  异步执行的运行机制如下:

  1、所有同步任务都在主线程上执行,形成一个执行栈(excution context stack)。

  2、主线程之外,还存在一个“任务队列”(task queue)。只要“异步任务”有了运行结果,

就在其中放置一个事件。

  3、一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任务队列”,看里面有哪些事件。

那些对应的异步任务,于是结束等待状态进入执行栈,开始执行。

  4、主线程不断重复上面的第3步。

  主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

只要主线程空了,就会去读取"任务队列",这就是JavaScript的运行机制。这个过程会循环反复。以下这张图可以很好说明这点。

四、哪些语句会放入异步队列和放入时机?

  一般来说,有四种会放入异步任务队列:

  1、setTimeout 和 setInterval

  2、DOM事件

  3、ES6 中的 promise

  4、Ajax 异步请求

  JavaScript 代码运行分俩个阶段:

  1、预解析----把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前

  2、执行 ---- 从上到下执行(按照js运行机制)

  至于放入异步任务队列的时机,我们通过 setTimeout的例子和Ajax例子来详细说明:

for(var i=0;i<4;i++){
setTimeout(function(){
console.log(i);
},1000);
} //结果: 4,4,4.4

  for循环一次碰到一个 setTimeout(),并不是马上把setTimeout()拿到异步队列中,而要等到一秒后,才将其放到任务队列里面,

一旦"执行栈"中的所有同步任务执行完毕(即for循环结束,此时i已经为4),系统就会读取已经存放"任务队列"的setTimeout()(有4个),

于是答案是输出4个4。

js 运行机制简单了解的更多相关文章

  1. 从浏览器多进程到JS单线程,JS运行机制的一次系统梳理

    前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...

  2. 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

    前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...

  3. Js 运行机制 (重点!!)

    一.引子 本文介绍JavaScript运行机制,这一部分比较抽象,我们先从一道面试题入手: 这一题看似很简单,但如果你不了解JavaScript运行机制,很容易就答错了.题目的答案是依次输出1 2 3 ...

  4. Js 运行机制 event loop

    Js - 运行机制 (Even Loop) Javascript 的单线程 - 引用思否的说法: JavaScript的一个语言特性(也是这门语言的核心)就是单线程.什么是单线程呢?简单地说就是同一时 ...

  5. js 运行机制

    <script> console.log(1) setTimeout(function(){ console.log(3) },0) console.log(2) </script& ...

  6. 如何通过setTimeout理解JS运行机制详解

    setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...

  7. 面试 09-02.js运行机制:异步和单线程

    09-02.js运行机制:异步和单线程 #前言 面试时,关于同步和异步,可能会问以下问题: 同步和异步的区别是什么?分别举一个同步和异步的例子 一个关于 setTimeout 的笔试题 前端使用异步的 ...

  8. node.js 运行机制与简单使用

    一.hello world 1.引入 required 模块 2.创建服务器 3.接收请求与响应请求 var http = require('http'); // 载入http模块 http.crea ...

  9. js异步梳理:1.从浏览器的多进程到JS的单线程,理解JS运行机制

    大家很早就知道JS是一门单线程的语言.但是也时不时的会看到进程这个词.首先简单区分下线程和进程的概念 1. 简单理解进程 - 进程是一个工厂,工厂有它的独立资源 - 工厂之间相互独立 - 线程是工厂中 ...

随机推荐

  1. 如何在django-filter中用choice field 的 value 值过滤对象

    如果我们有这样一个model: class IPInfoModel(models.Model): TYPE_INTRANET = 1 TYPE_INTERNET = 2 IP_TYPES = ( (T ...

  2. 网络编程之TCP三次握手,四次断开

    目录 TCP三次握手 1:上图的名词解释 2:TCP三次握手过程 3:为什么不能改成两次握手? TCP三次握手 1:上图的名词解释 SYN:同步序号.它表示建立连接.TCP规定SYN=1时不能携带数据 ...

  3. MyBatis模糊查询异常: '%${}''读取jdbc属性

    '%${}''总是传root, 后来发现${username}读取了jdbc里面的属性username,于是将jdbc属性名修改,成功

  4. 吴裕雄--天生自然HADOOP操作实验学习笔记:pig简介

    实验目的 了解pig的该概念和原理 了解pig的思想和用途 了解pig与hadoop的关系 实验原理 1.Pig 相比Java的MapReduce API,Pig为大型数据集的处理提供了更高层次的抽象 ...

  5. java并发之CopyOnWirteArrayList

    java并发之CopyOnWirteArrayList CopyOnWirteArrayList的实现 它用了ReentrantLock保证了add,set,remove操作的安全,同时使用volat ...

  6. redis单线程为什么快?

  7. Jquery属性操作、添加类

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. DEDE后台升级后不显示编辑器

    dede5.7不显示编辑器不能编辑文章的解决办法:进入系统后台系统配置-系统基本参数-核心设置将fck换成ckeditor保存,当然需要fck编辑器也可以到dede官网下载.dede5.7不显示编辑器 ...

  9. mongdb 4.x admin密码忘记,如何 重建admin用户

    在mongo db中,或mongo db cluser中,如果admin密码忘记了,必须按下面的步骤来做.思路为注释掉security认证部分,重启mongo server, 重建admin用户,再打 ...

  10. 宏碁发布两款全A平台笔记本:良心价

    导读 8月3日消息,在全球数码互动娱乐盛会ChinaJoy上,宏碁推出全新两款全A平台笔记本——暗影骑士4 锐龙版酷冷游戏本和蜂鸟Swift3锐龙版金属轻薄本. 此次发布的宏碁暗影骑士4 锐龙版笔记本 ...