首页 > 其他分享 >js任务执行顺序

js任务执行顺序

时间:2022-10-24 17:00:27浏览次数:53  
标签:异步 顺序 渲染 js 任务 同步 执行

JS 线程简述

js是单线程的,一次只能执行一个任务,执行完毕后才能继续下一个。

js执行任务的方式也叫作同步执行,同步和异步与我们平时理解的不太一样,平时的同步我们会认为是多个事情一起做,但是在js中我们所谓的同步任务是一个接一个的像是排队一样的去做。

同步任务是指在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务,当我们打开网站时,网站的渲染过程,比如元素的渲染,其实就是一个同步任务

但是只有同步任务是不能满足日常的一些需求的,这个时候便出现了一个异步概念。

异步任务是指不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程,当我们打开网站时,像图片的加载,音乐的加载,其实就是一个异步任务

js中的异步任务又分宏任务和微任务(大概如下所示):

宏任务:渲染事件、请求、script、setTimeout、setInterval

微任务:Promise.then、MutationObserver(监听DOM)

JS 执行机制

现在我们已经知道了js的同步和异步任务以及异步任务中的宏任务和微任务,下面就是执行顺序的问题啦。

当执行任务栈中的同步任务执行完后,就会去任务队列中拿一个宏任务放到执行栈中执行,执行完该宏任务中的所有微任务,再到任务队列中拿宏任务,即一个宏任务、所有微任务渲染、一个宏任务、所有微任务渲染...(不是所有微任务之后都会执行渲染),如此形成循环,即事件循环(EventLoop) 简单来讲就是: 同步任务01 > 异步任务 > 宏任务01 > 微任务01 > 微任务02... > 宏任务02...  

 

标签:异步,顺序,渲染,js,任务,同步,执行
From: https://www.cnblogs.com/sixrookie/p/16822013.html

相关文章

  • html5中播放rtsp流实现监控、直播等方案(利用Ffmpeg + node.js + websocket + flv.js实
    前提:需要确认你的服务器环境中是否安装了ffmpeg这个工具,因为转码的核心其实就是通过 ffmpeg命令 转码,需要你通过在命令行里输入 ffmpeg 来确认。   安装参考:htt......
  • crontal 计划任务
    crontab每分钟定时执行:*/1****servicemysqldrestart//每隔1分钟执行一次*/10****servicemysqldrestart//每隔10分钟执行一次crontab每小时定时执行:0*......
  • js创建对象的方式
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>创建对象的方式</title></head><body><script>//所有JavaScript对象都从原型继承属......
  • vue本地项目启动时遇到coreJs相关报错问题处理
    启动项目的时候报错:   是因为core.js这个包丢失,需要大家重新下载即可;yarnaddcore-js ......
  • d3js(D3JS 不规则图形)
    d3js做的图表怎么放在html中的指定位置啊定义div的id,比如为id1,定义svg时用d3.select("#id1")而不是d3.select("body")SingleSelection参考例子:#varsvg=d3.sele......
  • leetcode 32. 最长有效括号 js实现
    https://leetcode.cn/problems/longest-valid-parentheses/给你一个只包含'(' 和')' 的字符串,找出最长有效(格式正确且连续)括号子串的长度。示例1:输入:s="(()"输出......
  • 调用layer内部js方法
    调用layer内部名为Func的方法$("#layui-layer-iframe"+layerId)[0].contentWindow.Func();获取layerIdlayerId=layer.open({type:2,......
  • left join where 执行顺序
    参考:测试leftjoin和where的优先级SQLLEFTJOINWHERE的执行顺序--createtabletab1--(--idint,--sizeint--)--createtabletab2--(--sizeint,--namevarchar(10......
  • Java-JVM调优jstack找出最耗cpu的线程&定位问题代码
    Java-JVM调优jstack找出最耗cpu的线程&定位问题代码 https://blog.csdn.net/shasiqq/article/details/109801683   JVM调优jstack找出最耗cpu的线程&定位问题代码......
  • 常用的js方法
    方法名功能是否会改变原数组备注string.trim()去除字符串的头尾空格否不适用于null,undefined,Number类型array.reverse()颠倒数组中元素的顺序是......