浅谈js运行机制
前言
因为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标准规定
setTimeout的最短时间间隔是4毫秒
setInterval的最短间隔时间是10毫秒,也就是说,小于10毫秒的时间间隔会被调整到10毫秒
什么是事件循环(Event Loop)
for(var i = 0;i<4;i++){
setTimeout(()=>{
console.log(i)
},1000)
}
这里输入的又是什么呢?先说答案,4个4
从上面可知道,同步任务执行就会执行任务队列了。那么,执行到了异步任务就一定会放到任务队列吗?其实不然。
浏览器中有个定时器模块,只有当时间到了才会把setTimeout放到异步队列中。
所以for循环在执行的过程中,并没有把setTimeout真正的放到异步队列中,异步队列中没有东西,只有当时间到了,才会把他扔到异步队列中,异步队列再等待一个叫事件循环的东西来执行。
上面说到了事件循环,那他到底是什么呢?
事件循环:
所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
主线程不断重复上面的第三步。
异步任务有哪些
setTimeout和setInterval
DOM事件
AJAX
Promise
浅谈js运行机制的更多相关文章
- 从setTimeout谈js运行机制
众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执行完才能有机会执行,不像人一 ...
- 浅谈js执行机制
关于js执行机制,老早之前就一直想写篇文章做个总结,因为和js执行顺序的面试题碰到的特别多,每次碰到总是会去网上查,没有系统地总结,搞得每次碰到都是似懂非懂的感觉,这篇文章就系统的总结一下js执行机制 ...
- 浅谈 js 字符串 search 方法
原文:浅谈 js 字符串 search 方法 这是一个很久以前的事情了,好像是安心兄弟在学习js的时候做的练习.具体记不清了,今天就来简单分析下 search 究竟是什么用的. 从字面意思理解,一个是 ...
- 从浏览器多进程到JS单线程,JS运行机制的一次系统梳理
前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
- 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...
- 浅谈JS严格模式
浅谈JS严格模式 简介 何为严格模式?严格模式(strict mode)即在严格的条件下运行,在严格模式下,很多正常情况下不会报错的问题语句,将会报错并阻止运行. 但是,严格模式可以显著提高代码的健壮 ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- 浅谈JS中 var let const 变量声明
浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
随机推荐
- python机器学习笔记:EM算法
EM算法也称期望最大化(Expectation-Maximum,简称EM)算法,它是一个基础算法,是很多机器学习领域的基础,比如隐式马尔科夫算法(HMM),LDA主题模型的变分推断算法等等.本文对于E ...
- 2018-07-01 jq效果
jq效果的实现方法: 1.基本 show(time) -> 显示:相当于display:block hide(time) -> 隐藏:相当于display:none toggle(time ...
- Docker & k8s 系列二:本机k8s环境搭建
本篇将会讲解k8s是什么?本机k8s环境搭建,部署一个pod并演示几个kubectl命令,k8s dashboard安装. k8s是什么 k8s是kubernetes的简写,它是一个全新的基于容器技术 ...
- 黑马程序员_毕向东_Java基础视频教程——赋值(随笔)
赋值 class Test{ public static void main(String[] args) { int i = 3; // += -= *= /= %= 它们凑一块成为一个运算符 x ...
- Java并发编程:线程池ThreadPoolExecutor
多线程的程序的确能发挥多核处理器的性能.虽然与进程相比,线程轻量化了很多,但是其创建和关闭同样需要花费时间.而且线程多了以后,也会抢占内存资源.如果不对线程加以管理的话,是一个非常大的隐患.而线程池的 ...
- 【雕爷学编程】Arduino动手做(49)---有源蜂鸣器模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备 ...
- spark机器学习从0到1聚类算法 (十)
一.概念 1.1.定义 按照某一个特定的标准(比如距离),把一个数据集分割成不同的类或簇,使得同一个簇内的数据对象的相似性尽可能大,同时不再同一个簇内的数据对象的差异性也尽可能的大. 聚类属于典型 ...
- 通俗易懂描述dubbo工作原理
关于dubbo的描述就不再赘述,直接进入主题,那就是dubbo的工作原理.dubbo分为服务提供者和服务消费者,主要的工作内容有以下几点:提供者暴露服务.消费者引入服务.提供者和消费者和注册中心之间的 ...
- Fabric进阶(二)—— 在已有组织中增加节点
fabric网络在创建时就已经确定了初始的节点数量,而在实际应用场景中可能会需要在某个组织中动态增加节点.这里以balance-transfer v1.0为例(2 Org,4 Peer),介绍如何在o ...
- 排序算法的总结——Java实现
前言 简单归纳一下最近学习的排序算法,如果有什么错误的地方还请大家指教. 本文介绍了七种经典排序算法,包括冒泡排序,选择排序,插入排序,希尔排序,归并排序,快速排序以及堆排序,并且讨论了各种算法的进一 ...