轻松上手Web Worker:多线程解决方案的使用方法与实战指南

简介: 轻松上手Web Worker:多线程解决方案的使用方法与实战指南

通过使用 Web Workers,Web 应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是 UI 线程)不会因此被阻塞/放慢。

使用构造函数(例如,Worker())创建一个 worker 对象,构造函数接受一个 JavaScript 文件 URL — 这个文件包含了将在 worker 线程中运行的代码。


不过因为worker一旦新建,就会一直运行,不会被主线程的活动打断,这样有利于随时响应主线程的通性,但是也会造成资源的浪费,所以不应过度使用,用完注意关闭。或者说:如果worker无实例引用,该worker空闲后立即会被关闭;如果worker实列引用不为0,该worker空闲也不会被关闭。


一、注意点

  1. 同源限制
    worker线程执行的脚本文件必须和主线程的脚本文件同源,这是当然的了,总不能允许worker线程到别人电脑上到处读文件吧
  2. 文件限制
    为了安全,worker线程无法读取本地文件,它所加载的脚本必须来自网络,且需要与主线程的脚本同源
  3. DOM操作限制

  worker线程在与主线程的window不同的另一个全局上下文中运行,其中无法读取主线程所在网页的DOM对象,也不能获取 document、window等对象,但是可以获取navigator、location(只读)、XMLHttpRequest、setTimeout族等浏览器API。

  1. 通信限制
    worker线程与主线程不在同一个上下文,不能直接通信,需要通过postMessage方法来通信。
  2. 脚本限制
    worker线程不能执行alert、confirm,但可以使用 XMLHttpRequest 对象发出ajax请求。


二、例子

1、主线程

Worker()构造函数,第一个参数是脚本的网址(必须遵守同源政策),该参数是必需的,且只能加载 JS 脚本,否则报错。第二个参数是配置对象,该对象可选。它的一个作用就是指定 Worker 的名称,用来区分多个 Worker 线程。

<div>
    Worker 输出内容:<span id='app'></span>
    <input type='text' title='' id='msg'>
    <button onclick='sendMessage()'>发送</button>
    <button onclick='stopWorker()'>stop!</button>
</div>

<script>
    if (typeof (Worker) === 'undefined') // 使用Worker前检查一下浏览器是否支持
        document.writeln(' Sorry! No Web Worker support.. ')
    else {
        window.w = new Worker('worker.js')
        // 指定worker线程发消息时的回调,也可以通过 worker.addEventListener('message',cb)的方式
        window.w.onmessage = ev => {
            document.getElementById('app').innerHTML = ev.data
        }
        // 指定worker线程发生错误时的回调,也可以 worker.addEventListener('error',cb)
        window.w.onerror = err => {
            w.terminate()
            console.log(err.filename, err.lineno, err.message) // 发生错误的文件名、行号、错误内容
        }

        function sendMessage() {
            const msg = document.getElementById('msg')
            // 主线程往worker线程发消息,消息可以是任意类型数据,包括二进制数据
            window.w.postMessage(msg.value)
        }

        function stopWorker() {
            // 主线程关闭worker线程
            window.w.terminate()
        }
    }
</script>

2、主线程中的api,worker表示是 Worker 的实例

  • worker.postMessage: 主线程往worker线程发消息,消息可以是任意类型数据,包括二进制数据
  • worker.terminate: 主线程关闭worker线程
  • worker.onmessage: 指定worker线程发消息时的回调,也可以通过

     worker.addEventListener(‘message’,cb)的方式

  • worker.onerror: 指定worker线程发生错误时的回调,也可以 worker.addEventListener(‘error’,cb)
3、worker线程

Worker线程中全局对象为 self,代表子线程自身,这时 this指向self

// worker.js
let i = 1

function simpleCount() {
    i++
    self.postMessage(i)
    setTimeout(simpleCount, 1000)
}

simpleCount()

// 指定主线程发worker线程消息时的回调,也可以self.addEventListener('message',cb)
self.onmessage = ev => {
    // worker线程往主线程发消息,消息可以是任意类型数据,包括二进制数据
    self.postMessage(ev.data + ' 呵呵~')
}

// 指定worker线程发生错误时的回调,也可以 self.addEventListener('error',cb)
self.onerror = er =>{
    // worker线程关闭自己
    self.close()
}

4、worker线程中api,self,代表子线程自身

  • self.postMessage: worker线程往主线程发消息,消息可以是任意类型数据,包括二进制数据
  • self.close: worker线程关闭自己
  • self.onmessage: 指定主线程发worker线程消息时的回调,也可以self.addEventListener(‘message’,cb)
  • self.onerror: 指定worker线程发生错误时的回调,也可以 self.addEventListener(‘error’,cb)
5、worker线程中加载脚本的api:
importScripts('script1.js') // 加载单个脚本
importScripts('script1.js', 'script2.js') // 加载多个脚本
• 1
• 2


三、实战场景

  1. 加密数据

有些加解密的算法比较复杂,或者在加解密很多数据的时候,这会非常耗费计算资源,导致UI线程无响应,因此这是使用Web Worker的好时机,使用Worker线程可以让用户更加无缝的操作UI。

  1. 预取数据

有时候为了提升数据加载速度,可以提前使用Worker线程获取数据,因为Worker线程是可以是用 XMLHttpRequest 的。

  1. 预渲染

在某些渲染场景下,比如渲染复杂的canvas的时候需要计算的效果比如反射、折射、光影、材料等,这些计算的逻辑可以使用Worker线程来执行,也可以使用多个Worker线程,这里有个射线追踪的示例。

  1. 复杂数据处理场景

某些检索、排序、过滤、分析会非常耗费时间,这时可以使用Web Worker来进行,不占用主线程。

  1. 预加载图片

有时候一个页面有很多图片,或者有几个很大的图片的时候,如果业务限制不考虑懒加载,也可以使用Web Worker来加载图片


四、Web Workers 的可用功能

由于 Web Workers 的多线程特性,它只能使用一部分 JavaScript 功能。以下是可使用的功能列表:


  • navigator 对象
  • location 对象(只读)
  • XMLHttpRequest
  • setTimeout()/clearTimeout() 和 setInterval()/clearInterval()
  • Application Cache
  • 使用 importScripts 来引用外部脚本
  • 创建其它 web workers


五、Web Worker 的局限性

令人沮丧的是,Web Workers 不能够访问一些非常关键的 JavaScript 功能:

  • DOM(非线程安全的)
  • window 对象
  • document 对象
  • parent 对象
目录
相关文章
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
128 3
|
22天前
|
开发框架 前端开发 JavaScript
利用Python和Flask构建轻量级Web应用的实战指南
利用Python和Flask构建轻量级Web应用的实战指南
62 2
|
2月前
|
前端开发 JavaScript 测试技术
构建响应式Web应用程序:React实战指南
【10月更文挑战第9天】构建响应式Web应用程序:React实战指南
|
2月前
|
移动开发 前端开发 小程序
浅谈-web屏幕适配的解决方案
浅谈-web屏幕适配的解决方案
43 0
浅谈-web屏幕适配的解决方案
|
3月前
|
前端开发 Python
前后端分离的进化:Python Web项目中的WebSocket实时通信解决方案
在现代Web开发领域,前后端分离已成为一种主流架构模式,它促进了开发效率、提升了应用的可维护性和可扩展性。随着实时数据交互需求的日益增长,WebSocket作为一种在单个长连接上进行全双工通讯的协议,成为了实现前后端实时通信的理想选择。在Python Web项目中,结合Flask框架与Flask-SocketIO库,我们可以轻松实现WebSocket的实时通信功能。
62 2
|
3月前
|
数据库 开发者 Python
实战指南:用Python协程与异步函数优化高性能Web应用
在快速发展的Web开发领域,高性能与高效响应是衡量应用质量的重要标准。随着Python在Web开发中的广泛应用,如何利用Python的协程(Coroutine)与异步函数(Async Functions)特性来优化Web应用的性能,成为了许多开发者关注的焦点。本文将从实战角度出发,通过具体案例展示如何运用这些技术来提升Web应用的响应速度和吞吐量。
30 1
|
2月前
|
Java 应用服务中间件 Spring
【终极解决方案】Could not open ServletContext resource [/WEB-INF/dispatcher-servlet.xml]
【终极解决方案】Could not open ServletContext resource [/WEB-INF/dispatcher-servlet.xml]
31 0
|
2月前
|
设计模式 Java 物联网
【多线程-从零开始-玖】内核态,用户态,线程池的参数、使用方法详解
【多线程-从零开始-玖】内核态,用户态,线程池的参数、使用方法详解
60 0
|
3月前
|
SQL 安全 JavaScript
告别Web安全小白!Python实战指南:抵御SQL注入、XSS、CSRF的秘密武器!
【9月更文挑战第12天】在Web开发中,安全漏洞如同暗礁,尤其对初学者而言,SQL注入、跨站脚本(XSS)和跨站请求伪造(CSRF)是常见挑战。本文通过实战案例,展示如何利用Python应对这些威胁。首先,通过参数化查询防止SQL注入;其次,借助Jinja2模板引擎自动转义机制抵御XSS攻击;最后,使用Flask-WTF库生成和验证CSRF令牌,确保转账功能安全。掌握这些技巧,助你构建更安全的Web应用。
52 5
|
4月前
|
C# 开发者 Windows
WPF遇上Office:一场关于Word与Excel自动化操作的技术盛宴,从环境搭建到代码实战,看WPF如何玩转文档处理的那些事儿
【8月更文挑战第31天】Windows Presentation Foundation (WPF) 是 .NET Framework 的重要组件,以其强大的图形界面和灵活的数据绑定功能著称。本文通过具体示例代码,介绍如何在 WPF 应用中实现 Word 和 Excel 文档的自动化操作,包括文档的读取、编辑和保存等。首先创建 WPF 项目并设计用户界面,然后在 `MainWindow.xaml.cs` 中编写逻辑代码,利用 `Microsoft.Office.Interop` 命名空间实现 Office 文档的自动化处理。文章还提供了注意事项,帮助开发者避免常见问题。
255 0