HTML5新特性 Web Workers 实现多线程

关注公众号： 微信搜索 web全栈进阶 ; 收货更多的干货

JS单线程

1.1 什么是 webworker？

Web Worker为Web应用程序提供了一种能在后台中运行的方法。通过Web Worker可以生成多个线程同时运行，并保证页面对用户的及时响应，完全不会影响用户的正常操作。

1.2 单线程

• 单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。
• 简单的说就是处理事务的任务链，当只有一条链，所有的事情都在这一条链上执行时，那就是单线程。

优点：单线程较多线程来说，系统稳定、扩展性极强、软件丰富。

缺点：只有一个线程，代码顺序执行，容易出现代码阻塞（页面假死）。

1.3 多线程

• 为Js提供了多线程处理能力，一些复杂、数据量大的处理时可以让别的线程去处理
• 处理的同时不影响主线程的执行（简称异步），从而让页面运行更加流畅而且不失效果。

Web Worker说明：

Web主线程:

1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
　　url:  需要异步处理的js文件路径

2.通过 worker.postMessage( data ) 方法来向worker发送数据。
　　data:  要发送的数据

3.绑定 worker.onmessage(value)方法来接收worker发送过来的数据。
　　value:  postMessage发送过来的数据

4.可以使用 worker.terminate() 来终止一个worker的执行。

worker子线程：
1. 通过postMessage( data ) 方法来向主线程发送数据。
2. 绑定onmessage方法来接收主线程发送过来的数据。

　　

代码如下：

1. 创建一个Worker：

• 通常，与web worker相关的代码都放在一个独立的JavaScript文件中。
• 父线程通过在Worker构造函数中指定一个JavaScript文件的链接来创建一个新的worker，它会异步加载并执行这个JavaScript文件。

// var worker = new Worker(子线程路径);
// console.log(worker); //对象 身上有很多数据

let worker = new Worker('worker.js'); //创建
worker.postMessage('我是要传递的数据');  //postMessage方法向worker发送数据。

2. 编写子线程 worker.js：

this.onmessage = function(ev){
  console.log(ev.data);  // html页面打印出我是要传递的数据   注：子线程没有alert
};

注意：

1. 子线程进行计算，不能进行 DOM BOM操作
2. 子线程不能跨域，文件需放在同路径中
   3. 子线程不能套子线程
   4. 子线程 不和主线程共享数据，而是复制一份儿 哪怕是对象

子线程可以直接输入运算：

//主线程 html页面
let worker = new Worker('worker1.js');
worker.postMessage(5);
 

//子线程 worker1.js
this.onmessage = function(ev){
console.log(ev.data+5);    //  10  
};

可以利用子线程为我们做一些计算：

let worker = new Worker('worker2.js');
worker.postMessage(10);  //向子线程发送数据
worker.onmessage = function(ev){ //接收字线程发送过来的数据
console.log(ev.data);  //15
};
 

//子线程 worker2.js
this.onmessage = function(ev){  //接收主线程发送过来的数据
this.postMessage(ev.data+5);  //向主线程发送数据
};

以上就是介绍js开启多线程方法了。

结尾

文章来源： 个人博客文章 https://www.cnblogs.com/ljx20180807/p/9815576.html

详情直戳官方介绍 HTML5 Web Worker http://www.w3school.com.cn/html5/html_5_webworkers.asp