实例分析javascript中的异步


Posted in Javascript onJune 02, 2020

js 异步解析

一 、js单线程分析

     我们都知道js的一大特点是单线程,也就是同一时间点,只能处理一件事,一句js代码。那为什么js要设计成单线程而不是多线程呢?这主要和js的用途有关,js作为浏览器端的脚本语言,主要的用途为用户与服务端的交互与操作dom。而操作dom就注定了js只能是单线程语言。假如js才取多线程将会出现,多个线程同时对一个dom进行操作的情况,浏览器将无法判断如何渲染。不仅js是单线程,浏览器渲染dom也是单线程的,js的执行和浏览器渲染dom共用的一个线程,这就导致了在html代码中书写js代码会造成浏览器端渲染的阻塞。例如:在html某个位置,写一个段带有alert(‘稍等'),alert 之前html已经被渲染出来,而alert之后的html被这段js阻塞了。为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完 全受主线程控制,且不可进行DOM操作。所以,这个新标准并没有改变JavaScript单线程的本质。

     所谓的js单线程,是指在浏览器中JS引擎负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。但是实际上浏览器处理js还存在其他的线程。例如:处理AJAX请求的线程、处理DOM事件的线程、定时器线程、读写文件的线程(例如在Node.js中)等等。这些线程可能存在于JS引擎之内,也可能存在于JS引擎之外,在此我们不做区分。不妨叫它们工作线程

     总结一下:js之所以才取单线程模式是为了避免DOM渲染冲突。而浏览器中执行js线程是单线程我们称它为主线程,同时还存在其它处理js的线程,我们称它为工作线程。js是单线程,但浏览器是多线程的。

二 、同步与异步

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

     简单的说,同步就是会阻塞代码的执行,而异步不会。同样拿alert('稍等') 来举例,在一段js代码中加入一段alert,如果没有点击确认,此时代码的执行就被阻塞了,大多数js代码都是同步执行的。异步则相反。那为什么js中要引入异步的概念呢,很简单,由于js的单线程,当遇到耗时的操作时如果采用同步的执行,那么我们就不可能看到如今这么流畅的web应用了。再举个简单的例子:在一条单行道上行驶着很多汽车,假如其中某一辆车出现机械故障,将会导致后面的车也无法通过,此时应该将故障的车拉入旁边的应急车道进行修复,待它修好之后再重新驶入主干道中,不会影响主干道其它行驶的汽车。所以,异步是js单线程下解决耗时问题的一种“无可奈何”的解决方案。也是一种近乎完美的解决方案。

三、js异步与事件轮询

     事件轮询(event loop)是js异步的实现方式。简而言之,在js单线程中分为两种任务,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入”任务队列”(task queue)的任务,只有当主进程中所有同步任务执行完毕,且”任务队列”通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。事件轮询就是将主线程中的异步任务挂载到任务队列中,再待到合的时机,将任务队列中的异步函数拉到主进程来执行的这么一个流程。

js中异步操作主要有:

     1、定时任务(setTimeout、setInterval)

     2、网路请求(ajax、动态<img>加载)

     3、事件绑定(click,focus,change等)

 js异步具体执行流程分析

实例分析javascript中的异步

     大家看一下左边代码,两个console.log操作,两个setTitmeout 操作。按照我们对异步的理解,在主线程中 console.log 为同步任务从上到下依次执行,所以在最先打印的是3,当执行到第一setTimeout时,浏览器js引擎会自动将setTimeout放入工作线程中。ps:在工作线程中,待0.1s后将setTimeout 的回调函数放入异步队列中;主进程中下一个setTimeout ,但是它的延迟时间为0,这并不意味着它能同步执行,它依旧经历如上两个过程,从工作进程中,0s后放入任务队列。接下来是执行console.log(3);当主进程中任务已经执行完毕。任务队列中有一个监视器,随时监视着主进程和任务队列中的异步函数情况,当主进程执行完毕,就判断任务队列中是否有需要执行的函数,如果有就按照队列现后顺序依次放入主进程中,以此往复。

     所以上面代码,依次打印为:3,3,2,1。也就是先将非异步执行完,再回过头来执行异步函数,异步函数执行顺序为队列规则,先进先出,也就是先进入队列的异步函数将优先执行。

     思考:如果一段代码中现后存在一个ajax 和一个1s的定时函数,那么他们谁先执行呢? 答案是:不确定。因为不确定ajax请求完毕进入队列的时间。小伙伴们可别被面试管套路了哦。哈哈。

四、前端异步的写法

     1、回调函数,也就是在setTimeout或者ajax中添加回调函数,待到指定时间后或者请求到数据后再执行回调。

     2、ES6标准:Promise,ES7:async await   这两种都只是js事件轮询实现异步的一种优雅的 方式,将异步变为同步的写法,但都并未改变js异步本质。

以上就是实例分析javascript中的异步的详细内容,更多关于javascript 异步的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 #Javascript
js简单实现自动生成表格功能示例
Jun 02 #Javascript
JS中准确判断变量类型的方法
Jun 01 #Javascript
Vuex中的Mutations的具体使用方法
Jun 01 #Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 #Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 #Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 #Javascript
You might like
随机头像PHP版
2006/10/09 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python实现查询苹果手机维修进度
2015/03/16 Python
深入了解Python数据类型之列表
2016/06/24 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python对文件的操作方法汇总
2020/02/28 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
人事主管的岗位职责
2013/11/16 职场文书
质量整改报告范文
2014/11/08 职场文书