摘录和再编:彻底弄懂JS执行机制

网文: https://juejin.im/post/59e85eebf265da430d571f89

并发模型和事件循环:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop

Node.js事件循环,Timers, process.nextTick()



javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的。

javascript事件循环

网页渲染的过程,如页面骨架,页面原生的渲染,都是同步的。

而image,音乐等资源加载需要占用大量资源,所以使用异步任务。

  1. 同步任务,直接进入主线程,异步任务进入事件表格并注册函数。
  2. 当指定的事情完成时,Event Table会将这个函数移入Event Queue。
  3. 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
  4. 上述过程会不断重复,也就是常说的Event Loop(事件循环)。

setTimeout和setInterval(fn, ms)函数

这两个函数会再间隔时间到了后,把要执行的函数放入Event Queue。

Promise与process.nextTick(callback)

nextTick是Node.js中Process模块的函数方法。它的定义:

process.nextTick()

adds callback to the "next tick queue". This queue is fully drained after the current operation on the JavaScript stack runs to completion and before the event loop is allowed to continue.

nextTick()把回调函数加到"next tick queue"下一个tick队列。

在当前JS栈运行的操作完成后,并且在事件循环被允许继续之前,这个时间段就叫做next tick。此时执行的队列queue,即next tick queue。

也就是说process.nextTick()中的回调函数会在这个时间段被执行。

所以说除了广义的同步任务,和异步任务,还有更为精细的定义:

  • 宏任务:整体代码script, setTimeout, setInterval
  • 微任务:Promise, process.nextTick。

不同的任务进入对应的事件队列Event Queue。

事件循环的顺序,决定js代码的执行顺序。

  1. 进入整体代码(宏任务)后,开始第一次循环。
  2. 接着执行所有的微任务。即 next tick queue。
  3. 然后再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务。

如此反复执行,完成所有的事件。

总结:

javascript是一门单线程语言,不管什么新框架新语法糖的异步,都是用同步的方法模拟的。

Event Loop是js实现异步的一种方法,也是js的执行机制mechanism。

执行机制和运行是不同的。js在不同的环境下node, browser等执行机制可能不同,但运行大多是指js解析引擎,是统一的。

微任务和宏任务还有很多类型。



摘录和再编:彻底弄懂JS执行机制

原文地址:https://www.cnblogs.com/chentianwei/p/10350083.html

时间: 2024-08-01 17:43:19

摘录和再编:彻底弄懂JS执行机制的相关文章

通过一个简单闭包,弄懂JS执行原理

<script> function f1()            {                var age = 18; function f2()                {                    alert('我今年:'+age+'岁');                } return f2;            }                var func3 = f1(); func3();</script>            闭包

彻底弄懂 JavaScript 执行机制

本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可以得出结论: javascript是按照语句出现的顺序执行的 看到这里读者要打人了:我难道不知道js是一行一行执行的?还用你说?稍安勿躁,正因为js是一行一行执行的,所以我们以为js都是这样的: let a

这一次,彻底弄懂 JavaScript 执行机制

本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 文章转自:https://juejin.im/post/59e85eebf265da430d571f89 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可以得出结论: javascript是按照语句出现的顺序执行的 看到这里读者要打人了:我难道不知道js

如何继承Date对象?由一道题彻底弄懂JS继承。

前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------长文+多图预警,需要花费一定时间---------- 故事是从一次实际需求中开始的... 某天,某人向我寻求了一次帮助,要协助写一个日期工具类,要求: 此类继承自Date,拥有Date的所有属性和对象 此类可以自由拓展方法 形象点描述,就是要求可以这样: // 假设最终的类是 MyDate,有一个getTest拓展方法 let date = new MyDate(); // 调用Date的方法,输出GM

一篇文章看懂JS执行上下文

 壹 ? 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.log('听风是风'); }; f1(); //echo function f1() { console.log('echo'); }; f1(); //echo 按照代码书写顺序,应该先输出 听风是风,再输出 echo才对,很遗憾,两次输出均为 echo:如果我们将上述代码中的函数声明改为函数表达式,

js执行机制

1.     关于javascript js是一门单线程语言,一切js版的'多线程'都是用单线程模拟起来的. 2.     js事件循环 将任务分为2类:同步任务.异步任务 同步任务进入主线程,异步任务进入Event Table并注册函数 当指定的事件完成时,Event Table会将这个函数移入Event Queue 主线程内的任务执行完毕为空后,会去Event Queue读取对应的函数,进入主线程运行 以上过程会不断的重复,即Event Loop事件循环 js引擎存在monitoring p

彻底弄懂js循环中的闭包问题

第一次接触这个问题还是在我刚开始学js的时候,当时就是一头雾水,时隔一年多了,突然又想起了这个问题,在这个春气盎然的周末,我就坐下来研究下并把结果和大家分享下: 先看代码:demo.html<!DOCTYPE HTML> <html>  <head>   <meta charset="gbk"/>   <title>闭包循环问题</title>   <style type="text/css&quo

彻底弄懂JS的事件冒泡和事件捕获

先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ;  另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡:   return false;  火狐/ie都支持 function(even){ var ev=even||window.even; if(ev&&ev.stopPropagation){ ev.stopPropagation(); }else{ window.event.cancelBubble=true; } } 这是H

几个例子弄懂JS 的setTimeout的运行方式

<span style="font-size:18px;">例子:1</span> function test() { var a = 1; setTimeout(function() { alert(a); a = 5; }, 1000); } test(); alert(0);//前面的两个setTimeout延迟了 所以先执行这个 结果:先弹出0,然后弹出1. 例子2 function test() { var a = 1; setTimeout(func