光大彩票

让梦想从这里开始

因为有了梦想,我们才能拥有奋斗的目标,而这些目标凝结成希望的萌芽,在汗水与泪水浇灌下,绽放成功之花。

关于 JavaScript 事件循环 Event Loop 的一些理解

发布日期:2022-09-18 12:57    点击次数:185

浏览器JavaScript执行流程以及在Node.js中都是基于事件循环的。

了解事件循环的工作原理对于正确编写健壮和高性能的JavaScript代码非常重要。

本文首先介绍有关事物如何工作的理论细节,然后介绍这些知识的实际应用。

事件循环遵循下面的处理范式:

任务被设置——引擎处理它们——然后等待更多任务(在睡眠和消耗接近于零的CPU事件)。

如果在JavaScript执行引擎忙时又有新任务达到,这些新任务会被排队,形成一个队列,即所谓的宏任务队列(v8术语)。

例如,当引擎忙于执行脚本时,用户可能会移动鼠标导致mousemove,setTimeout可能会到期等等,这些任务形成一个队列,如上图所示。

队列中的任务以先到先处理的方式被引擎处理。当引擎浏览器完成脚本后,它会处理mousemove事件,然后是setTimeout处理程序,等等。

注意以下两点:

当引擎执行任务时,渲染永远不会发生。任务是否需要很长时间并不重要。仅在任务完成后才绘制对DOM的更改。

如果一项任务花费的时间太长,浏览器就无法执行其他任务,例如处理用户事件。所以一段时间后,浏览器会发出PageUnresponsive之类的警报,建议用整个页面杀死任务。当有很多复杂的计算或导致无限循环的编程代码错误时,就会发生这种情况。

假设我们有一个CPU密集型任务。

例如,语法高亮(用于为本页上的代码示例着色)占用大量CPU。为了突出显示代码,它执行分析,创建许多彩色元素,将它们添加到文档中。

当引擎忙于语法高亮时,它不能做其他与DOM相关的事情,处理用户事件等。它甚至可能导致浏览器失去响应。

我们可以通过将大任务分成几部分来避免问题。突出显示前100行,然后为接下来的100行安排setTimeout(零延迟),依此类推。

为了演示这种方法,为了简单起见,让我们使用一个从1计数到1000000000的函数,而不是文本突出显示。

如果您运行下面的代码,JavaScript引擎将挂起一段时间。如果在浏览器中运行,尝试单击页面上的其他按钮-会看到在计数完成之前没有其他事件得到处理。

leti=0;letstart=Date.now;functioncount{//doaheavyjobfor(letj=0;j

将任务使用setTimeout拆分,确保队列中的其他任务有得到执行的机会:

leti=0;letstart=Date.now;functioncount{//doapieceoftheheavyjob(*)do{i++;}while(i6!=0);if(i==1e9){alert("Donein"+(Date.now-start)+'ms');}else{setTimeout(count);//schedulethenewcall(**)}}count;






Powered by 光大彩票 @2013-2022 RSS地图 HTML地图