浏览器线程与setTimeout(...,0)

crossoverJie 发布于2019-08-22 10:49 / 355人阅读

摘要：参考可否多线程深入理解定时机制到这里就要说另一个问题的异步问题在中我们常常使用的方式来处理的异步炒个栗子输出不信点我试试并没有把你的回调函数挂在事件循环队列中。

浏览器三个常驻线程

浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程:

javascript引擎线程

javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序

GUI渲染线程

GUI渲染线程负责渲染浏览器界面,当页面需要重绘(repaint)或由于某种操作引发的回流(reflow)时,该线程就会执行.但是,需要注意的是GUI渲染线程与javascript引擎线程是互斥的,当js引擎执行时,GUI线程就会被挂起,GUI更新会被保存在一个队列中,等待js引擎空闲时立即被执行.

事件触发线程

事件触发线程，当一个事件被触发时,该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。
参考:
JavaScript可否多线程? 深入理解JavaScript定时机制

到这里, 就要说另一个问题, js的异步问题

setTimeout(...,0)

在js中,我们常常使用setTimeout(function(){},0)的方式来处理js的异步.
炒个栗子

console.log(1);
setTimeout(function(){console.log(2)},0);
console.log(3);

输出: 1 , 3, 2
不信点我试试
setTimeout(..) 并没有把你的回调函数挂在事件循环队列中。它所做的是设定一个定时器。
当定时器到时后,环境会把你的回调函数放在事件队列中,如果这时候事件循环中已经有 20 个项目了会怎样呢?你的回调就会等待,定时器只能确保你的回调函数不会在指定的时间间隔之前运行,但可能会在那个时刻运行,也可能在那之后运行,要根据事件队列的状态而定(PS: 这就是造成定时器不准确的缘由)。

setTimeout(..0)(hack)进行异步调度,基本上它的意思就是把这个函数插入到当前事件循环队列的结尾处。

正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身，先执行所有的同步再执行所有的异步.
炒个栗子

for(var i = 0;i < 3;i++){
setTimeout(function(){
alert("知乎");
},0)
alert(i);
}

点我看看
输出: 0 1 2 知乎知乎知乎，
setTimeout第二个参数为0表示立即执行。当使用这个方法的时候，浏览器会另起一个线程，来执行setTimeout里面的函数，而原有的线程继续执行, 待原有线程结束后,在执行后面的线程(js单线程)。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91323.html

浏览器与Node的事件循环(Event Loop)有何区别?

摘要：事件触发线程主要负责将准备好的事件交给引擎线程执行。它将不同的任务分配给不同的线程，形成一个事件循环，以异步的方式将任务的执行结果返回给引擎。 Fundebug经作者浪里行舟授权首发，未经同意请勿转载。前言本文我们将会介绍 JS 实现异步的原理，并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的。一、线程与进程 1. 概念我们经常说 JS 是单线程执行的，...

TANKING 2019-08-23 14:43 评论0 收藏0
JS单线程与setTimeout执行原理

摘要：引擎单线程机制首先明确，引擎是单线程机制。是单线程执行的，无法同时执行多段代码。解析是单线程的，所以会先执行再，但这个循环体是死循环，所以永远不会执行。 Javascript 引擎单线程机制首先明确，JavaScript引擎是单线程机制。 JavaScript 是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个任务队列。一旦当前任务...

tabalt 2019-08-23 16:26 评论0 收藏0
前端计划——JavaScript中关于setTimeout的那些事

摘要：需要注意的是，及更早的浏览器不支持第一种语法中向延迟函数传递额外参数的功能。如果在不改变递归模式的前提下修善这段代码解决方案加入定时器题目四考察和系列解释立即的对象，是在本轮事件循环的结束时，而不是在下一轮事件循环的开始时。前言：setTimeout是JavaScript中常见的一个window对象方法，本文将介绍关于它的一些基础知识和易出错的地方。 1、基础知识作用：setTim...

sihai 2019-08-20 17:16 评论0 收藏0
事件循环机制

摘要：事件触发线程主要负责将准备好的事件交给引擎线程执行。进程浏览器渲染进程浏览器内核，主要负责页面的渲染执行以及事件的循环。第二轮循环结束。将自己读到的比较好的文章分享出来，大家互相学习，各位大佬有好的文章也可以留个链接互相学习，万分感谢！线程与进程关于线程与进程的关系可以用下面的图进行说明： showImg(https://segmentfault.com/img/bVbjSZt?...

Blackjun 2019-08-29 17:21 评论0 收藏0
事件循环机制

摘要：事件触发线程主要负责将准备好的事件交给引擎线程执行。进程浏览器渲染进程浏览器内核，主要负责页面的渲染执行以及事件的循环。第二轮循环结束。将自己读到的比较好的文章分享出来，大家互相学习，各位大佬有好的文章也可以留个链接互相学习，万分感谢！线程与进程关于线程与进程的关系可以用下面的图进行说明： showImg(https://segmentfault.com/img/bVbjSZt?...

CloudwiseAPM 2019-08-26 13:25 评论0 收藏0