js线程

来源：互联网发布：印刷报价软件下载编辑：程序博客网时间：2024/06/03 17:41

最近在遇到一个问题：HTML页面中的页面无法刷新，只能在底层全部处理完成后才能进行页面刷新。在里面已经采用SetTimeout进行了处理，但是明显没有达到预期的效果。

主要的原因是对SetTimeout这个函数并未清楚，对Javascript单线程也没有清晰的认识。

浏览器中的线程介绍

通常一个浏览器会至少存在三个线程：JS引擎线程（用于处理JS）、GUI渲染线程（用于页面渲染）、浏览器时间触发线程（用于控制交互）。

而因为JS可以操作DOM元素，进而会影响到GUI的渲染结果，因此JS引擎线程与GUI渲染线程是互斥的。也就是说当JS引擎线程处于运行状态时，GUI渲染线程将处于冻结状态。

JS引擎是基于事件驱动，采用的是单线程运行机制。即JS引擎会只会顺序的从任务列表中取任务，并执行。

SetTimeout/SetInternal

其中SetTiemout：在指定的毫秒数后调用指定的代码段；SetInternal：在指定的时间间隔内（ms）循环调用指定的代码段。这两个函数内都涉及到时间计数器，也就是都涉及到一个类似与MFC定时器。JS引擎本身就只能单线程运行，因此定时器需要由其他的外部线程来启动。所以对JS引擎而言，定时器线程可以被视为异步线程。但当定时器时间到达后，所触发的事件则必须在任务列表中排队，等候JS引擎的处理。
关于setTimeout下面有一个例子，可以帮助深入理解：

        setTimeout(function () { while (true) { } }, 1000);        setTimeout(function () { alert('end 2'); }, 2000);        setTimeout(function () { alert('end 1'); }, 100);        alert('end');

执行的结果是弹出‘end’‘end 1’，然后浏览器假死，就是不弹出‘end 2’。也就是说第一个settimeout里执行的时候是一个死循环，这个直接导致了理论上比它晚一秒执行的第二个settimeout里的函数被阻塞，这个和我们平时所理解的异步函数多线程互不干扰是不符的。

0 0