首页 > 技术文章 > js的单线程与异步

leyan 2018-06-04 18:19 原文

    一、 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);
}

 

推荐阅读