1)JS是单线程的,大部分代码都是同步编程。
2)JS中利用浏览器的多线程机制,基于单线程的EventLoop(事件循环机制)实现出异步的效果。
1)微任务 (microtask):优先级高,并且可以插队,不是先定义先执行。包括:promise.then,async/await [generator],requestAnimationFrame,observer,MutationObserver,setImmediate。
2)宏任务 (macrotask):优先级低,先定义的先执行。包括:ajax,setTimeout,setInterval,事件绑定,postMessage,MessageChannel(用于消息通讯)。
+先找微任务队列,如果微任务队列中有,先从微任务队列中,一般按照存放顺序获取并且去执行。
+如果微任务队列中没有,则再去宏任务队列中查找,在宏任务队列中,一般是按照谁先到达执行的条件,就先把谁拿出来执行。
🌰 面试题1:
- console.log('1') // 1
- async function async1() {
- console.log('2') // 2
- await setTimeout(() => {
- console.log('3') // 8
- }, 0)
- console.log('4') // 5
- }
- setTimeout(() => {
- console.log('5') // 7
- }, 0)
- async1()
- new Promise(function (resolve) {
- console.log('6') // 3
- resolve()
- }).then(function () {
- console.log('7') // 6
- })
- console.log('8') // 4
- // 结果:1 2 6 8 4 7 5 3
🌰 面试题2:
- async function async1() {
- console.log('async1 start'); // 2
- await async2();
- console.log('async1 end'); // 6
- }
- async function async2() {
- console.log('async2'); // 3
- }
- console.log('script start'); // 1
- setTimeout(function () {
- console.log('setTimeout'); // 8
- }, 0)
- async1();
- new Promise(function (resolve) {
- console.log('promise1'); // 4
- resolve();
- }).then(function () {
- console.log('promise2'); // 7
- });
- console.log('script end'); // 5
- //结果:
- script start
- async1 start
- async2
- promise1
- script end
- async1 end
- promise2
- setTimeout
🌰 面试题3:
- console.log(1); // 1
- setTimeout(() => {
- console.log(2); // 6
- Promise.resolve().then(data => {
- console.log(3); // 7
- });
- });
- new Promise((resolve) => {
- resolve()
- console.log(4) // 2
- }).then(() => {
- console.log(5); // 4
- setTimeout(() => {
- console.log(6); // 8
- });
- }).then(() => console.log(7)) // 5
- console.log(8); // 3
- // 结果:1, 4, 8, 5, 7, 2, 3, 6
- 1, 4, 8 是同步 5, 7 是微任务 2 宏任务 3 微任务 6 宏任务
* 核心答案 | 基础知识要夯实
1) 进程代表的是一个程序(浏览器开一个页卡 (Tab页) 就是一个进程);
2) 线程是用来处理处理进程中的具体事物的,如果一个程序中需要同时做好多事情,就需要开辟好多线程;
3) 一个线程同时只能做一件事情;
* 核心答案 | 基础知识要夯实
1) 浏览器是多进程的;
2) 浏览器之所以能够运行,是因为系统给它的进程分配了资源(cpu、内存);
3) 简单点理解,每打开一个Tab页,就相当于创建了一个独立的浏览器进程;
那么接下来看看它都包含了哪些线程(列举一些主要常驻线程)
1) 负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。
2) 当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。
3) 注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
也称为JS内核,负责处理Javascript脚本程序。(例如V8引擎)
1) JS引擎线程负责解析Javascript脚本,运行代码。
2) JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序。
3) 同样注意,GUI渲染线程与JS引擎线程是互斥的,所以如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。
* 核心答案 | 基础知识要夯实
JS是单线程的:浏览器只分配一个线程用来渲染JS代码。
1、JS中的代码大部分都是“同步编程”:上面的任务没有处理完成,下面的任务是无法处理的。
2、但是JS中利用浏览器的多线程机制,可以规划出“异步编程”效果。
计算程序执行的时间(预估)
1)运行监控 console.time/timeEnd(受当前电脑运行环境的影响)
2)大O表示法(提前预估)
- console.time('AAA');
- for (let i = 0; i < 99999999; i++) {}
- console.timeEnd('AAA');
真实项目中应该避免死循环 (重要)
- while (true) {}
- console.log('OK'); // 不执行:上述的死循环一直占用这“JS渲染线程”,线程空闲不下来,就处理不了其他的事情
1)设置定时器任务是同步的
2)“间隔interval这么长时间,执行定时器绑定的函数” 这个任务是异步的
3)遇到异步任务,浏览器不会等待它执行完,则继续渲染下面的代码;当等到下面代码运行完,时间也到达了执行的条件,才会把异步任务执行;
- setTimeout(() => {
- console.log("OK"); //2
- }, 1000);
- console.log('NO'); //1
interval设置为零也不是立即执行,而是浏览器都有“最快反应时间(谷歌:5~6ms IE:13~17ms)”,设置为零,最快也需要等到5~6ms左右
- setTimeout(() => {
- console.log('OK'); //2
- }, 0);
- console.log('NO'); //1
- setTimeout(() => {
- console.log(1);
- }, 20);
- console.log(2);
- setTimeout(() => {
- console.log(3);
- }, 10);
- console.log(4);
- console.time('AA');
- for (let i = 0; i < 90000000; i++) {
- // do soming
- }
- console.timeEnd('AA'); //=>AA: 79ms 左右
- console.log(5);
- setTimeout(() => {
- console.log(6);
- }, 8);
- console.log(7);
- setTimeout(() => {
- console.log(8);
- }, 15);
- console.log(9);
- // 结果:2,4,5,7,9,3,1,6,8
画图分析:( 有图有真相 )
执行顺序:同步任务 —> 微任务 —> 宏任务 (微任务、宏任务在EventQueue)
2021年3月22日-24日 深时数字地球 DDE Deep-time?Digital?Earth 国际大科学计划...
一些行业知名的首席技术官和分析师预测,超大规模架构、混合云、IT即服务、容器...
在这篇文章中,我将与你分享我从其他数据科学家以及我自己过去几年的经验中学到...
最近几周,陆续收到几位读者关于装饰器使用的提问,今天统一回复。 1. 问题 大概...
作者:Mintimate 博客: https://www.mintimate.cn Mintimates Blog,只为与你分...
大家好,我是Java进阶者,今天小编带大家一起来学习Java技术基础! 一、字符串的...
引言 相信每一个后台开发工程师在面试过程中,都曾经被问到过“MySQL的默认存储...
先来定义一个计算体重指数(BMI)的函数。体重指数就是体重与身高的平方之比,其中...
1.有一个很古老的传说,说是在北邮校园内能看到美女的人会长生不老。 2.床,请...
近期,随着春节档电影《你好,李焕英》的热映以及片中出现的贾玲母亲年轻时旧照...