【JS】JavaScript引擎的内部执行机制



近期在复习JavaScript,看到setTimeout函数时。想起曾经刚学时,在一本书上看过setTimeout()里的回调函数执行的间隔时间有昌不是后面设置的值。曾经没想太多。网上看了JS大神的解释,整理记录下JavaScript引擎的内部执行机制。

首先看一段小程序:

<script>
      alert('第1');
      setTimeout(function(){alert('第2');}, 2000);
      alert('第3');
</script>

输出顺序是:第1。第3,第2;再来看一段小程序:

<script>
      alert('第1');
      setTimeout(function(){alert('第2')}, 0);
      alert('第3');
</script>

输出顺序还是:第1,第3,第2。为什么不是第1,第2,第3。setTimeout的间隔时间设置为0不就是马上执行吗?在此引出JavaScript的执行机制:Event
Loop(貌似译为事件轮询)。

JavaScript的任务队列

由于JavaScript是单线程的。全部的任务仅仅能是一个接一个的运行,可是当遇像IO这种读取一些大文件时就会出现后一个任务长时间处于等待状态。要等到前一个任务运行完才干開始后一个任务。

由于这样。JavaScript也设计为主线程能够先无论IO设备,先运行后面的任务,等IO设备返回了结果。再回去继续运行。

因此。在JavaScript中,全部的任务能够分为两种:一是同步任务(synchronous);二是异步任务(asynchronous)。

同步任务就是:在主线程上。必须等前一个任务运行完。才干运行后一个任务;异步任务则是:不进入主线程。而是进入“任务队列”(task
queue)的任务,主线程仅仅有在得到“任务队列”的通知。某个异步任务能够运行,该异步任务才会进入主线程运行。

事实上“任务队列”就是一个事件的队列。主线程读取“任务队列”,就是读取里面的事件。这些事件一般包含IO设备的事件、点击、滚动事件,凡是指定过回调函数(callback)。这些事件发生时就会进入“任务队列”。异步任务必须指定回调函数。主线程运行异步任务,就是运行相应的回调函数。

oText.innerText = '...';

比方在某一页面中。运行了上面这一代码后。DOM的内容会发生改变,接着系统触发DOM Changed事件,产生异步回调。回调函数被加入到“任务队列”中。

Event
Loop

1.同步任务在主线程上运行会形成一个“运行栈”(execution context stack);

2.异步任务在“任务队列”里有执行结果就会在“任务队列”里置一事件(Event)。

3.当“运行栈”中的同步任务都运行完后。“任务队列”中有运行结果(事件,比方:Mouse Clicks、Key Presses、定时事件等)的异步任务就会进入“运行栈”,開始运行;

主线程从“任务队列”读取事件的过程是不断循环的,这样的机制就称为Event Loop。

Event Loop图解:

仅仅有“运行栈”中任务运行完了,就会去读取“任务队列”,运行各事件相相应的回调函数。

如今应该明确开篇中,为什么setTimeout的间隔时间设置为0却最后运行了吧,由于要等“运行栈”中的代码运行完后,才会去运行“任务队列”中的回调函数。

Author:顾故

Sign:别输给以前的自己

时间: 2024-10-13 12:26:45

【JS】JavaScript引擎的内部执行机制的相关文章

【JS】JavaScript引擎的内部运行机制

首先看一段小程序: <script> alert('第1'); setTimeout(function(){<pre name="code" class="javascript"><span style="white-space:pre"> </span>alert('第2'); }, 2000); alert('第3');</script> 输出顺序是:第1,第3,第2:再来看一段小程

Spark内部执行机制

Spark内部执行机制 1.1 内部执行流程 如下图1为分布式集群上spark应用程序的一般执行框架.主要由sparkcontext(spark上下文).cluster manager(资源管理器)和?executor(单个节点的执行进程).其中cluster manager负责整个集群的统一资源管理.executor是应用执行的主要进程,内部含有多个task线程以及内存空间. 图1 spark分布式部署图 详细流程图如下图2: 图2 详细流程图 (1) 应用程序在使用spark-submit提

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失 查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s

浏览器中的JavaScript执行机制:08 | 调用栈:为什么JavaScript代码会出现栈溢出?

前言:该篇说明:请见 说明 —— 浏览器工作原理与实践 目录 在上篇文章中,我们讲到了,当一段代码被执行时,JavaScript 引擎先会对其进行编译,并创建执行上下文.但是并没有明确说明到底什么样的代码才算符合规范. 那么接下来我们就来明确下,哪些情况下代码才算是“一段”代码,才会在执行之前就进行编译并创建执行上下文.一般说来,有这么三种情况: 1.当 JavaScript 执行全局代码的时候,会编译全局代码并创建全局执行上下文,而且在整个页面的生存周期内,全局执行上下文只有一份. 2.当调用

80 脚本引擎——js脚本引擎

脚本引擎管理工具 java提供了一个脚本引擎管理工具,从这个工具可以获得各种脚本语言的脚本引擎,如js.python等.我们可以通过脚本引擎,来调用已经写好的脚本文件.相当的方便. 我们可以使用:new ScriptEngineManager()获取一个脚本引擎管理工具对象. 然后,可以通过getEngineByName(scriptName)的方式得到我们想要的脚本引擎. //获取脚本引擎管理器 ScriptEngineManager sem = new ScriptEngineManager

javascript从定义到执行 js引擎 闭包

javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境 栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等,这些概念正是JS引擎工作的核心组件.这篇文章的目的是孤立的为你讲解每一个概念,而 是通过一个简单的demo来展开分析,全局讲解JS引擎从定义到执行的每一个细节,以及这些概念在其中所扮演的角色. var x = 1;  //定义一个全局变量 x function A(y){ var x = 2; 

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

关注专栏写文章 十分钟理解JavaScript引擎的执行机制 方伟景 千锋前端开发推动市场提升的学习研究者. 4 人赞同了该文章 首先,请牢记2点: JS是单线程语言 JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问:JS为什么是单线程的?为什么需要异步?单线程又是如何实现异步的呢? 技术的出现,都跟现实世界里的应用场景密切相关的.同样的,我们就结合现实场景,来回答这三个问题. (1) JS为什么是单线程的? JS最初被设计

10分钟理解JS引擎的执行机制

10分钟理解JS引擎的执行机制 javascript 阅读约 7 分钟 深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2点: (1) JS是单线程语言 (2) JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问 : JS为什么是单线程的

Javascript引擎单线程机制及setTimeout执行原理说明

setTimeout用法在实际项目中还是会时常遇到.比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为DOM没有发生任何改变而忽略这两句话,因此我们可以通过setTimeout把“设回白色”函数加入下一个堆栈,那么就可以确保背景颜色发生过改变了(虽然速度很快可能无法被察觉). 总之,setTimeout增加了Javascript函数调用的灵活性,为函数执行顺序的调度提供极大便利. 然后,我们从基础的层面来看看:理解J