JS执行事件
先贴出几个名词:
同步任务: 在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务
异步任务: 不进入主线程,而进入“任务队列”的任务,只有任务队列通知主线程,某个异步队列可以执行了,该任务才会进入主线程执行。
异步执行的机制如下:
(1)所有同步任务都在主线程上执行,形成一个执行栈
(2)主线程之外,还存在一个“任务队列”,只有异步任务有了运行结果,就在“任务队列”中放置一个事件
(3)一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,看看里面有哪些事件。那些对应的异步任务,于是结束等待 状态,进入执行栈
(4)主线程重复第3步
事件和回调函数
“任务队列”是一个事件的队列,IO设备完成一项任务,就在“任务队列”中添加一个事件,表示相关的异步任务可以进入执行栈了。主线程读取“任务队列”,就是读取里面有哪些事件。
“任务队列”中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(比如鼠标点击,页面滚动)。只要制定过回调函数,这些事件发生时就会进入任务队列,等待主线程读取。
JS是单线程的,单线程即任务是串行的,后一个任务需要等待前一个任务执行完毕之后才能开始执行,这样会出现长时间的等待。
在前端工作中我们经常说异步加载,异步刷新,如ajax,setTimeout等,这些任务并不消耗CPU,而是一种空等,造成了资源浪费,而异步的出现则是为了解决这种问题。计算机通过将任务交给相应的异步模块去处理,主线程的效率大大提升,可以并行的去处理其他的操作。
js是单线程语言,浏览器只分配给js一个主线程,用来执行任务(函数),但一次只能执行一个任务,这些任务形成一个任务队列排队执行等候。但前端的某些任务是非常耗时的,比如网络请求,定时器和事件监听,如果让他们和别的任务一样,老老实实排队等待执行,执行效率会非常低,甚至导致页面假死,所以浏览器为这些耗时的任务开辟了另外的线程,主要包括http请求,浏览器定时触发器,浏览器事件触发线程。
那么单线程的js引擎是怎么配合浏览器内核处理这些异步事件呢?
这涉及到浏览器内核的处理方式:
浏览器内核实现允许多个线程异步执行,这些线程在内核控制下相互配合保持同步。(图来自于http://blog.csdn.net/kfanning/article/details/5768776 )
setTimoeout
setTimeout(fn,0),指定某个任务在主线程最早可得大空闲时间执行,将事件插入了任务队列,只有等到执行栈执行完毕后,主线程才会去任务队列中取
JS执行事件的更多相关文章
- JS执行机制--事件循环--笔记
JS的解析是由浏览器中的JS解析引擎完成的.JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始.但是又存在某些任务比较耗时,如IO读写等, ...
- 使用CEfSharp之旅(2) js前台事件执行后台方法
原文:使用CEfSharp之旅(2) js前台事件执行后台方法 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https://blo ...
- js autocomplete输入延迟触发执行事件
需求:延迟查询,autocomplete延迟触发执行事件.当有下一个事件开始时,本次事件中断.目的是为了防止调用服务器过于频繁. var timeout = 0;//延时处理 $("#cus ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- js关于事件
摘要:事件在Web前端领域有很重要的地位,很多重要的知识点都与事件有关.本文旨在对常用的事件相关知识做一个汇总和记录. 在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
- js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- 理解Node.js的事件轮询
前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生 正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操 ...
- node.js 的事件机制
昨天到今天, 又看了一边node 的事件模块, 觉得很神奇~ 分享一下 - -> 首先, 补充下对node 的理解: nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发 ...
随机推荐
- CF615D Multipliers [数学]
tags:[计数原理][乘法逆元][归纳の思想]题解(复杂度:O(mlogm)):棘手之处:n的约数多到爆炸.因此我们不妨从因子的角度来分析问题.对n分解质因数得:n = p1^a1 * p2^a2 ...
- Linux之环境变量
1. 变量的显示与设置 显示变量 echo \(PATH</font></code><br/> 取消变量 <code><font color=&q ...
- 2017华为机试题--Floyd算法
小K是X区域的销售经理,他平常常驻"5"城市,并且经常要到"1"."2"."3"."4"." ...
- MCDownloader(iOS下载器)说明书
示例 前言 很多iOS应用中都需要下载数据,并对这些下载的过程和结果进行管理,因此我才有了写这个MCDownloader的想法.在IOS 文件下载器-MCDownloadManager这篇文章中,我使 ...
- Entity Framework快速入门--IQueryable与IEnumberable的区别
IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IQueryable 接口 ...
- OpenDigg安卓开源项目月报201704
由OpenDigg 出品的安卓开源项目月报第一期来啦.我们的安卓开源月报集合了OpenDigg一个月来新收录的优质安卓开源项目,方便安卓开发人员便捷的找到自己需要的项目工具. DiscreteScro ...
- Java使用递归找出某目录下的所有子目录以及子文件
/* 使用递归找出某目录("C:\\JavaProducts")下的所有子目录以及子文件 */ import java.util.*; import java.io.*; publ ...
- Html 经典布局(三)
经典布局案例(三): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- java抽象类和抽象方法之间的关系
抽象类和抽象方法之间的关系有抽象方法的类,一定是抽象类:抽象类不一定有抽象方法当子类继承抽象类时,必须要将抽象类中的抽象方法全部实现(或者称为重写),否则子类依然是抽象类因为子类是继承父类全部内容,所 ...
- java线程的实现
一共有两种方法Thread类和Runnable接口,相对来讲,更趋向于用Runnable因为一个类可以实现多个接口,但是只能继承一个类,所以相对来说倾向用Runnable 第一种方法:用Thread其 ...