欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

单线程JS与多线程浏览器的使用

程序员文章站 2022-04-30 14:16:06
...
这次给大家带来单线程JS与多线程浏览器的使用,单线程JS与多线程浏览器的使用的注意事项有哪些,下面就是实战案例,一起来看一下。

JS语言是单线程的,浏览器只分配给js一个主线程,用来执行任务(函数),但一次只能执行一个任务,这些任务形成一个任务队列排队等候执行。

浏览器是多线程的

前端某些任务是非常耗时的,比如网络请求,定时器和事件监听,如果让他们和别的任务一样,都老老实实的排队等待执行的话,执行效率会非常的低,甚至导致页面的假死。所以,浏览器是多线程的,例如Webkit或是Gecko引擎,都可能有如下线程:

javascript引擎线程

http请求线程

界面渲染线程

浏览器事件触发线程

JS单线程与Ajax异步

既然说JS是单线程运行的,那么为什么XMLHttpRequest在连接后是异步的?这是由浏览器新开一个线程请求。当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的事件处理队列中等待处理。当浏览器空闲的时候出队列任务被处理,JavaScript引擎始终是单线程运行回调函数。javascript引擎确实是单线程处理它的任务队列,能理解成就是普通函数和回调函数构成的队列。
即Ajax请求确实是异步的,这是由浏览器新开一个线程请求,事件回调的时候是放入Event loop单线程事件队列等候处理。

JS事件循环机制(Event loop)

Javascript有一个main thread 主进程和call-stack(一个调用堆栈),在对一个调用堆栈中的task处理的时候,其他的都要等着。当在执行过程中遇到一些类似于setTimeout等异步操作的时候,会交给浏览器的其他模块(以webkit为例,是webcore模块)进行处理,当到达setTimeout指定的延时执行的时间之后,task(回调函数)会放入到任务队列之中。一般不同的异步任务的回调函数会放入不同的任务队列之中。等到调用栈中所有task执行完毕之后,接着去执行任务队列之中的task(回调函数)。

在上图中,调用栈中遇到DOM操作、ajax请求以及setTimeout等WebAPIs的时候就会交给浏览器内核的其他模块进行处理,webkit内核在Javasctipt执行引擎之外,有一个重要的模块是webcore模块。对于图中WebAPIs提到的三种API,webcore分别提供了DOM Binding、network、timer模块来处理底层实现。等到这些模块处理完这些操作的时候将回调函数放入任务队列中,之后等栈中的task执行完之后再去执行任务队列之中的回调函数。

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

关于js中类型转换的一些小问题

JS中的隐式类型转换

以上就是单线程JS与多线程浏览器的使用的详细内容,更多请关注其它相关文章!