JavaScript线程机制和任务队列

JavaScript线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。并意味着程序会按照指定的顺序按部就班的执行下去，遇到堵塞也无法越过。

JavaScript常驻线程

JavaScript引擎线程
解释执行JavaScript代码、用户输入、网络请求

GUI线程
绘制用户界面，与JavaScript主线程是互斥的

Http网络请求线程
处理用户的get 、 post 请求等返回结果后将执行函数推入任务队列当中

定时器触发线程
SetTimeout 、 setInterval 等待时间结束后将执行函数推入任务队列中

浏览器事件触发线程
将Click mouse 等交互事件发生后、将这些事件放入事件队列中

JavaScript任务队列

任务分别为同步和异步两种
同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
异步任务：不进入主线程、而进入"任务队列"的任务，只有 “任务队列”（有多种任务队列）通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

虽然js是单线程的，但是js运行的环境，也就是浏览器，是支持多线程的。所以我们可以通过很多方式来实现javascript的多线程编程。

JavaScript多线程之Web Worker

什么是Web Worker

web worker 是运行在后台的 JavaScript，不会影响页面的性能。
Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers 就可以通过 postMessage 向任务池发送任务请求，执行完之后再通过 postMessage 返回消息给创建者指定的事件处理程序 ( 通过 onmessage 进行捕获 )。WebWorkers 进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用 XMLHttpRequest 来处理 I/O，但通常，后台进程（包括 Web Workers 进程）不能对 DOM 进行操作。如果希望后台程序处理的结果能够改变 DOM，只能通过返回消息给创建者的回调函数进行处理。

多线程实例

//a)前端页面---主线程
document.onclick = function(){
  console.time(1);
  let w = new Worker("worker.js"); //创建对象
  w.postMessage(5000);  //发送到work.js文件里面
  w.onmessage = function(e){
    box.innerHTML = e.data;  //e.data是work.js计算完成的结果
  }
  console.timeEnd(1);
}

//b)多线程处理页面work.js
importScripts("其它work.js文件");
self.onmessage = function(e){
  //要大量的计算，最好放在子线程里面，self指向全局的worker对象
  let str = "";
  for(let i = 0; i<e.data; i++){
    str += String.fromCharCode(i);
  }
  self.postMessage(str);
}

单线程实例

document.onclick = function(){
  //根据ASCII码生成大量的字符串
  console.time(1)
  let str = "";
  let num = 50000;
  for(let i=0; i<num; i++){
    str +=String.fromCharCode(i);
  }
  box.innerHTML = str;
  console.timeEnd(1);
}