梳理 Web Worker 及实战场景

这篇具有很好参考价值的文章主要介绍了梳理 Web Worker 及实战场景。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

有一些前端技术点,即使以前用过,但没有自己动手归纳总结过,许久还是要回过头来还是需要重新梳理。于是,本文就来梳理一下 Web Worker。

为什么需要 Web Worker

由于JavaScript语言采用的是单线程,同一时刻只能做一件事,如果有多个同步计算任务执行,则在这段同步计算逻辑执行完之前,它下方的代码不会执行,从而造成了阻塞,用户的交互也可能无响应。

但如果把这段同步计算逻辑放到Web Worker执行,在这段逻辑计算运行期间依然可以执行它下方的代码,用户的操作也可以响应了。

Web Worker 是什么

HTML5 提供并规范了 Web Worker 这样一套 API,它允许一段 JavaScript 程序运行在主线程之外的另外一个线程(Worker 线程)中。

Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程就会很流畅,不会被阻塞或拖慢。

Web Worker 的分类

Web Worker 根据工作环境的不同,可分为专用线程 Dedicated Worker和共享线程 Shared Worker。

Dedicated Worker的Worker只能从创建该Woker的脚本中访问,而SharedWorker则可以被多个脚本所访问。

在开发中如果使用到 Web Worker,目前大部分主要还是使用 Dedicated Worker的场景多,它只能为一个页面所使用,本文讲的也是这一类;而Shared Worker可以被多个页面共享,为跨浏览器 tab 共享数据提供了一种解决方案。

Web Worker的使用限制

同源限制

分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

文件限制

Worker 线程无法读取本地文件(file://),会拒绝使用 file 协议来创建 Worker实例,它所加载的脚本,必须来自网络。

DOM 操作限制

Worker 线程所在的全局对象,与主线程不一样,区别是:

  • 无法读取主线程所在网页的 DOM 对象
  • 无法使用documentwindowparent这些对象

通信限制

Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成,交互方法是postMessageonMessage,并且在数据传递的时候, Worker 是使用拷贝的方式。

脚本限制

Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求,也可以使用setTimeout/setInterval等API文章来源地址https://www.toymoban.com/news/detail-620227.html

基本 API

const worker = new Worker(aURL, options); 
  • worker.postMessage: 向 worker 的内部作用域发送一个消息,消息可由任何 JavaScript 对象组成
  • worker.terminate: 立即终止 worker。该方法并不会等待 worker 去完成它剩

到了这里,关于梳理 Web Worker 及实战场景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【WEB前端进阶之路】 HTML 全路线学习知识点梳理(中)

    本文是HTML零基础学习系列的第二篇文章,点此阅读 上一篇文章。 标题是通过 h1 - h6 标签进行定义的。 h1 定义最大的标题。 h6 定义最小的标题。浏览器会自动地在标题的前后添加空行,例如: 标题用来正确的显示文章结构 ,通过不同的标题可以为文章建立索引,所以,标题

    2024年02月02日
    浏览(46)
  • web服务和前端交互相关的上中游业务技术知识点梳理

    可能之前在学校里面做的很多东西是纯后端的,不会涉及到太多和前端交互的细节,很多新手对前后端交互以及上中游业务链路的整体流程不够清晰,做一些javaWeb项目可以让我们有机会对其进行更深入的研究,最近总结了一下相关技术知识点并结合自己的实践经验来和大家分

    2024年02月21日
    浏览(43)
  • web前端之JavaScript选择文件和文件夹、全程使用WebApi操作文件、不涉及html、showOpenFilePicker、showDirectoryPicker

    此方式不需要创建多余的html标签,非常适合项目开发中使用。

    2024年02月20日
    浏览(48)
  • vue2.x项目没有vue.config.js时,web worker使用

    vue:2.7.14,webpack 3.6.0构建项目 在vue中使用new Worker(‘./worker.js’)原生方法,引入woker.js子线程时,无法正常读取引入。于是乎就百度了一下,网上vue使用web worker的步骤。 1.安装使用 worker-loader // 安装依赖包 npm install worker-loader -D 2.vue.config.js 完整配置 module.exports = { chainWebpac

    2024年02月06日
    浏览(64)
  • JavaScript场景应用:Canvas实战开发一个二维折线图插件

    🏆作者简介,黑夜开发者,全栈领域新星创作者✌,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 🏆本文已收录于专栏:100个JavaScript的小应用。 🎉欢迎 👍点赞✍评论⭐收藏 折线图是一种常见的数据

    2024年02月14日
    浏览(43)
  • Web前端-JavaScript

    目录 1 概述 2 HTML嵌入JS代码三种方式 2.1 第一种方式 2.2 第二种方式 2.3 第三种方式 3 变量 4 数据类型 4.1 概述 4.2 Number数据类型  4.3 几个值得注意的函数 4.4 Boolean数据类型  4.5 String数据类型 4.6 关于Object类型 4.7 NaN、undefined、null的区别 4 函数 5 事件 5.1 JS中有哪些常用的事件

    2024年02月09日
    浏览(62)
  • Web前端 Javascript笔记3

     内存中的生命周期         1、内存分配         2、内存使用(读写)         3、内存回收,使用完毕之后,垃圾回收器完成         内存泄漏:该回收的,由于某些未知因素,未释放,叫做内存泄漏 栈:数据存在其中会自动释放 堆:对象,根据程序员的操作来决定释

    2024年04月15日
    浏览(46)
  • web前端框架Javascript之JavaScript 异步编程史

    早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总

    2024年02月14日
    浏览(57)
  • Navicat 强大的数据模型功能 | 面向数据库设计、架构和数据资产梳理等使用场景

    数据模型是用来描述数据、组织数据和对数据进行操作的一组概念和定义。根据不同的应用需求,数据模型可以分为概念模型、逻辑模型和物理模型。这些数据模型帮助数据库设计人员设计和管理数据库,以满足用户的需求。 Navicat 强大的数据模型功能主要适用于 MySQL、Ora

    2024年02月09日
    浏览(50)
  • web前端Javascript—7道关于前端的面试题

    本文主要是web前端Javascript—的面试题,附上相关问题以及解决答案,希望对大家web前端Javascript闭包的学习有所帮助。 每个JavaScript 程序员都必须知道闭包是什么。在 JavaScript 面试中,你很可能会被问到的问题 以下是 7 个有关 JavaScript的面试题,比较有挑战性。不要查看答案

    2024年02月03日
    浏览(100)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包