一 、JavaScript是单线程
javascript是单线程，即同一时间内只能做一件事，这样，若某个任务执行时间过长就会容易造成阻塞(浏览器卡死)，影响用户体验。
二、为什么JavaScript是单线程
作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准。
当然，JavaScript若要实现多线程，可以使用web worker实现，这里不做介绍，感兴趣的可以自行百度或参考此篇。
三、任务队列
因为JavaScript是单线程的，所以，任务都是逐个执行的。而这些任务主要分为以下两种。
1，同步任务（synchronous）：指在主线程上排队执行的任务， 只有前一个任务执行完毕，才能执行后一个任务。
2，异步任务（asynchronous）：指被主线程挂载起来（不进入主线程）的任务，这些任务通常放置在任务队列（task queue），只有任务队列通知主线程某个异步任务可以执行，该异步任务才能进入主线程中执行。
js中的异步操作：
1、定时器setTimeout()及setInterval()都是异步操作
2、事件绑定，DOM事件都是异步操作
3、AJAX中一般我们都采取异步操作（也可以同步）
4、回调函数可以理解为异步（不是严谨的异步操作）
5、es6的promise
JavaScript运行机制如下（即异步执行运行机制）：
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会循环反复。
四、定时器
定时器由如下函数完成：
1.setTimeout()函数：执行一次
2.setInterval()函数：每隔一段时间执行一次。
setTimeout()接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。
console.log('A');
setTimeout(function(){
console.log('B');
},0);
console.log('C');
上面代码的执行结果是A，C，B，因为setTimeout()将第二行推迟到0毫秒之后执行。
将setTimeout()的第二个参数设为0，就表示当前代码执行完（执行栈清空）以后，立即执行（0毫秒间隔）指定的回调函数。
setTimeout(function(){
console.log(1);
}, 0);
console.log(2);
上面代码的执行结果总是2，1，因为只有在执行完第二行以后，系统才会去执行"任务队列"中的回调函数。
总之，setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。
HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加到4ms。在此之前，老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。
需要注意的是，setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行.
参考博文：
https://segmentfault.com/a/1190000012806637
https://www.cnblogs.com/MasterYao/p/5563725.html
阮一峰：
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
js运行机制：
https://blog.csdn.net/web_yzm/article/details/81627158
https://www.cnblogs.com/intangible/p/8066979.html
https://baijiahao.baidu.com/s?id=1615713540466951098&wfr=spider&for=pc
https://www.cnblogs.com/intangible/p/8066979.html
网友评论