前言

因为js的运行机制十分重要,理解起来也十分抽象,仍还是在这里做个记录,加深自己的记忆。

总之,希望本文的内容能够对您的学习或者工作有所帮助。另,如果有任何的错误或者不足请指正!

如何理解js单线程

用大白话来讲,就是同一个时间只能做一件事

什么是任务队列

    console.log(1)
setTimeout(()=>{
console.log(3)
},0)
console.log(2)

首先我们看下上面的代码,大家猜一下输出的是什么呢?

如果你回答的是 1 2 3,那么恭喜你,答对了,我们说说为什么他输出的是123呢,明明我的setTimeout设置为0了啊

这里我们可以引申出一个新的概念,js的任务队列

js的任务队列:因为js是单线程的,所以同一个时间只能做一件事,当js遇到异步任务的时候要先把异步任务挂起,js往后继续执行,同步任务执行完毕,然后再执行异步任务

ps:据说HTML5标准规定

  1. setTimeout的最短时间间隔是4毫秒

  2. setInterval的最短间隔时间是10毫秒,也就是说,小于10毫秒的时间间隔会被调整到10毫秒

什么是事件循环(Event Loop)

    for(var i = 0;i<4;i++){
setTimeout(()=>{
console.log(i)
},1000)
}

这里输入的又是什么呢?先说答案,4个4

从上面可知道,同步任务执行就会执行任务队列了。那么,执行到了异步任务就一定会放到任务队列吗?其实不然。

浏览器中有个定时器模块,只有当时间到了才会把setTimeout放到异步队列中。

所以for循环在执行的过程中,并没有把setTimeout真正的放到异步队列中,异步队列中没有东西,只有当时间到了,才会把他扔到异步队列中,异步队列再等待一个叫事件循环的东西来执行。

上面说到了事件循环,那他到底是什么呢?

事件循环:

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

  2. 主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。

  3. 一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

  4. 主线程不断重复上面的第三步。

异步任务有哪些

  1. setTimeout和setInterval

  2. DOM事件

  3. AJAX

  4. Promise

浅谈js运行机制的更多相关文章

  1. 从setTimeout谈js运行机制

    众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执行完才能有机会执行,不像人一 ...

  2. 浅谈js执行机制

    关于js执行机制,老早之前就一直想写篇文章做个总结,因为和js执行顺序的面试题碰到的特别多,每次碰到总是会去网上查,没有系统地总结,搞得每次碰到都是似懂非懂的感觉,这篇文章就系统的总结一下js执行机制 ...

  3. 浅谈 js 字符串 search 方法

    原文:浅谈 js 字符串 search 方法 这是一个很久以前的事情了,好像是安心兄弟在学习js的时候做的练习.具体记不清了,今天就来简单分析下 search 究竟是什么用的. 从字面意思理解,一个是 ...

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

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

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

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

  6. 浅谈JS严格模式

    浅谈JS严格模式 简介 何为严格模式?严格模式(strict mode)即在严格的条件下运行,在严格模式下,很多正常情况下不会报错的问题语句,将会报错并阻止运行. 但是,严格模式可以显著提高代码的健壮 ...

  7. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  8. 浅谈JS中 var let const 变量声明

    浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...

  9. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

随机推荐

  1. java开发常见单词(复习整理)

    开发中基本都能碰到,不止以下单词,后续会添加,javascript.html.mysql.spring.Linux中常用单词于此合并分类,特殊不常见不添加 访问修饰符4个--------------- ...

  2. mybatis association的使用

    在上一篇文章中介绍了collection的使用以及java bean,表的结构,今天进行association使用的学习,在多对一的映射关系中,查询到多的一方顺带查询出一的一方是常见的!在此例子中,在 ...

  3. myeclipse 2017 CI 破解

    1.首先下载破解文件(破解前先关闭myeclipse),链接:https://pan.baidu.com/s/1CPFH4Nga3xITSyj-BCVeaw 提取码:mkvz 2.将下载的破解文件解压 ...

  4. 5.6 Go 常用函数

    5.6 Go 常用函数 最正确的学习模块姿势: https://golang.org/pkg/ //golang官网 程序开发常用函数 strings处理字符串相关 统计字符串长度,按字节 len(s ...

  5. 第一篇:百度AI注册使用

    百度AI (https://ai.baidu.com/)点击右上角<控制台>进行登录 内容审核: 操作文档:

  6. 用实例理解k8s群集(干货)

    一些概念: 1. pods是一组容器的集合,以pods为单位来管理,共享PID,网络IP和CUTS命名空间: 2. 容器共享存储卷:用yml文件来定义容器,是k8s里的最小单位. 3.本实验要先准备好 ...

  7. mysql基础1:yum安装mysql

    1.下载yum源并安装http://dev.mysql.com/downloads/repo/yum/.wget https://dev.mysql.com/get/mysql57-community ...

  8. iOS 数组遍历过程中移除

    参考:https://blog.csdn.net/u011619283/article/details/53135502 常见crash 原因是数组在移除元素后,继续遍历会有越界问题. 解决思路: 遍 ...

  9. C盘清理.bat

    将以下代码复制到.txt文件中并改为.bat文件运行即可. @echo offecho 正在清除系统垃圾文件,请稍等......del /f /s /q %systemdrive%\*.tmpdel ...

  10. 大O符号初学者指南

    原文地址:https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/ 计算机科学中,大O表示法被用来描述一个算法的性能或复杂度. ...