js的执行机制的总结（面试---wepAPI04）

目录

js的执行机制

1.同步与异步

2.同步任务和异步任务

2.1同步任务

2.2异步任务

3.js执行机制

---

js的执行机制

JS 是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

问题？-----以下代码执行的结果是什么？

   // 第一个问题
        console.log(1); 

        setTimeout(function() {

            console.log(3);  

        }, 1000);

        console.log(2);

输出结果：1,2,3

   // 2. 第二个问题
        console.log(1);

        setTimeout(function() {

            console.log(3);

        }, 0);

        console.log(2);


输出1,2,3

    // 3. 第三个问题
        console.log(1);
        document.onclick = function() {
            console.log('click');
        }
        console.log(2);
        setTimeout(function() {
            console.log(3)
        }, 3000)

注：输出结果1,2，click，3或者1,2,3，click。因为点击事件只有当你触发了才发生。

1.同步与异步

同步：就是等前一个任务结束在执行下一个任务。

异步：就是前一个任务会花费很多时间，在做这件事的时候还可以进行其他的事。

他们的本质区别： 这条流水线上各个流程的执行顺序不同。

2.同步任务和异步任务

JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是：
    在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是：
    不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

2.1同步任务

同步任务都在主线程上执行，形成一个执行栈。

执行栈：在js执行的时候会把所有的代码放到执行栈，然后把定时器的和注册事件的单独拿出来-）

2.2异步任务

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

3.js执行机制

1. 先执行执行栈中的同步任务。

2. 异步任务（回调函数）放入任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，

于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。