JavaScript 运行机制:Event事件循环机制
JavaScript Event事件循环机制
JS是单线程的,浏览器只分配一个主线程给JS。一次只能执行一个任务,当前任务执行完后在可以执行下一个任务。任务多时,就会形成任务队列排队等待执行。但是非常耗时间的异步操作,比如网络请求,浏览器会用另外的线程去处理,处理的结果通过回调函数处理,回调函数会被放入任务队列,等待主线程执行。
基于event loop ,JS是永不阻塞的,来的任务执行不过来时都会被放到任务队列。
JavaScript中的任务分为同步任务和异步任务,同步任务就是主线程上一个个排队执行的任务;相反的异步任务则不进入主线任务而是被加入到“任务队列”中,任务队列的任务只有在主线任务执行完成之后才去处理任务队列中的任务。
JS并发模型基于事件循环。
JS运行时概念:
1.函数调用形成了一个栈帧。函数A调用时,又调用了函数B,于是就会形成两层栈桢。函数B栈桢在函数A上方,先执行完被弹出,然后执行函数B,函数B执行完后被弹出,栈空。
2.对象被分配在一个堆中,即用以表示一大块非结构化的内存区域。
3.一个 JavaScript 运行时包含了一个待处理的消息队列。每一个消息都关联着一个用以处理这个消息的函数。
在事件循环期间的某个时刻,运行时从最先进入队列的消息开始处理队列中的消息。为此,这个消息会被移出队列,并作为输入参数调用与之关联的函数。正如前面所提到的,调用一个函数总是会为其创造一个新的栈帧。
函数的处理会一直进行到执行栈再次为空为止;然后事件循环将会处理队列中的下一个消息(如果还有的话)。
4.执行至完成:每一个消息完整的执行后,其它消息才会被执行。这为程序的分析提供了一些优秀的特性,包括:一个函数执行时,它永远不会被抢占,并且在其他代码运行之前完全运行(且可以修改此函数操作的数据)。
这个模型的一个缺点在于当一个消息需要太长时间才能处理完毕时,Web应用就无法处理用户的交互,例如点击或滚动。
5.添加消息:在浏览器里,当一个事件发生且有一个事件监听器绑定在该事件上时,消息会被随时添加进队列。如果没有事件监听器,事件会丢失。所以点击一个附带点击事件处理函数的元素会添加一个消息,其它事件类似。函数 setTimeout
接受两个参数:待加入队列的消息和一个延迟(可选,默认为 0)。这个延迟代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其它消息,在这段延迟时间过去之后,消息会被马上处理。但是,如果有其它消息,setTimeout
消息必须等待其它消息处理完。因此第二个参数仅仅表示最少延迟时间,而非确切的等待时间。
6.多运行时通讯:两个不同的运行时只能通过 postMessage
方法进行通信。如果另一个运行时侦听 message
事件,则此方法会向该运行时添加消息。
7.事件循环模型的一个非常有趣的特性是,与许多其他语言不同,JavaScript 永不阻塞。 处理 I/O 通常通过事件和回调来执行,所以当一个应用正等待一个 IndexedDB
查询返回或者一个 XHR
请求返回时,它仍然可以处理其它事情,比如用户输入。遗留的例外是存在的,如 alert
或者同步 XHR,但应该尽量避免使用它们
参考文章:http://www.ruanyifeng.com/blog/2014/10/event-loop.html
https://www.cnblogs.com/wangfupeng1988/p/6513070.html
JavaScript 运行机制:Event事件循环机制的更多相关文章
- js事件循环机制辨析
对于新接触js语言的人来说,最令人困惑的大概就是事件循环机制了.最开始这也困惑了我好久,花了我几个月时间通过书本,打代码,查阅资料不停地渐进地理解他.接下来我想要和大家分享一下,虽然可能有些许错误的 ...
- 【运行机制】 JavaScript的事件循环机制总结 eventLoop
0.从个例子开始 //code-01 console.log(1) setTimeout(() => { console.log(2); }); console.log(3); 稍微有点前端经验 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)
JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...
- 深入理解JavaScript事件循环机制
前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...
- js事件循环机制(Event Loop)
javascript从诞生之日起就是一门 单线程的 非阻塞的 脚本语言,单线程意味着,javascript代码在执行的任何时候,都只有一个主线程来处理所有的任务,非阻塞靠的就是 event lo ...
- 对javascript EventLoop事件循环机制不一样的理解
前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...
- javascript事件循环机制 浅尝手记
引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...
- JS JavaScript事件循环机制
区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...
- 深入浅出Javascript事件循环机制
一.JS单线程.异步.同步概念 众所周知,JS是单线程(如果一个线程删DOM,一个线程增DOM,浏览器傻逼了-所以只能单着了),虽然有webworker酱紫的多线程出现,但也是在主线程的控制下.web ...
随机推荐
- border边框设置为1px
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- How to resolve the 403 error when send POST request from Postman
Root cause: the site refused the connection from the http request origin, by default it is setted as ...
- 【转】Elastic-Job
https://www.cnblogs.com/yushangzuiyue/p/9655847.html 什么是Elastic-Job Elastic-Job是当当网大牛基于Zookepper,Qua ...
- Java字节码文件结构剖析
今天起开启JVM的新的知识学习篇章----Java的字节码,那学习Java字节码有啥用呢?我们知道Java是跨平台的一门语言,编写一次到处运行,而支撑着这个特性的根基为两点:JVM和.class字节码 ...
- js 正则表达式将 p标签替换 span标签
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 移动Web前端开发 3移动web开发现状
移动端的手机浏览器内核一般都是Webkit内核,只需要适配Webkit就可以了 适配问题 屏幕尺寸不一
- python执行playbook
from collections import namedtuple from ansible.parsing.dataloader import DataLoader from ansible.va ...
- java新建excel文件导出(HSSFWorkbook)
public ActionForward exportExcel(ActionMapping mapping, ActionForm form, HttpServletRequest request, ...
- [Luogu] 矩阵加速(数列)
题面:https://www.luogu.org/problemnew/show/P1939 题解:https://www.zybuluo.com/wsndy-xx/note/1153810
- Bzoj 3036: 绿豆蛙的归宿(期望)
3036: 绿豆蛙的归宿 Time Limit: 2 Sec Memory Limit: 128 MB Description 随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归 ...