深入理解JavaScript的单线程与异步机制

前言：

谈及JavaScript的单线程（single threaded）与异步（asynchronous）特性，许多人可能会感到困惑，认为这两者存在矛盾。事实上，单线程与异步确实无法同时作为语言本身的固有属性。JavaScript被设计为单线程语言，因此其核心运行时并非异步的。然而，JavaScript所运行的宿主环境（如浏览器或Node）具备多线程能力。宿主环境通过特定的机制（即下文将详述的事件驱动模式）赋予了JavaScript异步执行的能力。接下来，我们将揭示这一机制为何既简单又高效。

浏览器：

JavaScript是一种单线程语言，浏览器仅分配一个主线程用于执行代码（即函数调用）。该线程一次只能处理一个任务，所有任务需进入任务队列按序等待执行。然而，前端开发中涉及网络请求、定时器及事件监听等耗时操作。若这些任务与常规代码一样严格排队，将导致执行效率极低，甚至引发页面假死。为此，浏览器为这类耗时任务分配了独立的线程，主要包括HTTP请求线程、定时器触发器线程以及事件触发线程。这些任务以异步方式运行。下图展示了浏览器内部的主要线程结构。

一、任务队列

前文提到，浏览器为网络请求等异步任务分配了独立线程。那么，异步任务完成后，主线程如何获知并执行相关逻辑？答案在于回调函数。整个程序基于事件驱动模型，每个事件均绑定相应的回调函数。例如，以下代码设置了一个定时器：

setTimeout(function(){
    console.log(time is out);
}，50）;

执行该代码时，浏览器异步执行计时逻辑。当50毫秒到期后，定时器事件被触发，此时回调函数会被放入任务队列中。整个程序正是通过这样一系列事件驱动得以运行。 因此，JavaScript本身始终保持单线程特性，而异步能力的实现者实际上是浏览器。

说回主线程：

JavaScript主线程持续执行一项工作：从任务队列中取出任务，并将其放入主线程中执行。为了更深入地理解这一过程，我们进行进一步分析。

我们将前述概念与图示进行对应：前文提到的浏览器为异步任务开辟的独立线程，统一称为WebAPIs；前文提到的任务队列对应callback queue；图中由虚线标识的部分代表主线程。堆（heap）与栈（stack）共同构成了JavaScript的主线程环境。函数的执行通过进栈和出栈操作完成。例如，图中存在一个foo()函数，主线程将其压入栈中；在执行函数体时，若发现需执行其他嵌套函数，则将这些函数依次压入栈中；待函数执行完毕后，将其弹出栈。当栈（stack）清空时，表示当前任务执行完毕，此时主线程会从callback queue中查找下一个任务并压入栈中（这一查找过程称为事件循环，即event loop，因为它不断循环检查任务队列中是否仍有待处理的任务）。

二、借以解释几个容易困惑的问题

1、setTimeout(f1,0)是什么鬼

该语句的核心疑问在于：f1是否立即执行？答案是不一定，这取决于主线程中当前命令是否已执行完毕。参考以下代码：

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

2、Ajax请求是否异步

理解上述内容后，我们可知，ajax在获取内容时是异步进行的。当请求完成后，会触发请求完成事件，随后将回调函数放入callback queue。待主线程执行该回调函数时，依然遵循单线程执行规则。

3、界面渲染线程是单独开辟的线程

界面渲染线程是独立开辟的，这是否意味着DOM一旦变化，界面就会立即重新渲染？

若DOM每次变化都立即触发重新渲染，效率必然低下。因此，浏览器机制规定界面渲染线程与主线程互斥：当主线程执行任务时，浏览器渲染线程处于挂起状态。

三、如何利用浏览器的异步机制

我们已知JavaScript始终单线程执行，浏览器为部分明显的耗时任务开辟独立线程以解决性能问题。然而，开发者自定义的代码中也可能包含耗时函数。此时应如何处理？我们显然不能自行开辟独立线程，但可以利用浏览器提供的接口。浏览器定时器线程和事件触发线程易于利用，而网络请求线程则不适合直接用于此类场景。具体方案如下：

假设耗时函数为f1，且f1是f2的前置任务。

利用定时器触发线程：

function f1(callback){
setTimeout(function(){
    // f1 的代码
    callback();
},0);
}
f1(f2);

此种写法耦合度较高。

利用事件触发线程：

$f1.on('custom',f2);  //这里绑定事件以jQuery写法为例
function f1(){
setTimeout(function(){
    // f1的代码
    $f1.trigger('custom');
},0);
}

该方法通过绑定自定义事件，对方法一进行了解耦。通过绑定不同事件，可实现不同的回调函数。但若过度使用此方法，将不利于代码阅读。

四、异步的好处和适合的场景

异步的好处：

我们通过一个实例对比同步与异步执行。假设有四个任务（编号1至4），每个任务执行耗时均为10毫秒。其中，任务2是任务3的前置任务，且任务2需要20毫秒的响应时间。通过以下对比，即可理解非阻塞I/O的实现方式：

适合的场景：

由此可见，当程序涉及大量I/O操作和用户请求时，JavaScript这种兼具单线程、异步及事件驱动特性的语言显得尤为契合。相较于多线程语言，它无需消耗过多的系统资源，也无需投入精力处理复杂的线程管理；相较于同步执行的语言，宿主环境的异步与事件驱动机制又使其实现了非阻塞I/O。因此，你应当清楚JavaScript适合的应用场景了。

到此这篇关于JavaScript的单线程和异步详细的文章就介绍到这了,更多相关JavaScript的单线程和异步内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！