JavaScript异步编程——01-单线程和异步任务

2024-05-07 05:44

本文主要是介绍JavaScript异步编程——01-单线程和异步任务,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

单线程

JS 是单线程的

JavaScript 语言的执行是单线程的。即同一时间,只能处理一个任务。

具体来说,所谓单线程,是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个,即同一时间,只能处理一个任务。这个任务执行完后才能执行下一个。所有的任务都需要排队

JS 为何要被设计为单线程呢?原因如下:

  • 首先是历史原因,在最初设计 JS 这门语言时,多进程、多线程的架构并不流行,硬件支持并不好。

  • 其次是因为多线程的复杂性,多线程操作需要加锁,编码的复杂性会增高。

  • 而且,如果多个线程同时操作同一个 DOM,在多线程不加锁的情况下,会产生冲突,最终会导致 DOM 渲染的结果不符预期。

所以,为了避免这些复杂问题的出现,JS 被设计成了单线程语言。

浏览器是多进程、多线程的

JS代码在执行时有它的运行环境(也称之为“容器”),这个运行环境可以是浏览器,也可以是 Node.js 环境。

浏览器是多进程的,每打开一个新的 tab 标签页就会开启一个新的进程。每个进程之间是独立的,这是为了防止一个页面卡死而造成所有页面都无法响应,甚至整个浏览器强制退出。

每个进程中有很多个线程,其中有一个专门执行JS代码的线程,所以我们常说JS是单线程的,这没有说错。从JS语言的角度看,我们把这个线程称为“主线程”。

如果JS正在执行某个耗时的任务,则当前的线程会被阻塞,那应该怎么办呢?

实际上,耗时的任务并不是在主线程中执行的。因为浏览器的当前进程中有很多个线程,我们可以把耗时任务交给浏览器的其它线程来协助处理,然后在特定的时机通知主线程,该任务则会进入主线程同步完成。

比如,现在有一个三秒延迟的定时器任务。计时工作是交给浏览器的其他线程完成的,等三秒时间到了之后,通知JS主线程,该任务进入主线程进行同步执行。

同步任务和异步任务

定义

当前正在执行的任务,如果没有执行完成,它可能会阻塞其他正在排队的任务。为了解决这个问题,JS 在设计之初,将任务分成了两类:同步任务、异步任务。

  • 同步任务:在主线程上排队执行的任务。只有当前任务执行完毕,才能执行下一个任务。当前任务在没有得到结果之前,不会继续后续操作。

  • 异步任务:不进入主线程、而是进入任务队列(Event Queue)的任务,该任务无论有没有得到结果,都不会阻塞后续任务的执行。只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

代码举例:

 console.log('同步任务1');​setTimeout(() => {console.log('异步任务');}, 1000);​console.log('同步任务2');

打印结果是:

 同步任务1同步任务2异步任务

代码解释:第一行代码是同步任务,会立即执行;定时器里的回调函数是异步任务,需要等 1 秒后才会执行。假如定时器里的代码是同步任务,那需要等待1秒后,才能执行最后一行代码console.log('同步任务2'),也就是造成了主线程里的同步任务阻塞,这不是我们希望看到的。

比如说,网络图片的请求,就是一个异步任务。前端如果同时请求多张网络网络图片,谁先请求完成就让谁先显示出来。假如网络图片的请求做成同步任务,那就会出大问题,所有图片都得排队加载,如果第一张图片未加载完成,就得卡在那里,造成阻塞,导致其他图片都加载不出来。页面看上去也会很卡顿,这肯定是不能接受的。

前端使用异步编程的场景

什么时候需要等待,就什么时候用异步。常见的异步场景如下:

  • 1、事件监听(比如说,按钮绑定点击事件之后,用户爱点不点。我们不可能卡在按钮那里,什么都不做。所以,应该用异步)

  • 2、回调函数:

    • 2.1、定时器:setTimeout(定时炸弹)、setInterval(循环执行)

    • 2.2、ajax请求。

    • 2.3、Node.js:FS文件读写、数据库操作。

  • 3、ES6 中的 Promise、Generator、async/await

现在的大部分软件项目,都是前后端分离的。后端生成接口,前端请求接口。前端发送 ajax 请求,向后端请求数据,然后等待一段时间后,才能拿到数据。这个请求过程就是异步任务。

接口调用的方式

js 中常见的接口调用方式,有以下几种:

  • 原生 ajax、基于 jQuery 的 ajax

  • Promise

  • Fetch

  • axios

后续文章,我们会重点讲一下接口调用里的 Ajax,然后在 ES6 语法中学习 Promise。在这之前,我们需要先了解同步任务、异步任务的事件循环机制。

多次异步调用的顺序

  • 多次异步调用的结果,顺序可能不同步。

  • 异步调用的结果如果存在依赖,则需要通过回调函数进行嵌套。

定时器:代码示例

掌握了上面的事件循环原理之后,我们来看几个例子。

举例 1

 console.log(1);​setTimeout(() => {console.log(2);}, 1000);console.log(3);console.log(4);

打印结果:

 1342

解释:先等同步任务执行完成后,再执行异步任务。

举例 2(重要)

如果我把上面的等待时间,从 1 秒改成 0 秒,你看看打印结果会是什么。

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

打印结果:

 1342

可以看到,打印结果没有任何变化,这个题目在面试中经常出现,考的就是 setTimeout(()=> {}, 0)会在什么时候执行。这就需要我们了解同步任务、异步任务的执行顺序,即前面讲到的事件循环机制

解释:先等同步任务执行完成后,再执行异步任务。

同理,我们再来看看下面这段伪代码:

 setTimeout(() => {console.log('异步任务');}, 2000);​// 伪代码sleep(5000); //表示很耗时的同步任务

上面的代码中,异步任务不是 2 秒之后执行,而是等耗时的同步任务执行完毕之后,才执行。那这个异步任务,是在 5 秒后执行?还是在 7 秒后执行?这个作业,留给读者你来思考~

举例 3(较真系列)

 setTimeout(() => {console.log('异步任务');}, 1000);

上面的代码中,等到 1 秒之后,真的会执行异步任务吗?其实不是。

在浏览器中, setTimeout()/ setInterval() 的每调用一次定时器的最小时间间隔是4毫秒,这通常是由于函数嵌套导致(嵌套层级达到一定深度),或者是由于已经执行的 setInterval 的回调函数阻塞导致的。

上面的案例中,异步任务需要等待 1004 毫秒之后,才会从 Event Table 进入到 Event Queue。这在面试中也经常被问到。

异步任务举例

例 1:加载图片

// 加载图片的异步任务
function loadImage(file, success, fail) {const img = new Image();img.src = file;img.onload = () => {// 图片加载成功success(img);};img.onerror = () => {// 图片加载失败fail(new Error('img load fail'));};
}loadImage('images/qia nguyihao.png',(img) => {console.log('图片加载成功');document.body.appendChild(img);img.style.border = 'solid 2px red';},(error) => {console.log('图片加载失败');console.log(error);}
);

例 2:定时器计时,移动 DOM 元素

// 函数封装:定义一个定时器,每间隔 delay 毫秒之后,执行 callback 函数
function myInterval(callback, delay = 100) {let timeId = setInterval(() => callback(timeId), delay);
}myInterval((timeId) => {// 每间隔 500毫秒之后,向右移动 .box 元素const myBox = document.getElementsByClassName('box')[0];const left = parseInt(window.getComputedStyle(myBox).left);myBox.style.left = left + 20 + 'px';if (left > 300) {clearInterval(timeId);// 每间隔 10 毫秒之后,将 .box 元素的宽度逐渐缩小,直到消失myInterval((timeId2) => {const width = parseInt(window.getComputedStyle(myBox).width);myBox.style.width = width - 1 + 'px';if (width <= 0) clearInterval(timeId2);}, 10);}
}, 200);

参考链接

  • JS-同步任务,异步任务,微任务,和宏任务

  • JS 同步异步宏任务微任务、JavaScript 中事件循环的理解、javascript 事件循环机制

  • 如何实现比 setTimeout 快 80 倍的定时器?

希望各位可以点个赞点个关注,这对up真的很重要,谢谢大家啦!

这篇关于JavaScript异步编程——01-单线程和异步任务的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/966483

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码: 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口,https的端口号为443 url为统一资源定位符。CSDNhttps://mp.csdn.net/mp_blog/creation/editor