HTML学习笔记(八) Web Worker

简介: HTML学习笔记(八) Web Worker

Web Worker 为 JavaScript 创建多线程环境


主线程可以创建 Worker 线程,并将一些高延迟的任务分配给 Worker 线程在后台运行


而主线程只会负责渲染和交互,从而保证页面的流畅性


Web Worker 有两种类型,分别是 Dedicated Web Worker 和 Shared Web Worker


  • Dedicated Web Worker:只有一个页面可以使用这个 Web Worker
  • Shared Web Worker:多个同源页面可以共享一个 Web Worker,为跨页面通信提供一种解决方案

下面介绍 Dedicated Web Worker

主线程通过构造函数 Worker(),创建一个 Worker 线程,并在参数中指定需要执行的脚本文件

var worker = new Worker('worker.js')


构造函数返回一个 Worker 对象,便于主线程与 Worker 线程通信,Worker 对象常用的属性和方法如下:


  • onerror:用于指定 error 事件的监听函数,当 Worker 发生错误时触发
  • onmessage:用于指定 message 事件的监听函数,当接收到传递的数据时触发
  • onmessageerror:用于指定 messageerror 事件的监听函数,当数据无法进行反序列化时触发
  • postMessage():传递数据给 Worker 线程
  • terminate():终止 Worker 线程
<!DOCTYPE html>
<html>
<head>
    <script>
        var worker;
        function submit() {
            if (typeof(Worker) === 'undefined') {
                return
            }
            if (typeof(worker) === "undefined") {
                worker = new Worker('worker.js')
            }
            let input = document.getElementById('data').value
            worker.postMessage(input)
            worker.onmessage = function(event) {
                let result = event.data
                document.getElementById('result').innerText = result
                worker.terminate()
                worker = undefined
            }
            worker.onerror = function(event) {
                console.log('出错的信息', event.message)
                console.log('出错的文件', event.filename)
                console.log('出错的行数', event.lineno)
                console.log('出错的列数', event.colno)
                worker.terminate()
                worker = undefined
            }
        }
    </script>
</head>
<body>
    <input type="text" id="data" name="data" placeholder="Please Enter Something">
    <button onclick="submit()">Reverse String</button>
    <span id="result"></span>
</body>
</html>


Worker 线程有一个自己的全局对象,self 和 this 都提供对该对象的引用,常用的属性和方法如下:


  • onmessage:用于指定 message 事件的监听函数,当接收到传递的数据时触发
  • onmessageerror:用于指定 messageerror 事件的监听函数,当数据无法进行反序列化时触发
  • importScripts():用于加载其它脚本
  • postMessage():传递数据给主线程
  • close():关闭 Worker 线程
// worker.js
this.onmessage = function(event) {
    let data = event.data
    let result = reverse(data)
    this.postMessage(result)
    this.close()
}
function reverse(content) {
    return content.split('').reverse().join('')
}


使用 Web Worker 需要注意以下的点:


  • 主线程分配给 Worker 线程的脚本文件,不能从本地读取,它必须来自网络
  • 主线程分配给 Worker 线程的脚本文件,必须与主线程的脚本文件同源,准确来说应该是与页面文档同源
  • Worker 线程不能访问 window、document、parent 对象,但可以使用 navigator、location 对象
  • Worker 线程不能使用 alert、confirm,但可以使用 setTimeout、setInterval、XMLHttpRequest
  • 主线程和 Worker 线程不能直接通信,必须通过消息传递,消息传递有两种方式,拷贝和转让

拷贝:拷贝原始数据,产生一份副本,将副本传递给目标线程,在传递较大的数据时比较消耗性能

转让:将原始数据的所有权转让给目标线程,原来线程不再具有这个数据

在默认的实现中,除 ArrayBuffer 外都是拷贝传递

目录
相关文章
|
6天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
13 2
|
6天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于Django与HTML的新闻发布系统(二)
Web实战丨基于Django与HTML的新闻发布系统(二)
16 1
|
6天前
|
存储 数据库 数据安全/隐私保护
Web实战丨基于Django与HTML的新闻发布系统
Web实战丨基于Django与HTML的新闻发布系统
15 1
|
6天前
|
存储 搜索推荐 数据库
Web实战丨基于Django与HTML的用户登录验证系统
Web实战丨基于Django与HTML的用户登录验证系统
12 1
|
6天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3
|
6天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
24 2
|
11天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
18 1
|
Web App开发 前端开发 搜索推荐
从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等
大家好,这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1381 0
|
3天前
|
前端开发 JavaScript Java
计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发
计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发
|
5天前
|
传感器 小程序 搜索推荐
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
通过电子班牌设备和智慧校园数据平台的统一管理,在电子班牌上,班牌展示、学生上课刷卡考勤、考勤状况汇总展示,课表展示,考场管理,请假管理,成绩查询,考试优秀标兵展示、校园通知展示,班级文化各片展示等多种化展示。
29 0
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端