美文网首页
js 事件循环机制

js 事件循环机制

作者: 金桔柠檬加冰 | 来源:发表于2023-01-06 11:29 被阅读0次

线程和进程

线程:线程是CPU调度的最小单位

进程:进程是资源分配的最小单位

背景:进程和线程不是同一个层面的概念,线程是进程的一部分,线程主抓中央处理器执行代码的过程,其余的资源的保护和管理由整个进程去完成

任务队列,任务分类

定义:所有的任务可以分为同步任务异步任务。同步任务,立即执行的任务,同步任务会直接进入到主线程中执行;异步任务,异步任务会通过任务队列的机制(先进先出)来进行协调

异步任务:宏任务(macro-task)和微任务(micro-task)

cmd-markdown-logo cmd-markdown-logo

执行顺序:先执同步任务,再执行异步任务;先执行微任务,再执行宏任务

宏任务(macro-task) 微任务(micro-task)
script promise.[ then/catch/finally ]((非new Promise))
setTimeout process.nextTick(Node.js 环境)
setInterval MutaionOberver(浏览器环境)
setImmediate(Node.js 环境) Object.observe
IO操作 x
UI交互事件 x
postMessage x
MessageChannel x

事件循环

定义:主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。不断重复的过程就是Event Loop (事件循环)

js是单线程

浏览器是多进程的,浏览器每个tab标签都代表一个独立的进程,其中浏览器渲染进程(浏览器内核)属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等。其包含的线程有:GUI渲染线程(负责渲染页面,解析HTML,CSS构成DOM树)、JS引擎线程、事件触发线程、定时器触发线程、http请求线程等主要线程

注意:js设计为单线程还是跟他的用途有关,如果js设计为多线程,那么同时修改和删除同一个dom,浏览器该如何执行。

js为什么需要异步,如果js中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。导致用户体验很差

练习题

1、

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('asnyc1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(() => {
    console.log('setTimeOut');
}, 0);
async1();
new Promise(function (reslove) {
    console.log('promise1');
    reslove();
}).then(function () {
    console.log('promise2');
})
console.log('script end');

正确答案

script start
async1 start
async2
promise1
script end
asnyc1 end
promise2
setTimeOut

2、

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

正确答案:1,7,6,8,2,4,3,5,9,11,10,12

async/await

async关键字的函数回返回一个promise对象,如果里面没有await,执行起来等同于普通函数;如果有awaitasync函数并没有很厉害

await关键字要在async关键字函数的内部,await写在外面会报错;await如同他的语意,就是在等待,等待右侧的表达式完成。此时的await会让出线程,阻塞async内后续的代码,先取执行async外的代码。等外面的同步代码执行完毕,才会执行里面的后续代码。就算await的不是promise对象,是一个同步函数,也会等这样的操作

引用

相关链接:https://www.jianshu.com/p/184988903562

相关文章

  • js事件循环

    js 是单线程的, js 的异步事件就是依赖于事件循环机制 事件循环 首先,我们来解释下事件循环是个什么东西: 就...

  • 2019-03-28

    JS 事件循环机制 - 任务队列、web API、JS主线程的相互协同 这篇文章的核心是分析js的事件循环,在此我...

  • Vue源码分析—响应式原理(四)

    nextTick JS 运行机制 JS 执行是单线程的,它是基于事件循环的。事件循环大致分为以下几个步骤: 所有同...

  • node 事件

    1、事件 1.1普通事件的使用 1.2、Node.js 的事件循环机制解析 1)Node 由事件循环开始,到事件循...

  • js 事件循环机制

    事件循环机制: 以任务队列形式,同步任务,异步任务 同步任务:在主线程上排队的任务,前一个执行完,执行后一个 异步...

  • js事件循环机制

    程序开始执行之后,主程序开始执行同步任务,碰到异步任务就把它放到任务队列中,等到同步任务全部执行完之后,js引擎就...

  • js 事件循环机制

    日期:2020 年 7 月 10 日 js 事件循环机制 前言 众所周知,JavaScript 是一门 单线程 的...

  • JS事件循环机制

    1、事件循环 图中heap表示堆和stack表示执行栈,web apis表示一些异步事件,callback que...

  • js事件循环机制

    基本知识 js是单线程的,只有一个主线程处理逻辑 事件循环的作用 保证主线程, 有序并高效 或非阻塞 的处理 在j...

  • js事件循环机制

    1. 什么是事件循环? js引擎并不是独立运行的,它运行在宿主环境中,对多数开发者来说通常就是web浏览器。经过最...

网友评论

      本文标题:js 事件循环机制

      本文链接:https://www.haomeiwen.com/subject/voxjcdtx.html