先贴出几个名词:

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

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

 异步执行的机制如下:

    (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. 光环国际PRINCE2培训费是多少?

    光环国际学习PRINCE2新活动 第一重好礼:获得商务背包一个 第二重好礼:获得600元学习代金券一张 第三重好礼:获得高清流程图一张 活动时间:2017年3月20日-3月31日 PRINCE2 (P ...

  2. Linux 下安装 Memcached 和 PHP 开启 Memcached 扩展

    [项目背景]:阿里云ECS服务器,Linux(centos7.2 64位),环境部署使用的是阿里云一键安装包(LAMP)等 [项目需求]:linux安装memcached 和php开启Memcache ...

  3. 老李分享:性能测试你不应该只知道loadrunner(1)

    老李分享:性能测试你不应该只知道loadrunner(1)   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest测试 ...

  4. C语言常见错误笔记

    1. 职业化的程序员起码要具备两点: 1)基本的软件技能 2)不犯低级的错误 2. 修改函数的形参是没用的,函数本身占用的存储单元在堆栈中分配,入口参数的值会在函数入口处拷贝到堆栈中,一旦函数返回,其 ...

  5. Yum -userguide

    Introduction Yum(Yellow dog Updater, Modified) is an automatic updater and package installer/remover ...

  6. 设计模式的征途—2.简单工厂(Simple Factory)模式

    工厂模式是最常用的一种创建型模式,通常所说的工厂模式一般是指工厂方法模式.本篇是是工厂方法模式的“小弟”,我们可以将其理解为工厂方法模式的预备知识,它不属于GoF 23种设计模式,但在软件开发中却也应 ...

  7. SIM9001GSM模块教程

    博主最近在做一个项目,用到了GSM模块,博主不是什么单片机大神,只是感觉某宝附带的资料太水,所以上传一些自己写的程序和经验,供需要的人参考 1,拨打电话 /********************** ...

  8. VS2017 Cordova Ionic2 移动开发-环境搭建

    1. 文档概述 本文档用于说明Visual Studio 2017下使用 Ionic 2进行跨平台开发的运行环境配置. 2. 安装环境 Windows10 3. 安装 Visual Studio 20 ...

  9. android studio 2.3 下载地址

      android studio下载:  Windows+SDK:(1.8GB)| Windows(428 MB) | Linux    idea  win.exe  win.zip 序号 名称 中文 ...

  10. key-value存储Redis

    Key-value数据库是一种以键值对存储数据的一种数据库,(类似java中的HashMap)每个键都会对应一个唯一的值. Redis与其他 key - value 数据库相比还有如下特点: Redi ...