关键词：
JavaScript单线程和多线程是很多小白同学入门的时候问到最多的问题，虽然官方给出过解释但对于新手来说并不友好，今天小千就来给大家介绍一下JavaScript的单线程。
一、 浏览器的进程和线程
浏览器的架构是多进程的，不同的浏览器采用不同的进程架构，这个没有统一的标准,以谷歌浏览器为例，他主要有四个进程，分别是顶层的Browser process，负责标签页网页呈现的Renderer Process，负责控制网页插件的Plugin Process和负责处理GPU的GPU Process。
每个进程都可以通过创建线程或者调用线程来完成任务。打个比方，进程就相当于一个 公司，线程就相当于公司的一个部门，一个公司可以只有一个部门也可以有多个部分，公司内部的资源是共享的。
二、浏览器的渲染进程
我们前端主要和Renderer Process打交道，在这个进程里面主要包含五个线程：
1、GUI渲染线程，用于解析html、css，构建DOM树和RenderObject树，布局和绘制等浏览器界面渲染任务|不能和JS引擎线程同时执行。
2、js引擎线程，也就是我们常说的js内核，用于解析、运行javascript代码，不能和GUI渲染线程同时执行。
3、事件触发线程，用于监听和触发事件，可以理解成由js引擎线程来执行事件绑定代码，然后另开事件触发线程用来监听事件的触发，触发以后把事件处理函数里面的代码交给js引擎线程来执行，但是js是单线程的，事件处理函数里面的代码会添加到待处理队列的末尾，也就是等js线程空闲以后才会执行。
4、定时触发器线程，就是经常使用的setInterval与setTimeout所使用的线程，可以理解成由js引擎线程来定义一个定时器，但是定时器的计数是另开单独线程来计时并触发定时，计时时间到了以后，把要执行的回调函数里面的代码添加到待处理队列的末尾，等待js线程空闲以后执行。
5、http请求线程，在我们使用XMLHttpRequest对象发送http请求的时候，是新开一个线程请求，检测到对象状态改变时，如果绑定了回调函数，异步线程就产生状态变更事件，将这个回调里面的代码添加到js线程末尾。
三、js引擎线程的单线程
1、分析下面代码执行过程，以定时器触发线程为例看不同线程和js线程的执行过程：
在上面代码中，js代码是由js引擎线程执行的，这里要明确，js是单线程的，同一时间只能执行一个的任务，所以有多个等待任务的时候需要排队，排在前面的先执行，排在后面的要等待前面任务完成才能执行。开始的t1时间里面，代码至上而下执行，当碰到setTimeout，这是个定时器，需要计时，把这个计时的任务交给定时触发器线程（时间到了以后把要执行的代码排队到t1的后面t2时间里面），继续执行js代码。
2、分析下面代码执行过程，观察js引擎线程和GUI线程的互斥：
在上面代码中，开始的t1时间里面，代码至上而下执行，当碰到事件绑定的时候，把这个事件监听的任务交给事件触发线程，继续执行js代码。当用户点击按钮，事件触发线程监听到事件，把事件处理函数里面的代码从队列末尾插入，在t2事件执行里面有三行代码第一行是box.innerHTML = “doing something”，这行代码是页面渲染，交给GUI渲染线程，由于GUI渲染线程和js引擎线程是互斥的，这个时候先让t2时间里面的其他js代码wait(3000);继续执行，把box.innerHTML = "doing something"插入t2的后面t3时间里面，执行完wait(3000)以后，最后一行是box.innerHTML = “finish”，这行代码也是页面渲染，交给GUI渲染线程，由于GUI渲染线程和js引擎线程是互斥的，不能同时执行，把box.innerHTML = "finish"从队列末尾插入，变成t4时间执行。所以，最后结果是，当用户点击的时候，div里面没有内容，3秒以后直接显示finish。
在前端学习过程中，js的单线程对大家理解同步和异步非常重要，熟悉js的单线程将让大家能够更好的理解事件，定时器和ajax请求的执行过程。
本文来自千锋教育，转载请注明出处。
前端小知识点：javascript单线程
目录一、为什么JavaScript是单线程？二、JavaScript是单线程，怎样执行异步的代码？ 查看详情
javascript阻塞剖析与改善
一、阻塞特性《高性能JavaScript》一书中，关于第一章“LoadingandExecution”，提到了无阻塞加载JavaScript技术，目的是为了提高页面呈现速度。说到无阻塞加载JavaScript要点，我们就有必要知道，为什么在html中不管是内联JavaScri... 查看详情
前端面试-异步和单线程
javaScript宏任务与微任务promise深究异步原因再比如加载图片、让他先去加载然后我继续执行下面的，好了我再回来promise注意：catch正常也返回resolved执行顺序为123asyncawaitasync函数返回一个promiseawait相当于一个函数的then... 查看详情
前端-剖析浏览器渲染页面的过程(代码片段)
...包括8个子系统用户界面浏览器引擎渲染引擎网络子系统JavaScript解释器XML解释器显示后端数据持久化子系统这些子系统组合构成了我们的浏览器。页面的加载和渲染过程，离不开网络子系统、渲染引擎、JavaScript解释器和浏览... 查看详情
单线程的javascript
Javascript是单线程的因为JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。而浏览器是事件驱动的（Eventdriven），浏览器中很多行为是异... 查看详情
细说javascript单线程的一些事
最近被同学问道JavaScript单线程的一些事，我竟回答不上。好吧，感觉自己的JavaScript白学了。下面是我这几天整理的一些关于JavaScript单线程的一些事。首先，说下为什么JavaScript是单线程？总所周知，JavaScript是以单线程的方式运... 查看详情
javascript单线程和异步机制
随着对JavaScript学习的深入和实践经验的积累，一些原理和底层的东西也开始逐渐了解。早先也看过一些关于js单线程和事件循环的文章，不过当时看的似懂非懂，只留了一个大概的印象：浏览器中的js程序时是单线程的。嗯，就... 查看详情
javascript并发模型
JavaScript的并发模型基于事件循环和异步函数，并通过WebWorkers支持多线程。这些技术允许JavaScript在不阻塞用户界面的情况下执行耗时的操作，提高程序性能JavaScript并发模型JavaScript是一种单线程语言，这意味着它只有一个执行线... 查看详情
单线程 JavaScript 下的动画
】单线程JavaScript下的动画【英文标题】：AnimationsundersinglethreadedJavaScript【发布时间】：2016-05-2314:15:44【问题描述】：JavaScript是一种单线程语言，因此它一次执行一个命令。异步编程是通过WebAPIs（DOM用于事件处理，XMLHttpRequest用... 查看详情
java集合源码剖析arraylist源码剖析
ArrayList简介??ArrayList是基于数组实现的，是一个动态数组，其容量能自动增长，类似于C语言中的动态申请内存，动态增长内存。??ArrayList不是线程安全的，只能用在单线程环境下，多线程环境下可以考虑用Collections.synchronizedList(Li... 查看详情
c++单例模式总结与剖析(代码片段)
C++单例模式总结与剖析单例可能是最常用的简单的一种设计模式，实现方法多样，根据不同的需求有不同的写法;同时单例也有其局限性，因此有很多人是反对使用单例的。本文对C++单例的常见写法进行了一个总结,包括懒汉式、... 查看详情
javascript是单线程的深入分析（转）
...文：http://blog.csdn.net/talking12391239/article/details/21168489 Javascript是单线程的因为JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。而浏览... 查看详情
arraylist源码剖析
ArrayList简介 ArrayList是基于数组实现的，是一个动态数组，其容量能自动增长，类似于C语言中的动态申请内存，动态增长内存。 ArrayList不是线程安全的，只能用在单线程环境下，多线程环境下可以... 查看详情
［转］javascript是单线程的深入分析
Javascript是单线程的深入分析面试的时候发现99%的童鞋不理解为什么JavaScript是单线程的却能让AJAX异步发送和回调请求，还有setTimeout也看起来像是多线程的？还有non-blockingIO,eventloop等概念很不清楚。来深入分析一下：首先看下面... 查看详情
web前端学习分哪些阶段？
...前端学习分为8个阶段：阶段1.前端核心基础HTML+_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动... 查看详情
学习web前端开发，需要掌握哪些知识
...SS/HTML5+CSS3（HTML+CSS、PC端网页重构、HTML5+CSS3）第二阶段：Javascript（JS数据类型、语法、JS对象、JS内置对象、BOM\\DOM）第三阶段：Javascript高级/Ajax/JQ（AJAX、浏览器缓存、JS对象高级、ES6、JQuery）第四阶段：前端主流框架（前端工程... 查看详情
javascript设计模式与开发实践单例模式
单例模式定义：保证一个类仅有有一个实例，并提供一个访问它的全局访问点。应用场景：有一些对象只需要一个。如线程池、全局缓存、浏览器中的window对象等。 实现一：varSingleton=function(name){this.name=name;this.instance=nul... 查看详情
javascript是单线程的而且是异步的机制
...就有好多的疑问 ，现在按我的理解和大家说一说一、JavaScript单线程 在浏览器中，执行JS程序只有一个线程，所以是单线程，所以执行顺序就是从上到下依次执行，同一段时间内只能有一段代码被执行。你可能会问，为什... 查看详情