先贴出几个名词:

同步任务: 在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务

异步任务:   不进入主线程,而进入“任务队列”的任务,只有任务队列通知主线程,某个异步队列可以执行了,该任务才会进入主线程执行。

 异步执行的机制如下:

    (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执行事件的更多相关文章

  1. JS执行机制--事件循环--笔记

    JS的解析是由浏览器中的JS解析引擎完成的.JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始.但是又存在某些任务比较耗时,如IO读写等, ...

  2. 使用CEfSharp之旅(2) js前台事件执行后台方法

    原文:使用CEfSharp之旅(2) js前台事件执行后台方法 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https://blo ...

  3. js autocomplete输入延迟触发执行事件

    需求:延迟查询,autocomplete延迟触发执行事件.当有下一个事件开始时,本次事件中断.目的是为了防止调用服务器过于频繁. var timeout = 0;//延时处理 $("#cus ...

  4. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  5. js关于事件

    摘要:事件在Web前端领域有很重要的地位,很多重要的知识点都与事件有关.本文旨在对常用的事件相关知识做一个汇总和记录. 在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一 ...

  6. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  7. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  8. 理解Node.js的事件轮询

    前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生 正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操 ...

  9. node.js 的事件机制

    昨天到今天, 又看了一边node 的事件模块,  觉得很神奇~  分享一下  - -> 首先, 补充下对node 的理解: nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发 ...

随机推荐

  1. ng指令控制一个元素的影藏的与显示几种方法的使用

    在ng中我们控制一个元素的显示与隐藏的方法: (1):ng-show=true/false 解释:ng-show使用的是display="block"/"none&quo ...

  2. Linux命令速查大全

    常用基本命令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir 创建目录 -p 创建目录,若无父目录,则创建p(par ...

  3. java开发中经典的三大框架SSH

    首先我们要明白什么是框架为什么用?相信一开始学习编程的时候都会听到什么.什么框架之类的:首先框架是一个软件半成品,都会预先实现一些通用功能,使用框架直接应用这些通用功能而不用重新实现,所以大多数企业都 ...

  4. mysql 分析5语句的优化--索引添加删除

    查看表的索引  show create table 表名; show index from 表名; show keys from表名; 添加索引 alter table 表名  add index 索 ...

  5. jsel、tl是什么

    el 表达式是什么? * sun 制订的一种用于计算的一种规则,可以给元素赋值,也可以直接输出 el表达式:${el表达式}实验1:简单的使用el表达式获取值<%request.setAttri ...

  6. 对quartz定时任务的初步认识

    已经好久没有写技术博文了,今天就谈一谈我前两天自学的quartz定时任务吧,我对quartz定时任务的理解,就是可以设定一个时间,然后呢,在这个时间到的时候,去执行业务逻辑,这是我的简单理解,接下来看 ...

  7. 关于sql、mysql语句的模糊查询分类与详解,包括基本用法和mapper.xml文件里插入写法

    欢迎猿类加qq:2318645572,共同学习进步 实际例子: ssm框架:service业务层->dao层->mappers.xml->junit/test测试 1:service ...

  8. Java多线程学习笔记(二)——Executor,Executors,ExecutorService比较

    Executor:是Java线程池的超级接口:提供一个execute(Runnable command)方法;我们一般用它的继承接口ExecutorService. Executors:是java.u ...

  9. Java: 隐性赋值(Implicit Assignment)

    初学 Java 时,我总是记不住如何区别 i++ 和 ++i.在<算法(第四版)>一书中第16页,作者提到: ** ++i ** is the same as i = i+1, and h ...

  10. 打印Fibonacci数列方法汇总(前20项,每行5个)

    NO.1 迭代法 标签:通俗.易懂 思路:先打印第一项.再在循环里面执行fib=fib1+fib2,把fib2赋给fib1,把fib赋给fib2,每行5个可使用if函数(循环次数对5取余). #inc ...