【JavaScript ：语法】 web Worker 用法

最新推荐文章于 2025-10-12 09:25:36 发布

原创最新推荐文章于 2025-10-12 09:25:36 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

grammar 同时被 2 个专栏收录

58 篇文章

订阅专栏

javaScript

46 篇文章

订阅专栏

博客介绍了Web Worker的基本用法，给出了最简单的demo示例，包含main.js和worker.js。同时提到了使用时的注意事项，一是向worker.js中postmessage的msg不能是复杂对象，如Cesium中的viewer；二是worker.js的相对路径，需相对于html文件，可将其放在html文件下或修改调用路径。

一、基本用法

参考博客：Web Worker 使用教程

最简单的demo:

main.js

var worker = new Worker('/resource/worker.js');
worker.postMessage('Hello World');
worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
};

worker.js

self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);

二、注意事项：

1、向worker.js中postmessage(msg)的msg不能是那种复杂的对象，比如Cesium中的viewer就不能传入，否则会报错：

Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': 
function e(){
    if(0<arguments.length){
        if("function"===typeof f)
            f.apply(g.sb,arguments);
        else 
            throw Error("Cannot w...<omitted>...M} could not be cloned.

2、worker.js 的相对路径

Html中运行调用到main.js ，而main.js 中调用worker.js。此时main.js中调用的worker.js的相对路径

是相对于html文件而言的。也就是说，需要把worker.js放在html文件下，或者修改main.js调用worker.js

的路径。