​【JS重点知识04】JS执行机制(重点面试题)

news/2024/6/30 18:28:04

 学前案例:

console.log(111);
setTimeout(function () {
   console.log(222);
}, 1000)
console.log(333);
//输出结果:1111 333 222
console.log(111);
setTimeout(function () {
   console.log(222);
}, 0)
console.log(333);
//输出结果:111 333 222

1 JS两种运行方式

同步

每条指令都会严格按照他们出现的顺序来执行,而每条指令执行后也能立即获得存储在系统本地(如寄存器或系统内存)的信息

异步

当前进程外部的实体可以触发代码执行

大白话,做一件事情的同时,可以去做别的事情;例如做饭异步,烧水的同时,可以利用间隙去切菜、炒菜

同步任务

同步任务都在主线程上执行,形成一个执行栈(主线程)

异步任务

异步任务存放位置

异步任务会经浏览器异步进程处理,最终添加到任务队列中(也称为消息队列)

异步任务常见

1 普通事件,如click、resize等

2 资源加载,如load、error等

3 定时器,包括setInterval、setTimeout等

4 ajax(网络模块)

2 JS执行机制(重要)

文字版流程

  1. 首先判断程序中的同步任务、以及异步任务;
  2. 同步任务会在执行栈中先执行
  3. 异步任务则会经浏览器处理后,放入任务队列中
  4. 当同步任务完全执行完后,执行栈会查询任务队列,取出任务队列中罗列好的异步任务来执行
  5. 重复第4步直到异步也完全执行完毕

事件循环(重要)

执行栈不断从任务队列中获取任务、执行任务、再获取任务、再执行的过程,称为事件循环(event loop)

图片版流程

3 练习题

console.log(111);
setTimeout(function () {
  console.log(222);
}, 1000)
console.log(333);
答案:111 333 222
console.log(111)以及console.log(333)两条指令属于同步任务,所以会在执行栈中先执行;
而延时函数属于异步任务,则会在任务队列中等待;当两个同步任务执行完毕后,才会执行延时
函数中的内容


http://lihuaxi.xjx100.cn/news/2195928.html

相关文章

Android开机动画关闭流程

一步一图项目上要加一个开机动画结束的回调,我这边看下如何加 好,老规矩,如何启动动画?动画是谁启动的?怎么关闭的?谁通知关闭的 带着问题看源码 动画的启动流程 开机动画的主入口在哪? 这个…

探索数据新境界:ScrapeGraphAI,一键触发智能网络抓取革命

文章目录 🚀 探索数据新境界:ScrapeGraphAI,一键触发智能网络抓取革命一、介绍二、环境三、实例 🚀 探索数据新境界:ScrapeGraphAI,一键触发智能网络抓取革命 一、介绍 🌟【技术控必备】&…

澳大利亚和德国媒体投放-国外新闻发稿-海外软文推广

德国媒体 Firmenpresse德国新闻 Firmenpresse德国新闻是一家备受欢迎的新闻发布平台,其好友搜索引擎在收录网站方面表现出色。如果您希望更好地将您的新闻传播给德国受众,Firmenpresse德国新闻将是一个理想的选择。 Frankfurt Stadtanzeiger法兰克福城…

Thermal-BST自动化工具在Flotherm建模中的应用与优势

引言 随着科技的不断发展,电子领域的需求也越来越广泛和多样化。然而,PCB板及其上的器件建模问题一直是电子工程师在设计过程中面临的重要挑战之一。软件中原有的PCB建模工具,转换出来的模型复杂,影响后期的网格划分,…

移动端框架:加速移动应用开发与提升跨平台兼容性

在当今快速发展的移动应用领域,开发者们面临着如何快速构建、维护并发布跨平台应用的挑战。为了应对这一挑战,移动端框架应运而生,它们不仅加速了移动应用的开发流程,还提升了应用的跨平台兼容性,并确保了应用性能与原…

前端开发高频面试题

好的,以下是对您提出的问题的详细回答: 说说vue动态权限绑定渲染列表(权限列表渲染) Vue中动态权限绑定渲染列表通常涉及以下步骤: 首先,通过API请求从服务器获取当前用户的权限数据。在Vue组件中&#xff…

Python自动化发送邮件如何实现?怎么配置?

Python自动化发送邮件需要注意什么?邮件群发的技巧? 无论是个人使用还是企业需求,电子邮件的发送都是必不可少的。而Python作为一门功能强大的编程语言,可以通过自动化脚本实现批量发送邮件,从而提高工作效率。AokSen…

Keras深度学习框架实战(5):KerasNLP使用GPT2进行文本生成

1、KerasNLP与GPT2概述 KerasNLP的GPT2进行文本生成是一个基于深度学习的自然语言处理任务,它利用GPT-2模型来生成自然流畅的文本。以下是关于KerasNLP的GPT2进行文本生成的概述: GPT-2模型介绍: GPT-2(Generative Pre-trained …