面试:JS运行机制

news2024/12/25 16:12:57

浏览器端和node端的js运行机制执行的过程,进行两者的运行机制比较,以及同步任务和异步任务的说明,两种异步任务的必要性,以及各自有哪些回调,部分回调的优先级。

JS运行机制复述

首先js执行,会有一个函数执行栈(stack),一个任务队列(task queue),一个微任务队列(microtask queue),事件循环(event loop)。

  • 主线程:函数执行栈用来存放同步任务,按照后进先出的顺序执行;
  • 在任务队列中,存放的是宏任务。
  • 当函数执行栈为空时,会启动事件循环机制,将任务队列放到执行栈中执行。在此之前,每从任务队列中取一个任务时,如果微任务队列中存在任务,就先把微任务执行完成,在执行任务队列中的任务。
  • 依次循环,直到任务队列、微任务队列、函数执行栈均为空。

同步任务:在主线程上执行的任务,只有前一个任务执行完成后才能执行下一个任务。
异步任务:不进入主线程执行,而是进入到任务队列(task queue)中执行。

Node.js中的事件循环

上段讲的是浏览器端的事件轮询,而node是多线程机制,由libuv库负责Node API的执行,将它分配给不同的线程,形成一个事件循环。

node中事件循环(event loop)大致分为六个部分。

  • timer定时器:执行setTimeout以及setInterval的回调。
  • I/O回调:处理网络、流、tcp错误等回调
  • idle空转和prepare阶段:node内部使用
  • poll轮询:执行poll中的I/O队列,检查定时器是否到时
  • check检查:存放setImmediate回调
  • close回调:关闭的回调

主要的是timer定时器、poll轮询、check 检查三大部分。在此我们只做了解。

事件循环过程:

  • 执行全局Script的同步代码。
  • 执行完同步代码调用栈清空后,执行微任务。先执行NextTick队列(NextTick Queue)中的所有任务,再执行其他微任务队列中的所有任务。
  • 开始执行宏任务,上面6个阶段。从第1个阶段开始,执行相应每一个阶段的宏任务队列中所有任务。(每个阶段的宏任务队列执行完毕后,开始执行微任务),然后在开始下一阶段的宏任务,依次构成事件循环。
  • timers Queue -> 执行微任务 -> I/O Queue -> 执行微任务 -> Check Queue 执行微任务 -> Close Callback Queue -> 执行微任务 ...

浏览器和Node端事件循环的差别

  • 两者的运行机制完全不同,实现机制也不同。
  • node.js可以理解成4个宏任务队列(timer、I/O、check、close)和2个微任务队列。但是执行宏任务时有6个阶段。
  • node.js在开始宏任务6个阶段时,每个阶段都将该宏任务队列中所有任务都取出来执行,每个阶段的宏任务执行完毕后,开始执行微任务。但是浏览器中的事件循环,是只取一个宏任务执行,然后看微任务队列是否存在,存在执行微任务,然后再取一个宏任务,构成循环。

JS异步任务

js的异步任务分为两种:宏任务、微任务。一个宏任务里面可以拥有多个微任务,在执行js代码块的时候才会去执行内部的微任务。

宏任务

macrotask,也叫tasks。一些异步任务的回调会依次进入宏任务队列,等待后续背调用。

宏任务包括:

  • setTimeout/setInterval
  • setImmediate(Node独有)
  • requestAnimationFrame(浏览器独有)
  • I/O
  • UI rendering(浏览器独有)

注意:
1、setTimeout延迟时间为0,与requestAnimationFrame比较:requestAnimationFrame优先级大于setTimeout

2、setTimeout延迟时间为0,与setImmediate比较:不确定

setTimeout(() => console.log('setTimeout'), 0)
setImmediate(()=>{
  console.log('setImmediate');
})

解释:
timer前的准备时间超过1ms,(loop到timer的时间大于1ms),则执行timer阶段(setTimeout)的回调函数。
timer前的准备时间小于1ms,则先执行check阶段(setTimeout)的回调函数,下次事件循环,再执行timer阶段的回调函数。

如果想要setImmediate先执行,可以使用fs文件包裹,确保在I/O回调阶段执行。这样时间循环,会先执行chack阶段,之后再执行timer阶段。

node版本中的setTimeout

setTimeout(() => {
  console.log(1)
})
setTimeout(() => {
  console.log(2)
  Promise.resolve().then(function () {
    console.log('promise')
  })
})
setTimeout(() => {
  console.log(3)
})

  • node11以后的版本与浏览器端运行结果一致:1 2 promise 3。
  • node11之前的版本,执行结果为:1 2 3 promise。它会先进入timer阶段,执行第一个setTimeout并打印。再执行第二个setTimeout并打印,并将Promise放入微任务队列中。然后执行第三个setTimeout并打印。事件循环在执行下一阶段时,先执行微任务队列,打印promise。

微任务

microtask,也叫jobs。除宏任务外的一些异步回调会依次进入微任务队列,等待后续被调用。 微任务包括:

  • process.nextTick(Node独有)
  • Promise.then()
  • Object.observe
  • MutationObserve

注意:
process.nextTick优先级高于Promise.then()。

两种异步任务的必要性

在异步任务队列中,遵循先进先出的原则。此时,在众多异步任务中,如果存在优先级较高的任务需要优先执行,那么只有一个异步任务队列是无法满足的,此时就需要引入微任务队列,将优先级较高的任务放到微任务队列中。如果微任务队列非空,则执行微任务队列,否则执行宏任务队列。
如果只有一种异步任务,那么优先级高的异步任务无法优先执行。

补充

async/await

async/await本质上还是基于Promise的一些封装

async函数在await之前的代码都是同步执行的,可以理解为await之前的代码属于new Promise时传入的代码,await之后的所有代码都是在Promise.then中的回调

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/583282.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习--优化器篇(超详细付代码测试流程包含:SGD,SGDM,NAG,Adagrad,RMSProp,Adam,Adadelta,Nadam等常用优化器)

引言 在深度学习过程中总会在代码中遇到优化器.Adam(),在上一篇实现卷积神经网络CNN的代码分析中也提到了优化器的概念,那么优化器如何通俗的理解呢?个人通俗理解(仅供参考):为梯度下降法配置的一个的"领航员",寻找模型…

realman——控制真实的机械臂

概述 MoveIt!完成运动规划后的输出接口是一个命名为“FollowJointTrajectory”的 action,其中包含了一系列规划好的路径点轨迹,与使用 MoveIt!控制 Gazebo中的机械臂不同的是,虚拟机械臂有 gazebo 的 ros_control 插件自动帮我们获取了follow_joint_trajectory 的动作 acti…

MVI56-GSC 串行增强通信模块

通用ASCII串行增强通信模块 MVI56E-GSC/GSCXT 通用ASCII串行增强通信模块允许Rockwell Automation ControlLogix可编程自动化控制器(PACs)使用非特定ASCII字符文本串或字节值串行通信协议轻松与串行设备连接。 MVI56E-GSC增强功能包括通过模块的以太网端口进行本地和远程诊断…

2023年高性能计算就业前景如何?IT人的机遇与挑战

在当今数字化时代,高性能计算(HPC)作为一项关键技术,正迅速成为各行各业的核心需求。不论是在职程序员还是在校大学生,懂高性能计算都将大大提升工作及科研、做课题的效率。而且加之2023年大模型的风靡,人工…

MySQL 连接的使用

MySQL 连接的使用 在前几章节中,我们已经学会了如何在一张表中读取数据,这是相对简单的,但是在真正的应用中经常需要从多个数据表中读取数据。 ​ 本章节我们将向大家介绍如何使用 MySQL 的 JOIN 在两个或多个表中查询数据。 你可以在 SEL…

炸裂开源:你肯定需要的6 个中文版 ChatGPT 提示教程。

提示工程(Prompt Engineering)是一门相对较新的学科,教你你如何开发、优化提示来更好的使用 GPT 等大模型、更好的将大模型的能力接入到你的系统中。 本文整理了 GitHub 上质量最高的 6 个【中文版】提示工程教程。请收藏、转发,…

vue3-lazy图片懒加载

vue3-lazy:https://github.com/ustbhuangyi/vue3-lazy 1、npm安装 npm install vue3-lazy -S2、main.js注册 import { createApp } from vue import App from ./app import lazyPlugin from vue3-lazyconst app createApp(App) app.use(lazyPlugin, {loading: l…

Linux使用指定账户启动进程的两种思路和实现

出于安全的考虑,通常启动进程会不适用root账户,而是使用一些权限较低的账户。 例如启动nginx,在安装这个应用的时候创建nginx账户,用于启动nginx服务。 在nginx配置文件中,user选项就是指定启动nginx使用的用户名。 这里我们 看到nginx进程除了第一个是root用户,其它…

算法工程师的基本职责概述(合集)

算法工程师的基本职责概述 算法工程师的基本职责概述1 职责: 1、负责图像特征提取、运动物体跟踪算法的开发与实现。 2、负责进行各类机器学习、深度神经网络产品的研发。 3、负责设计研究相关算法,并优化算法性能。 4、负责撰写相关算法研发报告、技术方…

基于分布式ADMM算法的考虑碳排放交易的电力系统优化调度研究(matlab代码)

目录 1 主要内容 目标函数 计算步骤 节点系统 2 部分代码 3 程序结果 4 下载链接 点击直达! 1 主要内容 程序完全复现文献《A Distributed Dual Consensus ADMM Based on Partition for DC-DOPF with Carbon Emission Trading》,建立了一个考虑…

3年测试工作经验裸辞,现在有点后悔了····

2020年毕业,现在有3年的测试工作经验,刚毕业前半年在一家知名上市公司,后面则进入一家传统行业公司待到现在2年半。 由于看不到技术成长以及其他原因,上上周辞职了,目前交接中,下个月中旬就得离开了&#…

ChatGPT免费国内在线直连入口,2023持续分享中

这个国内在线版ChatGPT可以提供与OpenAI官方ChatGPT相同的使用效果,让你在不懂技术的情况下轻松接触人工智能。 国内镜像: ChatGPT国内直连版(点我)http://test.ai111.top 随着OpenAI不断推出更新版本,现在GPT3.5和…

如何成为机器学习工程师

如何成为机器学习工程师 又到一年一度的毕业季。今年的毕业季有点不同,这是迎着 AI 爆发元年的毕业季,很多同学想投身 AI 和机器学习行业,向我咨询了很多如何成为一名机器学习工程师的问题。在此,我结合自身入行十年的经理&#…

科聪控制系统助力铸造行业向“智能”实现“质”的突破!

此项目现场为传统铸造业,铸造是装备制造业发展不可或缺的重要环节,是众多主机和重大技术装备发展的重要支撑。该现场以往由人工遥控车辆来进行物资的挪动,现投运搭载科聪控制系统的AGV来代替人工用遥控车辆来移动物资。实现上位机上一键发送任…

TF卡被格式化后要如何找到照片

TF卡在日常使用时,具有体积小存储大的优势而被我们用来存储一些重要的照片,但由于内存比较小,TF卡用户需要经常对TF卡中的照片进行清理,避免内存不足等问题,接下来讲下TF卡被格式化后要如何找到照片。TF卡被格式化后要…

什么是IPAM(IP地址管理)?

我们目前生活在一个依赖IP的世界,IPAM(IP地址管理)已成为网络管理不可避免的一部分。在 IP 连接设备爆炸式增长之前,IPAM 网络通常随着连接用户数量的增加而增长。但是,现在网络必须根据我们用于工作的 IP 设备数量为每…

消防安全知识答题活动小程序v4.1.0

消防安全知识答题活动小程序v4.1.0 v4.1.0 1&#xff09;支持多选题 .wxml <checkbox-group class"checkbox-group" bindchange"checkboxChange"><label class"checkbox" wx:for"{{questionList[index].option}}" wx:for…

网络货运系统开发,网络货运系统源码,货主端APP源码、司机端APP源码、PC后台管理系统源码

网络货运系统开发&#xff0c;网络货运系统源码&#xff0c;货主端APP源码、司机端APP源码、PC后台管理系统源码 网络货运为无车承运人更名而来&#xff0c;网络货运平台的好处可以节省找车找货的时间与成本。根据国家对智慧物流行业的发展规划&#xff0c;及《网络平台道路货…

Wincc报表:利用用户归档制作报表查询+打印输出

本文需要结合案例及教学视频共同观看 wincc报表项目案例及完整教学视频下载地址&#xff1a; http://www.zhikonglianmeng.com/t-1635.html 一、创建变量 1、分别创建1个系统变量和1个内部变量&#xff1a;用于时间和日期存储。 WINCC组态项目编辑器——变量管理——单击添加…

Angular学习笔记:environment.ts文件,路由

本文是自己的学习笔记&#xff0c;主要参考资料如下。 - B站《Angular全套实战教程》&#xff0c;达内官方账号制作&#xff0c;https://www.bilibili.com/video/BV1i741157Fj?https://www.bilibili.com/video/BV1R54y1J75g/?p32&vd_sourceab2511a81f5c634b6416d4cc1067…