浏览器交响曲 (一)浏览器中的js执行机制
浏览器的工作原理
- 浏览器中的js执行机制
- 单线程的含义
- 同步、异步
- 完了吗?事情并非如此
- 所以执行的机制是怎样的?(宏任务、微任务)
- 个人理解:
- 希望过路大佬不吝赐教
浏览器中的js执行机制
今天在网上看到讨论浏览器的工作原理,我发现学习前端这么久了,竟然没有系统的学习过浏览器,知道的都是些零零散散的东西,于是趁现在空余时间,赶紧瞅瞅。
单线程的含义
什么是线程?什么是进程?
进程包含多个线程,进程是操作系统最小的执行单位。
浏览器是一个多进程(multi-process),一个浏览器只有一个主进程(Browser Process)负责管理Tabs(窗口),协调Renderer Process 和其他Process
渲染进程(Renderer Process)是一个多线程的 它的主线程负责渲染页面和执行js以及事件循环 渲染进程的主线程是一个单线程(同一时间js执行线程和ui渲染线程只有一个在主线程上)
同步、异步
正是因为js是单线程的,很多的任务只能一个一个排队执行这对用户体验不好,所以就将任务分成了同步任务和异步任务。
简单的理解:
同步:获取元素、console.log()、alert、定义 变量…
异步: 事件、定时器、延时器 …
- 判断任务是同步还是异步
- 同步任务直接在主线程执行、异步任务进入事件表并等待一个条件(时间,或者用户操作:例如 点击)。
- 注册回调函数 异步任务进入事件队列
- 当主线程空闲时(同步执行完成),事件队列中的任务才被推入主线程执行。
完了吗?事情并非如此
console.log('1');setTimeout(function() {console.log('第一个setTimeout');process.nextTick(function() {console.log('3');})new Promise(function(resolve) {console.log('第一个setTimeout内的promise');resolve();}).then(function() {console.log('第一个setTimeout内的promise的then')})
})
process.nextTick(function() {console.log('6');
})
new Promise(function(resolve) {console.log('7');resolve();
}).then(function() {console.log('8')
})setTimeout(function() {console.log('第二个setTimeout');process.nextTick(function() {console.log('10');})new Promise(function(resolve) {console.log('第二个setTimeout的promise');resolve();}).then(function() {console.log('第二个setTimeout的promise的then')})
})
其运行结果如下
实际上运行的结果并不符合咱们同步异步分类
所以执行的机制是怎样的?(宏任务、微任务)
我们对任务有了更加精细的分类
- macro-task(宏任务):包括整体代码script,setTimeout,setInterval
- micro-task(微任务):Promise,process.nextTick
进入整体代码(宏任务)后开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务.并且也要按照同步异步一起嵌套着来。
对照以上代码,其执行顺序为
//A.先执行同步代码//1.执行宏任务(整段script代码)console.log('1')//2.执行微任务(promise)console.log('7');//3.执行微任务process.nextTick
//Node执行完所有同步任务才执行process.nextTick的任务队列console.log('6');//4. 执行异步代码 promise的then方法console.log('8')
//B.执行异步代码//1.执行第一个定时器中的宏任务console.log('第一个setTimeout')//2.执行第一个定时器中的微任务console.log('第一个setTimeout内的promise')//3.执行第二个定时器中的宏任务console.log('第二个setTimeout')//4.执行第二个定时器中的微任务console.log('第二个setTimeout内的promise')//5.当所有的同步任务执行后执行process.nextTick//第一个定时器中的process.nextTickconsole.log('3');//第二个定时器中的process.nextTickconsole.log('10');//6.执行异步then函数//先执行第一个定时器中的console.log('第一个setTimeout内的promise的then')//先执行第二个定时器中的console.log('第二个setTimeout内的promise的then')
个人理解:
1.先执行同步宏任务,再执行同步微任务,其次是异步微任务
2.执行异步宏任务,再执行同步微任务,其次是异步微任务
希望过路大佬不吝赐教
浏览器交响曲 (一)浏览器中的js执行机制相关推荐
- JavaScript中BOM简介及其对象、js执行机制
目录 BOM简介 什么是BOM DOM和BOM的区别 BOM的构成 Window对象的常见事件 窗口加载事件 调整窗口大小事件 定时器函数 setTimeout( )定时器 停止setTimeout( ...
- 同步异步、JS执行机制、事件循环
文章目录 单线程 同步 异步 同步任务 异步任务 JS执行机制 异步进程处理 事件循环-event loop(这里主要是说浏览器事件循环) 单线程 JS的一大特点就是单线程,也就是同一时间内只能做一件 ...
- JS 执行机制 详解(附图)
一.JS是单线程 JS语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.这是JS这门脚本语言诞生的使命所致--用来处理页面中用户的交互,以及操作DOM而诞生的. 单线程就意味着,所有任务需要 ...
- Js执行机制——同步和异步
JS是单线程 JavaScript 语言的一大特点就是单线程,同一个时间只能做一件事.JavaScript 是为处理页面中用户的交互,以及操作DOM 而诞生的,比如我们对某个DOM元素进行添加和删除操 ...
- JS执行机制、同步和异步、宏观任务和微观任务
1. JS 是单线程 JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. 这是因为 Javascript 这门脚本语言诞生的使命所致--JavaScript 是为处理页 ...
- JavaScript系列之JS执行机制
文章の目录 1.JS是单线程 2.一个问题 3.同步和异步 3.1.同步 3.2.异步 3.3.同步和异步的本质区别 3.4.同步任务 3.5.异步任务 4.JS执行机制 5.示例 6.事件循环 7. ...
- 【JavaScript】JS执行机制微任务和宏任务
文章目录 一.了解JS执行机制 二. 异步任务(宏任务.微任务) 1.宏任务 2.微任务 三.实操演练 解析: 一.了解JS执行机制 在学习 promise(期约) 之前,我们需要了解JS的执行机制, ...
- [react] react中的setState执行机制是什么呢?
[react] react中的setState执行机制是什么呢? 1.将setState传入的partialState参数存储在当前组件实例的state暂存队列中. 2.判断当前React是否处于批量 ...
- 【JavaScript】JS执行机制--同步与异步
目录 单线程 同步与异步 事件循环 单线程 JavaScript语言具有单线程的特点,同一个时间只能做一件事情.这是因为JavaScript脚本语言是为了处理页面中用户的交互,以及操作DOM而诞生的. ...
最新文章
- Java中多线程概念详解
- 深入浅出python机器学习_6.3.1_随机森林实例——要不要和相亲对象进一步发展
- spring cloud学习进阶篇:Spring Cloud Sleuth + Zipkin 实现分布式跟踪解决方案
- [转]IntelliJ IDEA 2019.3正式发布,给我们带来哪些新特性?
- 【C++深度剖析教程37】类模板的概念和意义
- 简评知乎的优点与不足
- Hibernate写hql语句与不写hql语句的区别?
- 软件工程教学博客 (备份)
- 判断是否为IE浏览器(方法一)
- “==”和“===”,难道不是多一个的区别吗?
- 下一代AirPods可能就可以监测你的健康状况了
- mac打包python3程序
- Python爬虫:使用Appium在移动端抓取微博数据
- 计算机随机试题是这么随机的,用 Excel 生成随机抽题的考试试卷
- 皮尔森 统计学相关性分析_统计学之三大相关性系数(pearson、spearman、kendall)...
- YARN——NM重启后的任务恢复
- 传说中开场晕过去一千多人的迈克杰克逊演唱会,有生之年请看下这个视频
- 互联网寒冬,那些不怕失业的程序员们,都有什么技能?
- 中国历史上十大经典遗言
- MM01 物料主数据批导
热门文章
- Maven手工安装jar包到本地仓库
- HDFS成员的工作机制
- MATLAB R2019b利用Application Compiler打包文件无法识别runtime问题(亲测可行)
- [量化-029]陈光明投资哲学整理
- IT外企那点儿事(13): 你总是在画饼吗?
- 无线通讯 cmt2150A 简介 1527协议
- [洛谷 P4084 USACO17DEC] Barn Painting G (树形dp经典)
- L1-5 试试手气(c++、数组)
- Tomcat 输入http://localhost:8080网页打不开
- iOS 客户端与服务端做时间同步