正文 

当前位置： 首页 > java > java语法

单线程的javascript

张啊咩      2022-02-12     469

关键词：

Javascript是单线程的

因为JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。而浏览器是事件驱动的（Event driven），浏览器中很多行为是异步（Asynchronized）的，会创建事件并放入执行队列中。javascript引擎是单线程处理它的任务队列，你可以理解成就是普通函数和回调函数构成的队列。当异步事件发生时，如mouse click, a timer firing, or an XMLHttpRequest completing（鼠标点击事件发生、定时器触发事件发生、XMLHttpRequest完成回调触发等），将他们放入执行队列，等待当前代码执行完成。

异步事件驱动

前面已经提到浏览器是事件驱动的（Event driven），浏览器中很多行为是异步（Asynchronized）的，例如：鼠标点击事件、窗口大小拖拉事件、定时器触发事件、XMLHttpRequest完成回调等。当一个异步事件发生的时候，它就进入事件队列。浏览器有一个内部大消息循环，Event Loop（事件循环），会轮询大的事件队列并处理事件。例如，浏览器当前正在忙于处理onclick事件，这时另外一个事件发生了（如：window onSize），这个异步事件就被放入事件队列等待处理，只有前面的处理完毕了，空闲了才会执行这个事件。setTimeout也是一样，当调用的时候，js引擎会启动定时器timer，大约xxms以后执行xxx，当定时器时间到，就把该事件放到主事件队列等待处理（浏览器不忙的时候才会真正执行）。

浏览器不是单线程的

虽然JS运行在浏览器中，是单线程的，每个window一个JS线程，但浏览器不是单线程的，例如Webkit或是Gecko引擎，都可能有如下线程：

  • javascript引擎线程
  • 界面渲染线程
  • 浏览器事件触发线程
  • Http请求线程

很多童鞋搞不清，如果js是单线程的，那么谁去轮询大的Event loop事件队列？答案是浏览器会有单独的线程去处理这个队列。

Ajax异步请求是否真的异步?

 

很多童鞋搞不清楚，既然说JavaScript是单线程运行的，那么XMLHttpRequest在连接后是否真的异步? 
其实请求确实是异步的，这请求是由浏览器新开一个线程请求（见前面的浏览器多线程）。当请求的状态变更时，如果先前已设置回调，这异步线程就产生状态变更事件放到 JavaScript引擎的事件处理队列中等待处理。当浏览器空闲的时候出队列任务被处理，JavaScript引擎始终是单线程运行回调函数。javascript引擎确实是单线程处理它的任务队列，能理解成就是普通函数和回调函数构成的队列。

 

总结一下，Ajax请求确实是异步的，这请求是由浏览器新开一个线程请求，事件回调的时候是放入Event loop单线程事件队列等候处理。

 

setTimeout(func, 0)为什么有时候有用？

 

写js多的童鞋可能发现，有时候加一个setTimeout(func, 0)非常有用，为什么？难道是模拟多线程吗？错！前面已经说过了，javascript是JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，setTimeout(func, 0)神奇在哪儿？那就是告诉js引擎，在0ms以后把func放到主事件队列中，等待当前的代码执行完毕再执行，注意：重点是改变了代码流程，把func的执行放到了等待当前的代码执行完毕再执行。这就是它的神奇之处了。它的用处有三个：

 

  • 让浏览器渲染当前的变化（很多浏览器UI render和js执行是放在一个线程中，线程阻塞会导致界面无法更新渲染）
  • 重新评估”script is running too long”警告
  • 改变执行顺序

 

非阻塞js的实现（non-blocking javascript）

 

defer

 

<script type="text/javascript" defer src="foo.js"></script>

 

async

<script type="text/javascript" async src="foo.js"></script>

然后第二种方法是动态加载js：

 

setTimeout(function(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "foo.js";
    var head = true; //加在头还是尾
    if(head)
      document.getElementsByTagName("head")[0].appendChild(script);
    else
      document.body.appendChild(script); 
}, 0);
 
//另外一个独立的动态加载js的函数
function loadJs(jsurl, head, callback){
    var script=document.createElement(‘script‘);
    script.setAttribute("type","text/javascript");
     
    if(callback){
        if (script.readyState){  //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" ||
                        script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {  //Others
            script.onload = function(){
                callback();
            };
        }
    }
    script.setAttribute("src", jsurl);
     
    if(head)
     document.getElementsByTagName(‘head‘)[0].appendChild(script); 
    else
      document.body.appendChild(script); 
 
}

 

 

 


javascript单线程和异步机制

随着对JavaScript学习的深入和实践经验的积累，一些原理和底层的东西也开始逐渐了解。早先也看过一些关于js单线程和事件循环的文章，不过当时看的似懂非懂，只留了一个大概的印象：浏览器中的js程序时是单线程的。嗯，就... 查看详情

单线程 JavaScript 下的动画

】单线程JavaScript下的动画【英文标题】：AnimationsundersinglethreadedJavaScript【发布时间】：2016-05-2314:15:44【问题描述】：JavaScript是一种单线程语言，因此它一次执行一个命令。异步编程是通过WebAPIs（DOM用于事件处理，XMLHttpRequest用... 查看详情

javascript是单线程的深入分析（转）

...文：http://blog.csdn.net/talking12391239/article/details/21168489 Javascript是单线程的因为JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。而浏览... 查看详情

［转］javascript是单线程的深入分析

Javascript是单线程的深入分析面试的时候发现99%的童鞋不理解为什么JavaScript是单线程的却能让AJAX异步发送和回调请求，还有setTimeout也看起来像是多线程的？还有non-blockingIO,eventloop等概念很不清楚。来深入分析一下：首先看下面... 查看详情

前端小知识点：javascript单线程

目录一、为什么JavaScript是单线程？二、JavaScript是单线程，怎样执行异步的代码？ 查看详情

前端小知识点：javascript单线程

目录一、为什么JavaScript是单线程？二、JavaScript是单线程，怎样执行异步的代码？ 查看详情

javascript是单线程的而且是异步的机制

...就有好多的疑问 ，现在按我的理解和大家说一说一、JavaScript单线程　　在浏览器中，执行JS程序只有一个线程，所以是单线程，所以执行顺序就是从上到下依次执行，同一段时间内只能有一段代码被执行。你可能会问，为什... 查看详情

javascript的运行机制

1.JavaScript的单线程机制2.任务队列（同步任务和异步任务）3.事件和回调函数4.定时器5.EventLoop事件循环一、JavaScript的单线程机制，JavaScript的使用单线程是由其主要用途有关，JavaScript是在用户互动、操作DOM元素，如果使用多线程... 查看详情

前端开发技术-剖析javascript单线程

JavaScript单线程和多线程是很多小白同学入门的时候问到最多的问题，虽然官方给出过解释但对于新手来说并不友好，今天小千就来给大家介绍一下JavaScript的单线程。一、浏览器的进程和线程浏览器的架构是多进程的࿰... 查看详情

从javascript单线程谈eventloop

...如面试回答js的运行机制时，你可能说出这么一段话：“Javascript的事件分同步任务和异步任务，遇到同步任务就放在执行栈中执行，而碰到异步任务就放到任务队列之中，等到执行栈执行完毕之后再去执行任务队列之中的事件。... 查看详情

javascript运行机制

JavaScript运行机制阅读目录一、为什么JavaScript是单线程？二、任务队列三、事件和回调函数四、EventLoop五、定时器六、Node.js的EventLoop七、关于setTimeout的测试一、为什么JavaScript是单线程？JavaScript语言是单线程，也就是说，同一个... 查看详情

深入理解javascript单线程谈eventloop

...如面试回答js的运行机制时，你可能说出这么一段话：“Javascript的事件分同步任务和异步任务，遇到同步任务就放在执行栈中执行，而碰到异步任务就放到任务队列之中，等到执行栈执行完毕之后再去执行任务队列之中的事件。... 查看详情

javascript异步机制

单线程异步执行的JavaScriptJavaScript是单线程异步执行的，单线程意味着代码在任务队列中会按照顺序一个接一个的执行。异步代表JavaScript代码在任务队列中的顺序并不完全等同于代码的书写顺序，比如事件绑定、Ajax、setTimeout()... 查看详情

javascript运行机制详解(代码片段)

一、为什么JavaScript是单线程？JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言... 查看详情

js单线程

众所周知，JavaScript是以单线程的方式运行的。一、为什么js是单线程？这与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。若以多线程的方式操作这些DOM，则可能出现操作的冲突。假设有... 查看详情

javascript运行机制详解：eventloop

一、为什么JavaScript是单线程？JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言... 查看详情

如果 Javascript 是单线程的，那么像时钟这样的东西是如何工作的？

】如果Javascript是单线程的，那么像时钟这样的东西是如何工作的？【英文标题】：IfJavascriptissinglethreaded,howthingslikeaclockwork?【发布时间】：2020-09-1503:57:26【问题描述】：我的意思是，也许我错了，完全不理解单线程的含义，但我... 查看详情

深入理解javascript运行机制

JavaScript单线程机制JavaScript的一个语言特性（也是这门语言的核心）就是单线程。什么是单线程呢？简单地说就是同一时间只能做一件事，当有多个任务时，只能按照一个顺序一个完成了再执行下一个为什么JS是单线程的呢？JS最... 查看详情