微任务与宏任务

最新推荐文章于 2025-06-17 08:13:33 发布

原创最新推荐文章于 2025-06-17 08:13:33 发布 · 995 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

微任务与宏任务

同步代码>微任务>宏任务

定时器任务

首先时间，每个浏览器不同，但一般最小4ms；很少会定义个位数的毫秒；

代码执行到setTimeout时，定时器模块就会记录下这个定时器，此时会开始计时，当时间到了会将回调放到任务队列里面(等待下次被调度)，等待下一次的轮询时把任务拿到主程序来执行

定时器的时间通常是不准的，因为一定要等主线程空闲了才去执行定时器任务，一定是要排队的

setTimeout(()=>{
    console.log('定时器 1')
},2000)
setTimeout(()=>{
    console.log('定时器 2')
},1000)
console.log('javascript');

微任务promise

promise构造函数这里是同步代码

红任务中产生了微任务，是在宏任务之后

setTimeout(()=>{
    console.log('settimeout')
    new Promise(resolve=>{
        console.log('settimeout promise');
        resolve()
    }).then(()=> console.log('settimeout then'))
},0)
new Promise(resolve=>{
    console.log('promise');
    resolve();
}).then(value=>{
    console.log('then')
})
console.log('javascript');

总结：

同步代码已经开始干活的代码，在主线程中立即执行的代码

微任务优先级大于宏任务；

在执行宏任务的过程中可能又产生了微任务(或宏任务)，等到下一轮轮询

dom渲染任务

dom渲染任务也可以理解为另一个宏任务，将script标签放在body的底部，使其不阻塞渲染

任务共享内存

任务是一个一个来调度的，一个一个来执行的

执行时都在一个线程里面，之前内存中的数据是可以用的，共享内存

let i=0;
setTimeout(()=>{
    console.log(++i);
},1000)
setTimeout(()=>{
    console.log(++i);
},1000)

任务轮询

function handle(){
    let i=0;
    (function run(){
        if(++i<=100){
            const div=document.querySelector('div')
            div.style.width=i+'%';
            setTimeout(run,10)
        }
        
    })();
}
handle()

<body>
    <div style="height:30px;background:red;width:0px"></div>
</body>

拆分任务

用settimeout拆分

let count = 0;
let number = 987654321;
function hd() {
    for (let i = 0; i < 10000000; i++) {
        if (number <= 0) break;
        count += number--;
    }
    if (number > 0) {
        setTimeout(hd);
        console.log(count)
        console.log(number)
    } else {
        console.log(count)
        console.log(number)
    }

}
hd()

console.log('abc')

使用promise

如果一个任务计算时间比较长，不希望影响同步代码，就可以使用异步的形式，settimeout宏任务或者promise微任务