Html5之高级-12 Web Workers(概述 API)

Posted 2020-07-01

一、Web Workers 概述

Web Workers 简介

    - Web Workers 是运行在后台的 javascript 

        - 充分利用多核 CPU 的优势

        - 对多线程支持非常好

        - 不会影响页面的性能

        - 不能访问Web页面 和 DOM API

二、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 之前，需要先检测用户浏览器是否支持

创建 Web Worker 文件

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

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

        - onMessage 事件

        - postMessage() 

创建 Web Worker 对象

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

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

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

与 Web Worker 通信

    - onMessage 事件

      

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

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

    - postMessage()方法

      

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

终止 Web Worker 

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

      

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

本文出自 “技术交流” 博客，谢绝转载！