0182 JavaScript执行机制:单线程,同步任务和异步任务,执行栈,消息队列,事件循环
以下代码执行的结果是什么? 【结果是1 2 3 】
console.log(1);
setTimeout(function () {
console.log(3);
}, 1000);
console.log(2);
以下代码执行的结果是什么? 【结果是1 2 3 】
console.log(1);
setTimeout(function () {
console.log(3);
}, 0);
console.log(2);
1.3.1 JS 是单线程

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
1.3.2 同步任务和异步任务
单线程导致的问题就是后面的任务等待前面任务完成,如果前面任务很耗时(比如读取网络数据),后面任务不得不一直等待!!
为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。于是,JS 中出现了同步任务和异步任务。
1.3.2.1 同步
前一个任务结束后,再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。
比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
1.3.2.2 异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。
比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
`他们的本质区别: 这条流水线上各个流程的执行顺序不同。`

JS中所有任务可以分成两种,一种是`同步任务`(synchronous),另一种是`异步任务`(asynchronous)。 `同步任务`指的是:
在`主线程`上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务; `异步任务`指的是:
不进入`主线程`,而进入”任务队列”的任务,当主线程中的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行。

1.3.3 JS执行机制(事件循环)


1.3.4 代码思考题
事件循环 : 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。
console.log(1);
document.onclick = function() {
console.log('click');
}
setTimeout(function() {
console.log(3)
}, 3000)
console.log(2);





0182 JavaScript执行机制:单线程,同步任务和异步任务,执行栈,消息队列,事件循环的更多相关文章
- javascript执行机制
文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的 ...
- JavaScript 执行机制
一.宏任务与微任务 macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTi ...
- 转载---JavaScript执行机制
很好的一篇文章,原地址 JavaScript执行机制 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不 ...
- 【js】javaScript 执行机制
javascript 是一门单线程语言(按照语句一行一行的执行) let a = '1'; console.log(a); let b = '2'; console.log(b); 这样子正常执行是没 ...
- 【THE LAST TIME】彻底吃透 JavaScript 执行机制
前言 The last time, I have learned [THE LAST TIME]一直是我想写的一个系列,旨在厚积薄发,重温前端. 也是给自己的查缺补漏和技术分享. 欢迎大家多多评论指点 ...
- 这一次,彻底弄懂 JavaScript 执行机制
本文转自https://juejin.im/post/59e85eebf265da430d571f89#heading-4 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还 ...
- 探索JavaScript执行机制
前言 不论是工作还是面试,我们可能都经常会碰到需要知道代码的执行顺序的场景,所以打算花点时间彻底搞懂JavaScript的执行机制. 如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发 ...
- 夯实基础上篇-图解 JavaScript 执行机制
讲基础不易,本文通过 9 个 demo.18 张 图.2.4k 文字串讲声明提升.JavaScript 编译和执行.执行上下文.调用栈的基础知识.
- 彻底弄懂 JavaScript 执行机制
本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...
随机推荐
- Element-ui学习笔记3--Form表单(二)
Input输入框 Input 为受控组件,它总会显示 Vue 绑定值. 通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model).否则,输入框内显示的值将不会改变. 不支持 ...
- Linux 使用 Speedtest 测试网速
Speedtest的linux客户端是用python写的一个安装包 安装python包管理器pip yum -y install python-pip 如果提示No package python-pi ...
- HTML--CSS样式表--基本概念(超链接的状态)
样式表的基本概念 一.样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;"> ...
- 2019-9-2-win10-uwp-车表盘-径向规
title author date CreateTime categories win10 uwp 车表盘 径向规 lindexi 2019-09-02 12:57:38 +0800 2018-2-1 ...
- C++调用Lua编程环境搭建及测试代码示例
C++调用Lua编程环境搭建及测试代码示例 摘要:测试环境是VS2005+LuaForWindows_v5.1.4-45.exe+WIN7 1.安装lua开发环境LuaForWindows_v5.1. ...
- 洛谷P1809 过河问题 经典贪心问题
作者:zifeiy 标签:贪心 题目链接:https://www.luogu.org/problem/P1809 我们假设第 \(i\) 个人过河的耗时是 \(t[i]\) ,并且 \(t[i]\) ...
- mysql 第三课 jdbc基础操作
jdbc连接可以大致分为5步: 1.注册驱动 2.获取连接 3.编写语句 4.执行语句 5.关闭连接 其中可以设置参数等等. 1.我们先建一个项目目录: 其中com.etc.dao为数据访问对象 co ...
- P1066 汪老师玩卡片
题目描述 汪老师得到了一些卡片,这些卡片上标有数字0或5.现在他可以选择其中一些卡片排成一列,使得排出的一列数字组成的数最大,且满足被90整除这个条件.同时这个数不能含有前导0,即0不能作为这串数的首 ...
- 喵喵电影git操作
1.git remote 2.git remote add origin '项目地址' (origin为远程仓库名字) 3.git remote 4.git push origin master ...
- 微信小程序 image图片组件实现宽度固定 高度自适应
给img的mode设置值 注1:image组件默认宽度300px.高度225px 注2:image组件中二维码/小程序码图片不支持长按识别.仅在wx.previewImage中支持长按识别. mode ...