浅谈js运行机制

前言

因为js的运行机制十分重要,理解起来也十分抽象,仍还是在这里做个记录,加深自己的记忆。

总之,希望本文的内容能够对您的学习或者工作有所帮助。另,如果有任何的错误或者不足请指正!

如何理解js单线程

用大白话来讲,就是同一个时间只能做一件事

什么是任务队列

    console.log(1)
    setTimeout(()=>{
        console.log(3)
    },0)
    console.log(2)    

首先我们看下上面的代码,大家猜一下输出的是什么呢?

如果你回答的是 1 2 3,那么恭喜你,答对了,我们说说为什么他输出的是123呢,明明我的setTimeout设置为0了啊

这里我们可以引申出一个新的概念,js的任务队列

js的任务队列:因为js是单线程的,所以同一个时间只能做一件事,当js遇到异步任务的时候要先把异步任务挂起,js往后继续执行,同步任务执行完毕,然后再执行异步任务

ps:据说HTML5标准规定

  1. setTimeout的最短时间间隔是4毫秒

  2. setInterval的最短间隔时间是10毫秒,也就是说,小于10毫秒的时间间隔会被调整到10毫秒

什么是事件循环(Event Loop)

    for(var i = 0;i<4;i++){
        setTimeout(()=>{
            console.log(i)
        },1000)
    }

这里输入的又是什么呢?先说答案,4个4

从上面可知道,同步任务执行就会执行任务队列了。那么,执行到了异步任务就一定会放到任务队列吗?其实不然。

浏览器中有个定时器模块,只有当时间到了才会把setTimeout放到异步队列中。

所以for循环在执行的过程中,并没有把setTimeout真正的放到异步队列中,异步队列中没有东西,只有当时间到了,才会把他扔到异步队列中,异步队列再等待一个叫事件循环的东西来执行。

上面说到了事件循环,那他到底是什么呢?

事件循环:

  1. 所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

  2. 主线程之外,还存在一个”任务队列”(task queue)。只要异步任务有了运行结果,就在”任务队列”之中放置一个事件。

  3. 一旦”执行栈”中的所有同步任务执行完毕,系统就会读取”任务队列”,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

  4. 主线程不断重复上面的第三步。

异步任务有哪些

  1. setTimeout和setInterval

  2. DOM事件

  3. AJAX

  4. Promise

这是我的原创文章,如果觉得不错,可以打个赏~
0%