js的单线程与异步

一、 js 是单线程和异步

1、 js 是单线程的，js 的宿主环境（浏览器）是多线程的，实现异步。

2、js是单线程语言，浏览器值分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行。

3、 前端中有些任务是非常耗时的，比如：  网络请求、定时器和事件监听。为此浏览器开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些都是异步的。

二、主线程与异步的结合

浏览器为网络请求这样的异步任务单独开了一条线程，那异步任务完成后，住线程怎么知道的呢？回调函数，整个程序是事件驱动的，每个事件都绑定相应的回调函数。

1、

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

这段代码输出结果是2，1。

2、ajax请求是否异步

ajax请求内容的时候是异步的，当请求完成后，会触发请求完成的事件，然后把回调函数放入callback queue, 等到主线程执行该回调函数是还是单线程的。

3、界面渲染线程是单独开辟的线程，是不是dom一变化，界面就立刻重新渲染？

如果DOM一变化，界面就立刻重新渲染，效率必然很低，所以浏览器的机制规定界面渲染线程和主线程是互斥的，主线程执行任务时，浏览器渲染线程处于挂起状态。

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

js是单线程的，除了这几个明显的耗时问题外，可能我们自己写的程序里面也会有耗时的函数。这种情况，我们需要利用浏览器的异步机制。

1、利用定时器触发线程

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

2、利用事件触发线程

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