JavaScript之事件循环案例讲解

js中的事件循环

因为JavaScript是单线程的，同一事件只能执行一种方法，所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行，当遇见异步任务时不会被阻塞，而是将任务放入事件队列中，继续执行执行栈中的同步代码，等当前执行栈中的所有任务都执行完毕则查找事件队列中的任务，并把任务的回调函数放入执行栈中，执行其中的同步代码，如此反复形成的循环被称为事件循环。

node.js

node.js特点

事件驱动

从上向下执行代码，当遇到需要回调的地方就加入到事件队列中，主线程运行完就去执行事件队列中的回调。整个过程不会阻塞新的事件，也不需要维护已经建立的事件

非阻塞io

主线程空闲时，就开始循环事件队列，处理事件队列中的事件，如果该事件不是io任务就亲自处理，如果是io任务，则交给线程池处理并指定回调函数，然后继续循环队列中的其他事件，当阻塞操作完成后会将结果和回调函数放入队列中，主线程循环到时就执行该回调函数。

node.js优缺点

优点

  1. 高并发：node.js用一个主线程处理所有的请求，然后对io操作进行异步处理，避开了创建、销毁线程以及在线程之间切换所需的开销和复杂性
  2. 适合io密集型应用

缺点：

  1. 不适合CPU密集型应用：长时间的计算会导致cpu时间片不能释放，使得后续io事件无法发起
  2. 不能充分利用多核cpu
  3. 可靠性低，一旦代码某个环节崩溃，整个系统都会崩溃

适用场景：

  1.  restful api：请求和响应只需少量的文本，不需要大量的逻辑处理。可以处理数万条连接，只需请求api组织数据并返回即可
  2. 大量Ajax请求的场景中
  3. 聊天服务：轻量级，高流量，没有复杂的计算逻辑

node.js的事件循环 

node事件循环依靠libuv引擎，v8解释js代码后调用对应的node api，这些api由libuv引擎驱动执行对应任务，并把不同的事件放入不同的队列中等待主线程执行，因此node的事件循环存在于libuv引擎中

libuv引擎：实现了事件循环、文件操作等，是node.js实现异步的核心

node.js的单线程仅仅指JavaScript运行在单线程中，内部可以通过线程池完成io操作

poll（查询阶段）---》check（检查阶段）---》close callback（关闭事件回调阶段）---》timer（定时器检测阶段）---》io回调阶段---》闲置阶段---》轮询阶段

poll阶段（轮询阶段）：

v8将js代码解析后传入libuv引擎中，循环首先进入poll阶段。先查看poll队列是否有事件，有就按先进先出顺序执行回调

到此这篇关于JavaScript之事件循环案例讲解的文章就介绍到这了,更多相关JavaScript之事件循环内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈JS和Nodejs中的事件驱动

    事件驱动和发布-订阅 事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式. 在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer). 主题就像调频收音机一样,向有兴趣收听该主题所说内容的观察者进行广播. 观察者可能只有一个,也可能有一百个,这都没有关系,只要主题有一些要广播的消息就够了. 请记住,事件驱动.发布-订阅和观察者模式在实践中不是一回事,但在理想情况下,它们使用相同的方法:一个实体广播一条消息,其他实体侦听该消息. 发布

  • Vue.js前端框架之事件处理小结

    Vue.js前端框架之事件处理小结

    1. v-on 事件监听 监听DOM事件使用 v-on 指令.该指令通常在模板中直接使用,在触发事件时会执行一些 JavaScript 代码. v-on 指令的基本用法 (1)在 HTML 中使用 v-on 指令,后面可以是所有的原生事件名称.基本用法如下: <button v-on:click="show">显示</button> 将 click 单击事件绑定到 show 方法中,单击"显示"按钮时,执行 show() 方法,show()

  • 如何利用原生JS实现触摸滑动监听事件

    如何利用原生JS实现触摸滑动监听事件

    前言 今天写一个小Demo,有个地方涉及到了左滑右滑的逻辑,本来想着用插件来着,但是想到自己好久没用原生JS写滑动的监听了,所以试着用原生JS来实现了一下,毕竟温故而知新嘛,同时做个记录.先把实现的效果贴出来: 构思 想要写出丝滑的触摸滑动事件的监听,要考虑以下3个方面的逻辑: 距离: 滑动距离要大于40 时间: 滑动时间小于在0.5秒,即500毫秒内完成手指按下,拖动,离开(避免只是手指在屏幕就触发) 滑动方向: 左右滑动的条件是:X轴移动的距离大于Y轴移动的距离,为正则向左,为负则向右 上下

  • JavaScript中事件冒泡机制示例详析

    JavaScript中事件冒泡机制示例详析

    什么是冒泡? DOM事件流(event  flow )存在三个阶段:事件捕获阶段. 处于目标阶段. 事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(dubbed  bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. dom标准事件流的触发的先后顺序为:先捕

  • 详解JS浏览器事件模型

    详解JS浏览器事件模型

    什么是事件 我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢? 事件驱动通俗地来说就是什么都抽象为事件. 一次点击是一个事件 键盘按下是一个事件 一个网络请求成功是一个事件 页面加载是一个事件 页面报错是一个事件 浏览器依靠事件来驱动APP运行下去,如果没有了事件驱动,那么APP会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石. 一个简单的例子 其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态. 我们需要根据这个事件自己去完

  • JavaScript WebAPI、DOM、事件和操作元素实例详解

    JavaScript WebAPI、DOM、事件和操作元素实例详解

    目录 WebAPI DOM DOM树 DOM获取元素方式 document对象属性 事件 事件的使用步骤 事件的类型 操作元素 操作元素内容 操作元素属性 操作元素样式 排他思想 H5自定义属性 总结 WebAPI API:应用程序编程接口,是一些预先定义的函数,由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码.无须理解其内部工作机制细节,只需知道如何使用即可 简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能 WebAPI:主要针对浏览器

  • 关于js的事件循环机制剖析

    关于js的事件循环机制剖析

    前言 众所周知, JavaScript是单线程这一核心,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?其中的原理与事件循环机制大有关系. 在探索事件循环之前,我们得先了解浏览器执行线程~~ 浏览器的渲染进程是多线程的,浏览器每一个tab标签都代表一个独立的进程,其中浏览器内核属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等.其包含的线程有以下几种 GUI 渲染线程:负责渲染页面,解析 HTML,CSS 构成 DOM 树: JS 引擎线程:解释执行代码.用户输入和网络请求:

  • 利用javaScript处理常用事件详解

    利用javaScript处理常用事件详解

    JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件. 1.窗体事件 例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>花狗在线</title> <script> window.o

  • JavaScript之事件循环案例讲解

    js中的事件循环 因为JavaScript是单线程的,同一事件只能执行一种方法,所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行,当遇见异步任务时不会被阻塞,而是将任务放入事件队列中,继续执行执行栈中的同步代码,等当前执行栈中的所有任务都执行完毕则查找事件队列中的任务,并把任务的回调函数放入执行栈中,执行其中的同步代码,如此反复形成的循环被称为事件循环. node.js node.js特点 事件驱动 从上向下执行代码,当遇到需要回调的地方就加入到事件队列中,主线程运行完就去执行事件队

  • JavaScript 鼠标事件(MouseEvent)案例讲解

    JavaScript 鼠标事件(MouseEvent)案例讲解

    鼠标事件-MouseEvent 当鼠标进行某种操作时,就会生成一个event对象,该对象记录着鼠标触发事件时的所有属性. 可以通过如下方法在google控制台打印出 MouseEvent 对象. function mouseDown(e){ var e = e||event; console.log(e) } window.onload = function (){ document.getElementsByTagName('body')[0].addEventListener('moused

  • JavaScript 关于事件循环机制的刨析

    JavaScript 关于事件循环机制的刨析

    目录 前言: 一.事件循环和任务队列产生的原因: 二.事件循环机制: 三.任务队列: 3.1 任务队列的类型: 3.2 两者区别: 3.3 更细致的事件循环过程 四.强大的异步专家 process.nextTick() 4.1 process.nextTick()在何时调用? 前言: 这次主要整理一下自己对 Js事件循环机制,同步,异步任务,宏任务,微任务的理解,大概率暂时还有些偏差或者错误.如果有,十分欢迎各位纠正我的错误! 一.事件循环和任务队列产生的原因: 首先,JS是单线程,这样设计也是

  • 深入了解Javascript的事件循环机制

    深入了解Javascript的事件循环机制

    目录 单线程的Javascript 同步 vs 异步 宏任务 vs 微任务 定时器 To Be Continued 单线程的Javascript JavaScript是一种单线程语言,它主要用来与用户互动,以及操作DOM.多线程需要共享资源.且有可能修改彼此的运行结果,且存在上下文切换. 在 JS 运行的时候可能会阻止 UI 渲染,这说明两个线程是互斥的.这是因为 JS 可以修改 DOM,如果在 JS 执行的时候 UI 线程还在工作,就可能导致不能安全的渲染 UI. JS 是单线程运行的,可以达

  • 简单聊聊JavaScript的事件循环机制

    目录 前言 概念 举个栗子 TIP 再次举个栗子 总结 前言 JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作. 类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等. 概念 在JavaScript代码执行过程中,可以分为同步队列和异步队列. 同步任务类似我们常说的立即执行函数,不需要等待可以直接进行,可以直接进入到主线程中去执行,类似正常的函数调用等. 异步队列则是异步执行函数,类似ajax请求,我们在发起的过程中,

  • javascript滚轮事件基础实例讲解（37）

    本文实例为大家分享了js滚轮事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script

  • 详解JavaScript事件循环机制

    详解JavaScript事件循环机制

    众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. There a

  • 深入分析JavaScript 事件循环(Event Loop)

    事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个耗时较多的任务,我们必须等该任务执行完毕才能进入下一个任务,然而等待的这段时间常常让我们无法忍受,因为我们这段时间什么都不能做,包括页面也是锁死状态. 好在,时代在进步,浏览器向我们提供了JS引擎不具备的特性:Web API.Web API包括DOM API.定时器.HTTP请求等特性,可以帮助我们

  • 我的Node.js学习之路（三）--node.js作用、回调、同步和异步代码 以及事件循环

    我的Node.js学习之路（三）--node.js作用、回调、同步和异步代码 以及事件循环

    一,node.js的作用, I/O的意义,(I/O是输入/输出的简写,如:键盘敲入文本,输入,屏幕上看到文本显示输出.鼠标移动,在屏幕上看到鼠标的移动.终端的输入,和看到的输出.等等)   node.js想解决的问题,(处理输入,输入,高并发 .如 在线游戏中可能会有上百万个游戏者,则有上百万的输入等等)(node.js适合的范畴:当应用程序需要在网络上发送和接收数据时Node.js最为适合.这可能是第三方的API,联网设备或者浏览器与服务器之间的实时通信)   并发的意义,(并发这个术语描述的

  • JavaScript防抖案例讲解

    原理 防抖的原理是:你尽管触发事件,但是我一定要在事件触发n秒之后才执行,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n秒后再执行.总之,就是要等到你触发完事件n秒内不再触发事件,我才执行. 案例 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <meta http-equiv="

随机推荐