持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

前端最重要的三大基础（前端三剑客），HTML CSS JAVASCRIPT，学习前端必学的三门基础知识点。

特别是JavaScript，这个基础必须是要最扎实的，不管在哪个项目中，前端都不会离开他的，所以我们要打牢它的基础。学习完基础后JavaScript的深入学习也是必不可少的，这节开始讲一下线程机制与事件机制相关知识：

H5 Web Workers(多线程)

同期回顾：

线程机制与事件机制

H5 Web Workers(多线程)

介绍
- Web Workers 是 HTML5 提供的一个javascript多线程解决方案
- 我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面
- 但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质
应用程序必须运行在某个进程的某个线程的上;一个进程中至少有一个运行的线程：主线程 --> 进程启动后自动创建; 一个进程中也可以同时运行多个线程：此时我们会说这个程序是多线程运行的;过个进程之间的数据是不能直接共享的 --> 内存相互独立（隔离）;线程池（Threal Pool）：保存多个线程对向的容器，实现线程对象的反复利用

使用

创建在分线程执行的js文件

var onmessage =function (event){ //不能用函数声明
console.log('onMessage()22');
var upper = event.data.toUpperCase();//通过event.data获得发送来的数据
postMessage( upper );//将获取到的数据发送会主线程
}

在主线程中的js中发消息并设置回调

//创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
var worker = new Worker("worker.js");
//接收worker传过来的数据函数
worker.onmessage = function (event) {
console.log(event.data);
};
//向worker发送数据
worker.postMessage("hello world");

var worker = new Worker('worker2.js');  
worker.addEventListener('message', function (event) {  
    var timer2 = new Date().getTime();
    console.log('结果：' + event.data, '时间:' + timer2, '用时：' + ( timer2 - timer ));
}, false);
  
var timer = new Date().getTime();
console.log('开始计算: ', '时间:' + timer);
setTimeout(function () {
    console.log('定时器函数在计算数列时执行了', '时间:' + new Date().getTime());
}, 1000);
  
worker.postMessage(40);  
console.log('我在计算数列的时候执行了', '时间:' + new Date().getTime());

不足

慢
不能跨域加载JS
worker内代码不能访问DOM(更新UI)
不是每个浏览器都支持这个新特性

浏览器内核

浏览器	内核
Chrome, Opera, Edge	Blink (基于Webkit)
Firefox	Gecko
Safari	Webkit
IE	Trident
360、搜狗等国内浏览器	Trident + Webkit

深入了解 JS（7）

线程机制与事件机制

H5 Web Workers(多线程)

浏览器内核