js前端面试之同步与异步问题详解


Posted in Javascript onApril 03, 2019

前言

我本来是打算写一篇co源码精读(为啥读co,因为它短),然鹅发现自己存在一系列基础问题没有搞透彻,打算写一个js基础系列文章,总结自己的理解(copy),希望与你在学习路上一同进步。首先问问自己当面试官问到js中的同步和异步,这个问题该怎么回答?理解一个问题无非是what-why-how

js同步和异步问题是什么-->为什么会产生异步问题-->如何解决。

一、JavaScript起源

技术的出现,和应用场景密切相关的。JavaScript诞生于1995年。当时,它的主要目的是处理以前由服务器端语言(如Perl)负责的一些输入验证操作。在JavaScript问世之前,必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域,是否输入了无效的值。Netscape Navigator希望通过JavaScript来解决这个问题。起初名字为livescript,但是后来Netscape(网景)与Sun公司成立了一个开发联盟。Netscape为了搭上媒体热炒Java的顺风车,临时把LiveScript改名为JavaScript,所以从本质上来说JavaScript和Java没什么关系(趁热度)。

如今,JavaScript的用途早已不再局限于简单的数据验证,而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力。今天的JavaScript已经成为一门功能全面的编程语言

总结:js最初的用途是为来实现用户与浏览器的交互

二、JS为何是单线程的?

JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成这门语言的核心特征,将来也不会改变。

注:所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。

三、计算机的同步与异步(重点)

计算机领域中的同步(Synchronous)和异步(Asynchronous)和我们生活中的同步和异步的概念是恰好相反的,感觉是翻译要背这个锅。生活中的同步,突出的是‘同',相同的步伐,是咱俩一起行动,比如一起去逛街吃饭饭睡觉觉。异步则是你忙你的,我忙我的,步调不致且互不干扰。难到计算机里的同步和异步不是这样?确实不是。

计算机的同步就好比:你去外地上学人生地不熟,突然生活费不够了;此时你决定打电话回家,通知家里转生活费过来,可是当你拨出电话时,对方一直处于待接听状态(即:打不通,联系不上),为了拿到生活费,你就不停的oncall、等待,最终可能不能及时要到生活费,导致你今天要做的事都没有完成,而白白花掉了时间。
计算机的异步就是:在你打完电话发现没人接听时,猜想:对方可能在忙,暂时无法接听电话,所以你发了一条短信(或者语音留言,亦或是其他的方式)通知对方后便忙其他要紧的事了;这时你就不需要持续不断的拨打电话,还可以做其他事情;待一定时间后,对方看到你的留言便回复响应你,当然对方可能转钱也可能不转钱。但是整个一天下来,你还做了很多事情。或者说你找室友临时借了一笔钱,又开始happy的上学时光了。

总结:计算机中的同步就是排队等待,假如你是第一百零一个备胎,那你只能等前面的一百个爆了之后才能‘处理'你。异步就是,尽管你是第一百零一个,她还是能照顾到你的感受。

四、js单线程为什么会有'异步'问题

看完前面的铺垫你是否会产生这些疑问,JS是单线程的,那么他是如何是实现异步操作的?AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?不急慢慢来

  • js是同步的?

是的,单线程,那肯定只能同步(排队)执行咯

  • js为什么需要异步?

如果JS中不存在异步,只能自上而下执行,万一上一行解析时间很长,那么下面的代码就会被阻塞。

对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验

  • js单线程又是如何实现异步的呢?

通过事件循环(event loop)实现'异步'

经典问题:

console.log('1')
setTimeout(function(){
 console.log('2')
},0)
console.log('3') 
// 1,3,2

也就是说,setTimeout里的函数并没有立即执行,而是延迟了一段时间,满足一定条件后,才去执行的,这类代码,我们叫异步代码。

所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务

js前端面试之同步与异步问题详解

虽然JS是单线程的但是浏览器的内核是多线程的,在浏览器的内核中不同的异步操作由不同的浏览器内核模块调度执行,异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同,如 onclick, setTimeout, ajax 处理的方式都不同,这些异步操作是由浏览器内核的 webcore 来执行的,webcore 包含上图中的3种 webAPI,分别是 DOM Binding、network、timer模块。

按照这种分类方式:JS的执行机制是

  • 首先判断js代码是同步还是异步,同步就进入主进程,异步就进入event table
  • 异步任务在event table中注册函数,当满足触发条件后,被推入event queue
  • 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中

以上三步循环执行,这就是event loop

总结:同步可以保证顺序一致,但是容易导致阻塞;异步可以解决阻塞问题,但是会改变顺序性,根据不同的需要去写你的代码。

每周都会持续更新,您的点赞,收藏,关注三连击是我的动力。

决定了前方的路怎么走,就不要总回头看,peace&love。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 #Javascript
es6 filter() 数组过滤方法总结
Apr 03 #Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 #Javascript
javascript实现小型区块链功能
Apr 03 #Javascript
vue插槽slot的理解和使用方法
Apr 03 #Javascript
react写一个select组件的实现代码
Apr 03 #Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 #Javascript
You might like
PHP parse_url 一个好用的函数
2009/10/03 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python 调用Java实例详解
2017/06/02 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
python实现经典排序算法的示例代码
2021/02/07 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
工程管理专业毕业生自荐信
2014/01/24 职场文书
分公司经理任命书
2014/06/05 职场文书
电台广播稿范文
2015/08/19 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android