这个东西咋说呢，都知道js是单线程执行的，但js为什么是单线程 不能是的多线程吗，

以往网页是顺序渲染的，如果一个js文件执行时间过长那么 可能页面可能会出现空白的情况，为了避免这种情况 就引入了 WebWorker 其实这个东西 主要是应对一些大型项目中

不过在说题之前 先来扯一扯 为啥js是单线程的， 因为是单线程标志着  js在同一个时间段内 只能执行一件事情

如果那个事情 需要的时间比较长 那么没办法 后面的就只能干等着了

线程 和 进程  如果童鞋是计算机专业的可能会了解些，  进程里面可以包括多个线程  一个程序 运行的时候所以需要的资源都是 CPU 也就是电脑的大脑进行资源分配的 

我们的浏览器 是多进程的

javascript 多线程有几种实现方法 js开启多线程_多线程

经常打开任务管理器的童鞋 看下就知道  为啥我的这么多， 因为 现在我的打开了很多的标签  浏览器 打开一个tab标签页 cpu 创建了一个进程   一个进程里面包括很多线程

但为什么我们的js 是单线程的呢， 因为js 作为浏览器的脚本语言  核心功能就是用来操作dom 和用户产生一些交互用的   生产之处就定义好它的作用

假设我们的js 是多线程吧  很经典的一个冲突问题，  两个线程  同时操作一个dom结点， 一个删除 一个要修改  那么该以哪个为主呢  好像  不好说吧 

既然单线程 是 同一时间只能做一件事情 为啥 js还有永不阻塞这个说法呢  ，  那要得益于js的 消息队列和事件循环了   我好想扯远了  重 新回归正题了 

1.  有的童鞋 可能会问 既然 多线程会出现冲突的问题  那么 Web Worker 开启多线 不怕冲突吗  哈哈  其实Web Worker 是不让操作dom 结点  只是去做一些 时间比较长的运算倒是可以

web worker 虽然开启了多线程 但并没有打破js单线程的本质，本质上js还是单线程

Worker 接口是 Web Workers API 的一部分，指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker ，只须调用 Worker(URL) 构造函数，函数参数 `URL` 为指定的脚本。

Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建者同源

举个 简单地经典小例子  计数的问题

javascript 多线程有几种实现方法 js开启多线程_多线程_02

worker = new Worker('./count.js');  // 创建一个  worker对象
             worker.onmessage = function (data) {  // 监听事件
                 var count= data.data;
                 countEl.innerText = count;
             } worker.terminate()   //  终止 worker
if(typeof Worker == "undefined") {   // 判断是否兼容 Worker
            alert('浏览器不支持Web Worker!');
        }
        console.log('浏览器支持Web Worker!');
        
        var start = document.getElementById('start');
        var end = document.getElementById('end');
        var countEl = document.getElementById('count');
        var worker = null;
        start.onclick = function() {
            worker = new Worker('./count.js');
            worker.onmessage = function (data) {
                var count= data.data;
                countEl.innerText = count;
            }
        }
        end.onclick = function() {
            worker.terminate();
        }

count.js

 postMessage(count);   //    发送一条消息到最近的外层对象，消息可由任何 JavaScript 对象组成。

如果你想要 监听那一层对象给你发消息 好像是不可以的哈  

var count = 0;
var Count = function() {};
timer = setInterval(() => {
    count++;
    postMessage(count);
    
}, 1000);

javascript 多线程有几种实现方法 js开启多线程_Web_03

关注我 持续  更新 前端知识