day31 JS执行机制

目录

    • 前言
    • 同步和异步
    • JS执行机制

前言

JavaScript语言的一大特点是单线程

  • JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如对某个DOM元素进行添加和删除操作,不能同时进行,应该先进行添加再继续删除。

示例(解释往后看):

<script>
        console.log(111);
        setTimeout(function(){
            console.log(222);
        },1000)
        console.log(333);
    </script>

在这里插入图片描述

<script>
        console.log(111);
        setTimeout(function(){
            console.log(222);
        },0)
        console.log(333);
    </script>

在这里插入图片描述

  • 如果JS执行的时间过长,就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
  • 为解决此问题,利用多核CPU的计算能力,HTML5提出Web Worker标准,运行JavaScript脚本创建多个线程。于是JS中出现了同步异步

同步和异步

  • 同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。
  • 异步:在做一件事时,因为这件事会花费很多时间,在做这件事的同时还可以去处理其它事情。
  • 本质区别:这条流水线上各个流程的执行顺序不同。
  • 同步任务:同步任务都在主线程上执行,形成一个执行栈。
  • 异步任务:JS的异步是通过回调函数实现的。
  • 一般而言有以下三种类型:
    • 普通事件,如click、resize等
    • 资源加载,如load、error等
    • 定时器,包括setInterval、setTimeout等
    • 异步任务将相关添加到任务队列中(任务队列也称消息队列)

JS执行机制

  1. 先执行执行栈中的同步任务
  2. 异步任务放入任务队列中
  3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
  • 由于主线程不断地重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)

由此可以解释前面的示例。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【日常总结】SourceTree 1.5.2.0 更换用户名称和密码

一、场景 二、问题 三、解决方案 > 方案一&#xff1a;删除缓存文件 > 方案二&#xff1a;更新最新版本&#xff0c;可以直接修改密码&#xff08;推荐&#xff09; 方案一&#xff1a;删除缓存文件 Stage 1&#xff1a;设置显示隐藏文件 Stage 2&#xff1a;打开…

基于时频分析的SAR目标微波视觉特性智能感知方法与应用

源自&#xff1a;雷达学报 作者&#xff1a;黄钟泠, 吴冲, 姚西文 “人工智能技术与咨询” 发布 摘 要 合成孔径雷达(SAR)目标识别智能算法目前仍面临缺少鲁棒性、泛化性和可解释性的挑战&#xff0c;理解SAR目标微波特性并将其结合先进的深度学习算法&#xff0c;实现高效…

Springboot写一个对接钉钉机器人的小插件

钉钉机器人 有时候我门需要监控各种事件&#xff0c;需要机器人给我发给提醒 如&#xff1a;git代码交接&#xff0c;代码合并&#xff0c; 服务器异常捕获&#xff0c;。。。。 参照钉钉给我们的开发文档&#xff0c;可以发现对接起来是非常简单哈哈 这是我写的小插件以及例子…

内衣迷你洗衣机什么牌子好?口碑最好的小型洗衣机推荐

随着人们的生活水平的提升&#xff0c;越来越多小伙伴来开始追求更高的生活水平&#xff0c;一些智能化的小家电就被发明出来&#xff0c;而且内衣洗衣机是其中一个。现在通过内衣裤感染到细菌真的是越来越多&#xff0c;所以我们对内衣裤的清洗频次会高于普通衣服&#xff0c;…

大数据知识图谱之深度学习——基于BERT+LSTM+CRF深度学习识别模型医疗知识图谱问答可视化系统

文章目录 大数据知识图谱之深度学习——基于BERTLSTMCRF深度学习识别模型医疗知识图谱问答可视化系统一、项目概述二、系统实现基本流程三、项目工具所用的版本号四、所需要软件的安装和使用五、开发技术简介Django技术介绍Neo4j数据库Bootstrap4框架Echarts简介Navicat Premiu…

【开源】JAVA+Vue+SpringBoot实现二手车交易系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 二手车档案管理模块2.3 车辆预约管理模块2.4 车辆预定管理模块2.5 车辆留言板管理模块2.6 车辆资讯管理模块 三、系统设计3.1 E-R图设计3.2 可行性分析3.2.1 技术可行性分析3.2.2 操作可行性3.2.3 经济…

【【制作100个unity游戏之24】unity制作一个3D动物AI生态系统游戏(附项目源码)

最终效果 文章目录 最终效果前言导入AI导航系统导航烘培添加羊添加捕食者动画控制随着地面法线旋转在地形上随机生成动物不同部位颜色不同最终效果源码完结前言 欢迎来到【制作100个Unity游戏】系列!本系列将引导您一步步学习如何使用Unity开发各种类型的游戏。在这第24篇中,…

windows10 利用DDNS-GO解析IPV6 IPV4 阿里云 腾讯云 华为云

这里写目录标题 [工具包DDNS-GO Windows 版](https://github.com/jeessy2/ddns-go/releases)创建ddns-go windows服务打开浏览器 输入127.0.0.1:9876 就可以使用ddns-go解析ipv4 或者 IPV6 了创建的服务已经在windows的服务管理里面自动启动了 工具包DDNS-GO Windows 版 创建dd…

docker proxy 【docker 代理】

第一种 创建代理配置文件 mkdir -p /etc/systemd/system/docker.service.d/ cat <<EOF > /etc/systemd/system/docker.service.d/http-proxy.conf Environment"HTTP_PROXYhttp://192.168.21.101:7890" Environment"HTTPS_PROXYhttp://192.168.21.1…

Python更换国内pip源详细教程

文章目录 一、国内常用镜像源二、临时使用三、永久修改配置1.pycharm终端命令行操作2.Windows平台图形化操作3.MacOS、Linux 平台 四、安装和导出项目依赖包1.使用pip命令自动生成requirement.txt项目依赖的模块2.从文件中一键安装项目中使用到的所有依赖包 五、拓展1.pip下载第…

13. Threejs案例-绘制3D文字

13. Threejs案例-绘制3D文字 实现效果 知识点 FontLoader 一个用于加载 JSON 格式的字体的类。 返回 font&#xff0c;返回值是表示字体的 Shape 类型的数组。 其内部使用 FileLoader 来加载文件。 构造器 FontLoader( manager : LoadingManager ) 参数类型描述managerLo…

音频二维码怎么制作出来的?支持多种格式音频生码的方法

怎么把一个音频的文件做成二维码图片呢&#xff1f;在日常工作和生活中&#xff0c;有很多的场景会需要使用音频类型的文件来展示内容&#xff0c;比如常见的英语听力、课程、听书等类型的内容&#xff0c;现在都可以用二维码展示。而且现在生成音频二维码的方法也很简单&#…

设置 相关

记录使用过程中做的设置相关事宜。方便后续查询 vscode如何自动生成html格式&#xff1a; vscode快速生成html模板 --两种方法&#xff0c;亲测有用_vscode自动生成html模板-CSDN博客 使用第二个方式。存储html格式后缀。输入&#xff01;&#xff0c;vscode自动补全。 安装…

uniapp中使用EelementPlus

uniapp的强大是非常震撼的&#xff0c;一套代码可以编写到十几个平台。这个可以在官网上进行查询uni-app官网。主要还是开发小型的软件系统&#xff0c;使用起来非常的方便、快捷、高效。 uniapp中有很多自带的UI&#xff0c;在创建项目的时候&#xff0c;就可以自由选择。而E…

自动驾驶IPO第一股及商业化行业标杆 Mobileye

一、Mobileye 简介 Mobileye 是全球领先的自动驾驶技术公司&#xff0c;成立于 1999 年&#xff0c;总部位于以色列耶路撒冷。公司专注于开发视觉感知技术和辅助驾驶系统 (ADAS)&#xff0c;并在自动驾驶领域处于领先地位。Mobileye 是高级驾驶辅助系统&#xff08;ADAS&#…

Container 命令ctr、crictl 命令

1、 Containerd和Docker的架构区别 Docker vs. Containerd&#xff1a; 2、ctr & crictl的区别 ctr是containerd的一个客户端工具 crictl 是 CRI 兼容的容器运行时命令行接口&#xff0c;可以使用它来检查和调试 Kubernetes 节点上的容器运行时和应用程序 crictl 则直接对…

[MFC] MFC消息机制的补充

之前写了[MFC] 消息映射机制的使用和原理浅析&#xff0c;还有些需要补充的&#xff0c;都记在这里。 MFC 消息的分类 MFC消息分为系统消息和自定义消息。 图片来源&#xff1a;C语言/C教程 大型源码案例分析&#xff1a;MFC消息系统的代码解析 易道云编程 系统消息分为窗口…

【JavaScript + CSS】随机生成十六进制颜色

效果图 实现 <template><div class"year_area"><div class"year_list"><el-row :span"24"><div :class"showAll"><el-col :span"5" v-for"(item, index) in defaulList" :key&…

【紧耦合新范式】Think-on-Graph:解决大模型在医疗、法律、金融等垂直领域的幻觉

Think-on-Graph&#xff1a;解决大模型在医疗、法律、金融等垂直领域的幻觉 Think-on-Graph 原理ToG 算法步骤&#xff1a;想想再查&#xff0c;查查再想实验结果 论文&#xff1a;https://arxiv.org/abs/2307.07697 代码&#xff1a;https://github.com/IDEA-FinAI/ToG Think…

开源节点框架STNodeEditor使用

节点&#xff0c;一般都为树形Tree结构&#xff0c;如TreeNode&#xff0c;XmlNode。 树形结构有其关键属性Parent【父节点】&#xff0c;Children【子节点】 LinkedListNode为链表线性结构&#xff0c;有其关键属性Next【下一个】&#xff0c;Previous【上一个】&#xff0c…