JS同步与异步

管乐明
516 阅读5分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

引子

有这么一道经典的面试题：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i)
    }, 1000);
}
​
console.log(i);
​
//请问输出结果是什么？
​

一、程序、进程、线程

image-20201121032222976.png

1、程序（Program）
  • 程序是为了实现一个特定的目标而设计的一组可操作的工作步骤,对于计算机而言,程序就是系统可以识别的一组有序的指令。
  • 程序通常文件的方式保存在硬盘等存储设备中，是静态保存的代码。
2、进程（Process）

image-20201121034054827.png

  • 运行中的程序就是进程。 当程序在执行时，就会被操作系统载入内存中，交给CPU去处理，此时就会产生进程。

  • 进程是动态的，需要消耗CPU、内存等系统资源

  • 进程是操作系统分配资源的最小单位，是应用程序运行的载体。

  • 一个程序可以有一个或多个进程，进程之间是相互独立的

    打开window的资源管理器，可以看到进程列表。通常一个应用程序对应一个或多个进程。例如

    下图中的chrome浏览器就对应多个进程。所以说浏览器是多进程的，而浏览器之所以能够运

    行，是因为系统给它的进程分配了资源（CPU、内存）。

image-20201121035051371.png

3、线程(thread)
  • 线程是操作系统能够进行运算调度的最小单位。
  • 线程被包含在进程之中，是进程中的实际运作单位。
  • 一条线程指的是进程中一个单一顺序的控制流，一个进程中可以并发多个线程，每条线程执行不同的任务
  • 线程之间资源共享，可以减少IPC（Inter-Process Communication，进程间通信）资源的消耗
  • 在早期的操作系统中并没有线程的概念，进程是能拥有资源和独立运行的最小单位，也是程序执 行的最小单位。任务调度采用的是时间片轮转的抢占式调度方式，而进程是任务调度的最小单 位，每个进程有各自独立的一块内存，使得各个进程之间内存地址相互隔离。后来，随着计算机 的发展，对CPU的要求越来越高，进程之间的切换开销较大，已经无法满足越来越复杂的程序的 要求了，于是就发明了线程。
  • 一个进程可以有一个或多个线程。 可以想想车站的多窗口售票，每个窗口可以看作一个线程，多窗口共同协作完成人售票任务

二、JS单线程（single thread）

进程可以看作是一个工厂，工厂有它的独立资源，工厂之间相互独立

线程是工厂中的工人，多个工人协作完成任务，工厂内有一个或多个工人，工人之间共享空间。

如果工厂中有多个工人，我们称之为多线程

如果工厂中只有一个工人，我们称之为单线程

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

  • 所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推

  • JavaScript为什么是单线程？

    • JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？ 所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

三、异步任务&同步任务

image-20201121042006316.png

  • 单线程带来的问题？

    • 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
    • 如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备/用户的读写操作）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。
    • JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

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

    • 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
    • 异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行

image-20201121043459408.png

四、JS任务处理机制

JS代码处理任务主要依赖于任务队列和事件循环

  • 任务队列：任务队列是一个先进先出的队列，它里面存放着各种任务。

  • 事件循环：事件循环是指主线程重复从任务队列中取任务、执行任务的过程。

  • JS任务执行机制：

    • 首先判断js代码是同步还是异步,同步就进入主线程,异步就进入event table(事件表)。

    • 异步任务在event table中注册函数,当满足触发条件后,被推入event queue(事件队列)

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

    • 主线程之外，事件触发线程管理着这个事件任务队列。

    • 一旦主执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取事件任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

image-20201121045046841.png

五、常见问题

  1. 问：js为什么需要异步?

    答：如果JS中不存在异步,只能自上而下执行,万一上一行解析时间很长,那么下面的代码就 会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验

  2. 问： js单线程又是如何实现异步的呢? 答：通过事件循环机制来实现异步任务的执行

  3. 问： 异步任务有哪些呢？ 答：DOM中的定时器setTimeout和setInterval; DOM事件绑定; Ajax操作; NodeJS中的fs文件读写等。

七、案例分析

  • 案例1：定时器问题

    console.log(1);
​
function fn() {
    console.log(2);
}
​
setTimeout(function() {
    console.log(3);
}, 200);
​
setTimeout(function() {
    console.log(4);
}, 300);
​
​
setTimeout(function() {
    console.log(5)
    setTimeout(function() {
        console.log(6);
    }, 100);
}, 0);
​
fn();
​
console.log(7);
​
//请问输出结果是什么？

  • 案例分析2：元素索引问题

    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

    var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function() {
        console.log(i)
    }
}
​
//请问点击各个li标签元素时，输出结果是什么？

八、 补充知识

  • 编程语言中，函数调用函数本身，则该函数称为递归函数

  • 必须具备判断是否执行递归调用的条件

  • 终止函数的递归调用时，需把目前流程的主控权交回上一层函数执行

  • 函数递归调用最大的好处在于可以精简程序中繁杂重复调用程序

image-20201121065540218.png

思考1：

function fun(i) {
    console.log(i);
    if (i > 0) {
        fun(i - 1);
    } else {
        console.log('\n ');
    }
    console.log(i);
}
fun(3);
​
// 请问输出结果是什么？3210\n0123

思考2：利用递归求1~n的阶乘

// 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n

思考3：利用递归求斐波那契数列

斐波那契数列（Fibonacci sequence），又称黄金分割数列、因数学家莱昂纳多·斐波那契（Leonardoda Fibonacci）以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：0、1、1、2、3、5、8、13、21、34、…… 这个数列从第3项开始，每一项都等于前两项之和

​
// 利用递归函数取斐波那契数列(兔子序列)对应位置的值 ，比如用户输入3就得到1，输入5得到3，输入6得到5...
​

思考4：利用递归遍历数据

// 输入商品id号,就可以返回对应的商品数据对象
 var data = [{
        id: 1,
        name: '家电',
        goods: [{
            id: 11,
            gname: '空调',
            goods: [{
                id: 111,
                gname: '格力'
            }, {
                id: 112,
                gname: '美的'
            }]
​
        }, {
            id: 12,
            gname: '洗衣机',
            goods: [{
                id: 121,
                gname: '西门子'
            }, {
                id: 122,
                gname: '海尔'
            }]
        }]
    }, {
        id: 2,
        name: '服饰',
        goods: [{
            id: 21,
            gname: '女装',
            goods: [{
                id: 211,
                gname: '连衣裙'
            }, {
                id: 212,
                gname: '旗袍'
            }, ]
​
        }, {
            id: 22,
            gname: '男装',
            goods: [{
                id: 221,
                gname: '西装'
            }, {
                id: 222,
                gname: '运动装'
            }, ]
​
        }]
    }];
​
​
avatar
文章
阅读
粉丝