WebWorker进阶

WebWorker进阶

本节主要介绍WebWorker特殊应用场景,扩展了WebWorker的能力,为跨页面通信提供了另外一种思路。

2021-01-21侠课岛    初级拔高       

前端/前端/前端系列课程P2 9     0     1013

(二十五)WebWorker进阶

1:WebWorker与主线程通信

  • 通信内容

    • 字符串
    • 对象
    • 二进制
    • ...
    • 任何Javascript可以表示存储的内容
  • 通信是拷贝关系

  • 二进制数据转移 - 转移之后当前线程无法操作

    webWorker.postMessage(arrayBuffer, [arrayBuffer]);

2:执行同页面的WebWorker

  • 未知的Script类型 - 代码不会执行
<script id="samePageWorker" type="unknow">
    addEventListener('message', () => {
        postMessage('send message!');
    }, false);
</script>
  • 二进制读取并开启新的WebWorker
const blob = new Blob([document.getElementById('samePageWorker').text]);
const url = URL.createObjectURL(blob);
/* 获取保存在内存中的文件地址 */
const webWorker = new Worker(url);

webWorker.postMessage(123);

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

9

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?