首页 > 编程语言 > JavaScript入门⑨-异步编程●异世界之旅

JavaScript入门⑨-异步编程●异世界之旅

时间:2022-12-09 08:55:26浏览次数:68  
标签:异步 编程 console log JavaScript value JS 线程

image.png

JavaScript入门系列目录

01、JS线程与事件循环

JavaScript的是单线程的语言,按顺序执行。事件循环(Event loop)是JS的运行机制,也是JS实现各种“异步”功能的基础。

1.1、浏览器进程

image.png

浏览器本身是多进程的(Edge/Chrome),在系统的的任务管理器中可以看到,只打开了一个页面,却有多个进程。其中渲染进程(浏览器内核)就是页面的管家,负责页面的渲染、脚本执行、事件等,每个页面(浏览器页签)会有一个独立的管家——渲染进程。

image.png

而在渲染进程中,又有多个线程,具有不同的职责,负责不同的事务。比如有定时器线程、HTTP请求线程、事件触发线程、渲染线程、JS引擎线程等,除了HTTP线程基本都是单线程。

  • 定时器线程,就是用于管理setTimeout/setInterval定时任务的,当到达指定时间了就把要执行的任务(函数)放到一个任务队列中,等待JS引擎去执行。so,定时器一般都不准,有一点延迟。也不能这么说,定时器并没有错,应该是队列和JS引擎的问题。
  • HTTP请求线程,负责执行HTTP请求,包括各种资源加载。当请求完成、或请求的状态变化时,把触发的回调函数放入事件队列,交给JS线程去执行。
  • GUI线程:负责浏览器页面的渲染,如解析HTML、CSS,构建DOM树,布局计算和绘制等。GUI线程和JS线程是互斥的,所以当JS执行一个长任务时,会造成页面UI的卡顿。
  • 事件触发线程:用来控制事件的循环,各种事件首先是会在事件触发线程里处理,当满足条件触发事件执行时,把待执行的事件处理任务(函数)添加到JS的任务队列中。
  • 标签:异步,编程,console,log,JavaScript,value,JS,线程
    From: https://www.cnblogs.com/anding/p/16890552.html

相关文章

  • 云计算-CPU 并行编程-科研路-电动汽车分析
    云计算-CPU并行编程-科研路-电动汽车分析参考文献链接https://mp.weixin.qq.com/s/TSsmcW2i8so_dZ86TRKn0Ahttps://mp.weixin.qq.com/s/19vs_187sVEpW7c4L2aT5whttps:......
  • JavaScript:操作符: 逗号运算符
    逗号运算符,是极少见的运算符,我们看一下代码理解一下逗号运算符的功能:先说结论,逗号运算符的优先级非常低,比赋值运算符=还要低;同时,逗号隔开的几个表达式,都会各自进行计算,......
  • JavaScript:操作符: 空值合并运算符(??)
    这是一个新增的运算符,它的功能是:对于表达式1??表达式2,如果表达式1的结果是null或者undefined时,返回表达式b的结果;否则返回表达式a的结果;它与赋值运算符结合使用,即??=,即......
  • JavaScript:操作符:操作符的特点
    在JS中,所有的操作符,都同时在做两件事,第一件事是进行计算,第二件事是返回计算的结果,这个结果需要有变量去接收,否则就成为无人认领的数据而被垃圾回收;在JS中,有很多不常用的......
  • JavaScript:操作符:正负号和自增自减及其隐式转换
    正负号正号即加号,负号即减号,运算结果同数学意义一样;对非数字类型进行正负号运算,会隐式转换为数字,再进行运算;一些特殊的非数字,转换情况同算术运算符;自增自减自增即为++......
  • JavaScript:操作符:比较运算符及其隐式转换
    不等关系即大于>;大于等于>=;小于<;小于等于<=当比较的两个变量,有非数字时,会隐式转换为数字再比较,转换情况同算术运算符;当两个变量均为字符串时,不会进行转换,而是逐位比较......
  • JavaScript:操作符:逻辑运算符及其隐式转换
    逻辑非!用来对布尔值进行取反,即!true=false;当取反的变量不是布尔值,会进行隐式转换为布尔值:非0的数字,都转换为true非空字符串,转换为true非空对象,转换为trueInf......
  • JavaScript:操作符:算术运算符(加减乘除模幂)及其隐式转换
    加法+减法-乘法*除法/模运算%幂运算**,即a**b求的是a的b次方执行上述运算时,当两个操作数有非数字时,JS会隐式转换为数字,再进行运算;一些特殊的非数字,会进行如下转......
  • JavaScript:操作符:赋值运算符和空赋值(??=)
    =号是赋值运算,即返回符号右边的结果,同时将结果赋值给符号左边的变量,考虑下面代码的运行结果:赋值运算b=1+1,做了两件事,先返回符号右边的结果,即2,这个2将参与a=1+2......
  • JavaScript:七大基础数据类型:布尔值boolean、空null、未定义undefined
    布尔值boolean没什么好说的,同其他编程语言一样,就两个值:true和false;空nullJS的null,和Java等编程语言的概念不一样,它不是一个“不存在的对象”的引用,不是一个“null”指......