JavaScript单线程与定时器执行顺序详解

JavaScript单线程与浏览器多线程模型

JavaScript引擎采用单线程模型运行。

观察相关代码可知，若首个setTimeout回调中包含死循环，由于单线程特性，后续的两个定时器将失去执行机会。


<script type="text/javascript">
 setTimeout( function(){ while(true){} } , 100); 
 setTimeout( function(){ alert('你好!setTimeout'); } , 200); 
 setInterval( function(){ alert('你好!setInterval'); } , 200); 
</script>

浏览器内核采用多线程架构，各线程协同工作以维持同步。一个标准的浏览器至少包含三个常驻线程：JavaScript引擎线程、GUI渲染线程以及浏览器事件触发线程。

JavaScript引擎基于事件驱动模型，以单线程方式执行。引擎持续监听任务队列，一旦有新任务到达便立即处理。在任何时刻，浏览器中仅有一个JS线程在运行JS代码。GUI渲染线程负责界面的重绘与回流操作。需注意的是，GUI渲染线程与JS引擎互斥：当JS引擎执行时，GUI线程会被挂起，界面更新请求会被暂存至队列，待JS引擎空闲时立即执行。浏览器事件触发线程负责将事件（如鼠标点击、AJAX异步请求等）加入待处理队列尾部，等待JS引擎处理。尽管事件来源多样，包括当前执行的代码块（如setTimeout）或其他内核线程，但由于JS的单线程限制，所有事件必须排队等待处理。

JavaScript单线程与浏览器多线程模型

从相关图示可以看出，浏览器中的JavaScript引擎基于事件驱动机制运作。此处“事件”指代浏览器分配给引擎的各类任务。由于单线程约束，这些任务必须排队，由引擎逐一处理。

图中t1、t2...tn代表不同的时间点，每个时间点下方的小方块表示该时刻的任务。

在t1时刻：

事件队列与任务调度机制

1、GUI渲染线程 2、浏览器事件触发线程：在t1时间段内，用户首先点击鼠标。点击动作被浏览器事件触发线程捕获，形成鼠标点击事件。如图所示，对于JavaScript引擎线程而言，该事件由其他线程异步传入任务队列尾部。由于引擎正在处理t1时刻的任务，此鼠标点击事件处于等待处理状态。 3、定时触发线程：浏览器的定时计数器并非由JavaScript引擎计算，因为引擎是单线程的，若处于阻塞状态则无法计时。因此，计时与定时触发必须依赖外部机制，队列中的定时事件属于异步事件。 4、在t1时间段内，继鼠标点击事件触发后，先前设置的setTimeout定时到达。此时，定时触发线程产生一个异步定时事件并放入任务队列，该事件排在点击事件回调之后，等待处理。同理，在t1时间段内，后续添加的setInterval定时器因是间隔定时，在t1段内连续触发两次，这两个事件被排至队尾等待处理。 5、AJAX异步请求：浏览器开启独立的HTTP线程发起请求。当请求状态变更时，若已设置回调，该异步线程会产生状态变更事件，放入JavaScript引擎的处理队列中等待处理。

执行顺序对界面渲染的影响

任务的执行顺序不同，显示结果也会有所差异。

以下引用一段网络代码实例进行演示。


<a href="#" id="doBtn">do something</a>
<div id="status"></div>
<script type="text/javascript">
  var doBtn = document.getElementById('doBtn')
   , status = document.getElementById('status');

  function sleep(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn.onclick = function(e) {
   status.innerHTML = 'doing...please wait...'; 
   sleep(3000); // 模拟一个耗时较长的计算过程，3s
   status.innerHTML = 'done'; 
   return false;
  };
</script>

我在Firefox浏览器中执行了上述代码。预期逻辑是：点击“do something”按钮后，先显示“doing...please wait...”，接着执行sleep函数，最后显示“done”。

实际结果是：点击后浏览器卡顿约3秒，随后直接显示“done”。

分析可知，在设置status.innerHTML时，需要执行GUI渲染线程。但由于此时JavaScript引擎线程仍在运行，而JS引擎与GUI渲染线程互斥，导致界面更新被延迟，最终直接显示“done”。

利用定时器优化渲染时机

使用setTimeout函数的情况。


<a href="#" id="doBtn2">do something timer</a>
<div id="status2"></div>
<script type="text/javascript">
  var doBtn2 = document.getElementById('doBtn2')
   , status2 = document.getElementById('status2');

  function sleep2(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn2.onclick = function(e) {
   status2.innerHTML = 'doing...please wait...'; 
   setTimeout(function() {
   sleep2(3000); 
   status2.innerHTML = 'done'; 
   }, 100); 
   return false;
  };
</script>

在“doing...please wait...”后添加setTimeout进行延时执行，从而给予浏览器渲染的时间。此时会先显示“doing...please wait...”字样，随后执行sleep函数，最后显示“done”。

后续有网友反馈在Firefox中该方法无效，确实存在此问题。对此，我修改了代码，将局部变量声明及onclick事件绑定移至window.onload事件中，确保在页面结构加载完成后再执行脚本操作。


<script type="text/javascript">
  function sleep(ms) {
  //...
  }
  window.onload = function() {
   var doBtn = document.getElementById('doBtn'),
   status = document.getElementById('status');
   
   var doBtn2 = document.getElementById('doBtn2')
    , status2 = document.getElementById('status2');
    
   doBtn.onclick = function(e) {
    //...
   };
   doBtn2.onclick = function(e) {
    //...
   };
  };
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助。

深入解析JavaScript单线程机制与定时器执行原理

JavaScript单线程与浏览器多线程模型

事件队列与任务调度机制

执行顺序对界面渲染的影响

利用定时器优化渲染时机

实用工具推荐