一、Web Workers 概述


Web Workers 简介

    - Web Workers 是运行在后台的 JavaScript 

        - 充分利用多核 CPU 的优势

        - 对多线程支持非常好

        - 不会影响页面的性能

        - 不能访问Web页面 和 DOM API

wKioL1b7vKGBgKMNAAAm2MCStxE885.png


二、Web Workers API


Web Workers API

    - 检测浏览器对 Web Worker 的支持性

    - 创建 Web Worker 文件

    - 创建 Web Worker 对象

    - 与 Web Worker 进行通信

        - onMessage 事件:该事件用于监听 Web Worker 传递的消息

        - postMessage() 方法: 该方法用于 Web Workder 传递消息

    - 终止 Web Worker


检测 Web Workers

    - 在创建 Web Worker 之前,需要先检测用户浏览器是否支持

wKiom1b7vWrBxg-xAABbUA8MyC0920.png


创建 Web Worker 文件

    - 创建普通的 JS 文件,都可以用于 Web Worker 文件

    - Web Worker 文件可以调用通信的事件和方法

        - onMessage 事件

        - postMessage() 

wKiom1b7vj6AueXwAAAq3yOYaoM851.png


创建 Web Worker 对象

    - 在 HTML 页面中,通过 Worker 的构造器创建 Web Worker 对象

      var w = new Worker("myworker.js");

        - Worker 的构造器接受的参数: 表示指定调用的 Web Worker 文件的路径


与 Web Worker 通信

    - onMessage 事件

      wKiom1b7vuuyB_mmAAAZjvt3njU201.png

        - 用于监听 Web Worker 传递消息,通过回调函数接收传递的消息

        - 通过回调函数的参数 data 属性可以获取传递的消息

    - postMessage()方法

      wKiom1b7v4KSA52HAAAVmHniML0425.png

        - 通过postMessage()方法传递消息内容


终止 Web Worker 

    - 在 HTML 页面中,通过调用 Web Worker 对象的 terminate()方法终止 Web Worker

      wKioL1b7wICRgmOrAAALlqem9qY691.png



总结:本章内容主要介绍了下 HTML5 Web Workers(概述、 API)