JS事件循环机制
2021-12-06 00:07:08 2 举报AI智能生成
JS事件循环机制
作者其他创作
大纲/内容
JS事件循环机制是什么
指用户代理为了协调事件、用户交互、脚本、渲染、网络（这里说了5个点）等等必须使用的事件循环机制。
html standard: <br>To coordinate events, user interaction, scripts, rendering, networking, and so forth, <br><b><font color="#e65100">user agents </font></b>must use event loops as described in this section. <br>Each agent has an associated event loop, which is unique to that agent.<br>
<font color="#b71c1c">事件循环机制并不是 js 本身实现的，</font><br>而是 js 的执行环境做的事情，比如浏览器或者 node 。<br>
JS为什么要有事件循环机制
js 是单线程工作的
采用单线程工作的原因
最早的设计初衷：运行在浏览器的脚本语言，实现页面交互。<br><b><font color="#e65100">核心是 dom 操作，必须使用单线程，否则会出现复杂的线程同步问题。<br><br></font></b><font color="#212121">如果有多个线程一起工作，其中一个线程修改了某个 dom 元素，另一个线程同时删除了这个元素，<br>此时浏览器将无法明确以哪个线程的结果为准。</font>
为了解决耗时任务阻塞执行的问题有了异步模式
同步任务
在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
异步任务
不进入主线程、而进入"任务队列"（task queue）的任务。<br>
因为有了异步模式所以要有事件循环机制
并发模型与事件循环
JavaScript有一个基于事件循环的并发模型，<br><b><u style=""><font color="#e65100">事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。</font></u></b><br>
事件循环♻️<br><br>所谓某个时刻就是同步任务执行完微任务回调函数也执行完成的时候。
js 运行时
完整事件循环执行顺序
什么时候会往消息队列添加消息
浏览器中的事件循环
浏览器中事件循环相关的进程、线程
也叫做主线程
浏览器中宏任务与微任务的本质区别
宏任务
微任务
微任务执行完成后浏览器会进行视图渲染
<ul><li>视图更新这里浏览器可能有自己的优化，合并多次事件循环的结果，做一次视图更新</li><li>视图更新前会先执行 requestAnimationFrame 回调</li></ul>
NodeJS 中的事件循环
等到用 node 多的时候再看吧，现在看就是死记硬背，记不住，记住点稍微问多点也不知道了
6个队列
完整事件循环
根据这个图，微任务有两类执行时间点：<br>1. 初始同步代码执行后<br>2. 队列切换时<br><br>node 里面也有 promise.then 这种微任务
与浏览器事件循环的区别
任务队列数
微任务执行时机
微任务优先级
其实 process.nextTick 是一个很特殊的存在啊，<br>感觉和优先级没啥关系<br>
参考
https://www.bilibili.com/video/BV1gb4y1U7Un?spm_id_from=333.999.0.0
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
阮老师等14年就知道的东西哎，我真是菜，感觉人家早就财务自由了。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
拉勾教程
https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/
职业：本科
0 条评论
下一页
为你推荐
查看更多
