分析JS单线程异步io回调的特性
我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺枪!
起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等.
在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定了一个事件回调函数 doCheck().
当鼠标点击这个元素的时候,触发了事件,马上执行事件绑定函数并回.
再后来是接触到jquery 的时候,大量的
$("#id").click(function(){ alert('点击事件'); });
这种jquery的语法写的越来越多似乎已经习惯了,但是你是都留意过前面的选择器只是选择过滤dom节点,接着的click就是一个事件注册,而里面的 function(){} 其实是一个参数,事件绑定函数的参数,这里面就要求你熟悉javascript的语法了.
function在javascript中是一个对象,对象就可以指世界的万事万物,所以对象可以包含很多属性,方法等.
既然是对象,那就可以当做一个参数去传递,这种函数叫做 高阶函数.
而且这种函数没有定义名称对不对,当然你可以一个名称,然后把名称传过来也是一样的,但是没有意义,因为这里的函数对象其实是一个形参,所以我们习惯的不给这种函数起名字,这就是常说的匿名函数.
接着上面的$("#id").click 说起,当点击事件被触发时,就要执行事件绑定函数.和上面直接在dom上给定onclick方法是一样的效果.
假设浏览器里有多个线程去操作脚本的话,你能想象到他的乱吗? 线程一正要去修改元素A的value值,结果没想到线程二已经把元素A从dom树删除节点,这时线程一只好操作失败报错.这样的情况是不糟透了,要么浏览器无维护多个线程数据的一致性,要么前端工程师自己去维护,所以......浏览器只有一个线程去操作dom,这样省去了很多不必要的麻烦.
setTimeout(function(){ alert('弹出'); },300); while(true){ ........ }
你觉得 300毫秒后 alert('弹出') 还有戏吗?
没有了,永远没有戏了,等待300毫秒只是骗取你的感情的.因为浏览器是单线程模式执行脚本.
一旦线程处于死循环模式下去执行 while 语句,你的setTimeout 再也不会起任何作用了.
进而我们走入了 node.js 世界,它完全保留了javascript在浏览器的特性,单线程异步回调,也正是因为这个特点它才是它,假如node.js 是一门同步语言,就算所有的npm包都是 c++ 扩展的(速度够快吧)再快你也比不过c语言处理速度是不是,那么node.js可能还没有出世就已经被php鄙视了.
正是因为它的异步回调IO,更能提高他的效率,让我想起以前学校的一种快餐店和学校食堂的对比情况:
食堂是所有学生拿着盘子在窗口排成一字型队,打饭的妹妹一个一个盛好了,挨个端上饭走了.这是同步处理结果.
学校快餐店也是学生排队点餐,但是点完餐拿上你的呼叫器就可以离开找位置去了.这样单位时间内服务员可以为很多人提供服务,而且点好餐的同学可以找位置做自己其他事情,而不用傻傻地站到窗口等饭,直到你的饭出来的那一刹那,服务器会根据单号按下编码,这时你桌上的呼叫器会响起,你去取餐就好了.这是异步处理.那个呼叫器响起就是触发事件.
单线程可以减少多线程之间状态切换引起的资源浪费和维护困难,当然也有专门的第三方包来支持多核多线程的情景,你可以自己权衡.
以上就是关于JS单线程回调的全部信息内容,如有大家在学习的时候还有其他的疑问,可以在下面的留言区域讨论。
- 【腾讯云的1001种玩法】十分钟轻松搞定云架构 · 负载均衡的几种类型
- 常用的Hadoop 文件查看工具
- 机器学习之——LINE及LargeVis可视化算法
- 开发人员看测试之细说JBehave
- 智能合约中存在的3种最常见的误解
- O'ReillyAI系列:将学习速率可视化来优化神经网络
- 再下一城,腾讯黑科技介入新零售
- 微信团队广发内部体验邀请,小程序将大火!
- 胖虎科技获1亿元融资 域名“我爱胖虎”创意十足!
- 高挺:区块链在金融领域的三个应用方向
- 条码支付迎来分级限额制 支付宝、微信纷纷响应
- 关键基础设施威胁预警,HDD声波攻击可致蓝屏
- 集成学习之随机森林通俗理解
- 深度学习CNN眼中的图片是什么样的
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 搭建简易的物联网服务端和客户端-网络控制(二十)
- LeetCode44|在每个树行中找最大值
- LeetCode43|最大层内元素和
- 搭建简易的物联网服务端和客户端-Maibu控制(二十一)
- LeetCode42|层数最深叶子节点的和
- LeetCode41|数组中数组出现的次数
- Django后台管理界面修改(源文件修改)
- 前端工程师不可不知的Nginx知识
- Django1.11 简单登录注册
- 基因表达聚类分析之初探SOM - 自组织特征图
- JMH - Java 代码性能测试的终极利器、必须掌握
- 从零搭建Spring Boot脚手架(6):整合Redis作为缓存
- 换一种姿势挖掘CORS漏洞
- 新的Spring OAuth2.0 授权服务器项目正式发布
- spring boot整合apollo