HTML5新特性 Web Workers 实现多线程

495 阅读3分钟

关注公众号: 微信搜索 前端工具人 ; 收货更多的干货

JS单线程

1.1 什么是 webworker

Web WorkerWeb应用程序提供了一种能在后台中运行的方法。通过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发送数据。
  1. 编写子线程 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