先贴出几个名词:

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

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

 异步执行的机制如下:

    (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. 用代码控制退出APP

    + (void)exitApplication { AppDelegate *app = [UIApplication sharedApplication].delegate; UIWindow *w ...

  2. 老李分享: JSON

    老李分享: JSON    poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478, ...

  3. 老李推荐:第8章3节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-启动AndroidDebugBridge 3

    首先它通过查找JVM中的System Property来找到"com.android.monkeyrunner.bindir"这个属性的值,记得前面小节运行环境初始化的时候在mon ...

  4. Android 瘦身之道 ---- so文件

    Android 瘦身之道 ---- so文件 [TOC] 1. 前言 目前Android 瘦身只有几个方面可以入手,因为apk的结构就已经固定了. res 目录下的资源文件.(通常是压缩图片,比如 矢 ...

  5. VS窗体选择BackGroupImage属性报错:已添加具有相同键的项

    高墙我今天第一次遇见这个问题.既然说是"已添加具有相同键的项."那我自然地认为会不会是文件夹哪里命名了两个相同的文件名.然后在这个Exception上越走越远. 好了不说废话.出现 ...

  6. Entity Framework快速入门--IQueryable与IEnumberable的区别

    IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IQueryable 接口 ...

  7. 为JQuery EasyUI 表单组件增加“焦点切换”功能

    1.背景说明 在使用 JQuery  EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabinde ...

  8. 服务器上的Git

    前面的话 如果想与他人使用,除了使用Git来完成日常工作之外,还需要一个远程的Git仓库.尽管从技术上可以从个人的仓库里推送和拉取修改内容,但并不鼓励这样做,因为一不留心就很容易弄混其他人的进度.因此 ...

  9. 基于51单片机IIC通信的AT24C02学习笔记

    引言 最近在学习几种串行通信协议,感觉收获很多,这篇文章是学习IIC总线协议的第一篇文章,以后还会再写一篇关于PCF8591 IIC通信的ADDA转换芯片的文章. 关于IIC总线 IIC 即Inter ...

  10. IntelliJ IDEA应用[一]下载与安装

    一.IntelliJ IDEA 12.1.6的下载 IntelliJ IDEA的官方下载网站:http://www.jetbrains.com/idea/download/