理解javascript事件执行机制

众所周知,js是一个单线程的语言,这意味着同一时间只能做一件事,但是我们又说js是异步的。首先,单线程并不是没有优点。作为浏览器脚本语言,JavaScript 的主要用途是与用户互动,以及操作 DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript 同时有两个线程,一个线程在某个 DOM 节点上添加内容,另一个线程删除了这个节点,那最后应该以哪个为准呢? 所以,为了避免复杂性,从一诞生,JavaScript 就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

实际上,主线程只会做一件事情,就是从消息队列里面取消息、执行消息,再取消息、再执行。当消息队列为空时,就会等待直到消息队列变成非空。而且主线程只有在将当前的消息执行完成后,才会去取下一个消息。这种机制就叫做事件循环机制,取一个消息并执行的过程叫做一次循环 。就如图所示一样

如果说js只有一个主线程,那么它应该有三个辅助的子线程,分别为事件处理线程、http网络请求线程、定时器处理线程。这些线程就是实现js异步的关键,比如主线程内有程序正在运行,这个时候后面有一个定时器在等待,那么主线程肯定不会检测这个定时器的时间是否达到要求的,这样会消耗性能和时间,所以就交给定时器处理线程,当setTimeout的时间达到时,它就会把这个定时器里的函数(其实这就是回调函数了)放到任务队列里,当主线程把执行栈中的任务都执行完以后,执行栈为空了,就会从任务队列里找,执行里面的回调,如此循环往复,这就是时间循环。由于执行任务还是只有一个主线程可以做,所以有时候即使定时器触发的事件已经到了,但是它的回调函数也只能在任务队列中等待,这导致最后函数触发的事件往往比设置的时间长,这也是我们说定时器准确度不高的原因。

关于javascript的事件执行机制理解的更多相关文章

  1. 十分钟理解JavaScript引擎的执行机制

    关注专栏写文章 十分钟理解JavaScript引擎的执行机制 方伟景 千锋前端开发推动市场提升的学习研究者. 4 人赞同了该文章 首先,请牢记2点: JS是单线程语言 JS的Event Loop是JS ...

  2. 对javascript EventLoop事件循环机制不一样的理解

    前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...

  3. JavaScript的事件循环机制浅析

    前言 JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作. 类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等. 概念 在 ...

  4. android的事件分发机制理解

    android的事件分发机制理解 1.事件触发主要涉及到哪些层面的哪些函数(个人理解的顺序,可能在某一层会一次回调其它函数) activity中的dispatchTouchEvent .layout中 ...

  5. Android与javascript中事件分发机制的简单比较

    在前面两篇博客中,我们讨论了Android中的事件分发的相关内容,那么在本篇博客当中,我们就简单探讨一下html或javascript中的事件分发机制,并进行简单的对比. 在前端中,对事件进行绑定有三 ...

  6. JavaScript定时器与执行机制

    JavaScript动画中是必须使用到定时器的,这里做一个总结. var label = 'someLable'; console.time(label); console.timeEnd(label ...

  7. 【运行机制】 JavaScript的事件循环机制总结 eventLoop

    0.从个例子开始 //code-01 console.log(1) setTimeout(() => { console.log(2); }); console.log(3); 稍微有点前端经验 ...

  8. JavaScript定时器与执行机制解析

    从JS执行机制说起 浏览器(或者说JS引擎)执行JS的机制是基于事件循环. 由于JS是单线程,所以同一时间只能执行一个任务,其他任务就得排队,后续任务必须等到前一个任务结束才能开始执行. 为了避免因为 ...

  9. javascript的事件循环机制

    JavaScript是一门编程语言,既然是编程语言那么就会有执行时的逻辑先后顺序,那么对于JavaScript来说这额顺序是怎样的呢? 首先我们我们需要明确一点,JavaScript是单线程语言.所谓 ...

随机推荐

  1. LC 593. Valid Square

    Given the coordinates of four points in 2D space, return whether the four points could construct a s ...

  2. python写入csv方法总结

    最常用的一种方法,利用pandas包 import pandas as pd #任意的多组列表 a = [1,2,3] b = [4,5,6] #字典中的key值即为csv中列名 dataframe ...

  3. SPARQL查询语句整理

    本文大多内容来自Joshua Taylor的回答 https://stackoverflow.com/users/1281433/joshua-taylor 查询子类或等价关系 https://sta ...

  4. 几句简单的python代码完成周公解梦功能

    <周公解梦>是靠人的梦来卜吉凶的一本于民间流传的解梦书籍,共有七类梦境的解述.这是非常传统的中国文化体系的一部分,但是如何用代码来获取并搜索周公解梦的数据呢?一般情况下,要通过爬虫获取数据 ...

  5. C2B电商三种主要模式的分析_数据分析师

    C2B电商三种主要模式的分析_数据分析师 在过去的一年中电商领域血雨腥风,尤其是天猫.京东.苏宁.当当.易讯等B2C电商打得不亦乐乎.而随着B2C领域竞争进入白热化阶段,C2B模式也在天猫" ...

  6. lua学习笔记3--lua与c#交互

    LuaInterface是C#与Lua连接的桥梁 LuaInterface是一个开源项目工程,内部有两个核心DLL文件: LuaInterface.dll:在C#中操作Lua代码需要依赖该文件; lu ...

  7. PowerDesigner通过SQL语句生成PDM文件并将name和comment进行互相转换

    本篇文章主要介绍了PowerDesigner通过SQL语句生成PDM文件并将name和comment进行互相转换 超详细过程(图文),具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.软件准备 软 ...

  8. 内存块是一种数据结构,内核对象&句柄

    内核对象&句柄 目录 1 内核对象的概念 2 内核对象的使用计数 3 句柄 4 句柄表   项目工程代码中设计句柄的使用,一时不知句柄是何物,通过查阅自学之后,对句柄及其使用有一个初步的了解. ...

  9. 【Python】【demo实验10】【练习实例】【打印斐波那契数列】

    斐波那契数列介绍: 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子 ...

  10. oracle:archiver error. Connect internal only, until freed 原因以及错误的处理方法

    今天小编遇到这个数据原因,通过查找资料解决了,问题原因就是数据默认存储日志的文件夹满了 1.首先通过cmd命令窗口连接超级管理员,sqlplus / as sysdba; 2.查询db_recover ...