HTML5新特性：多线程详解（Worker与SharedWorker）

html5新特性

html5

173 浏览量更新于2024-09-01 收藏 145KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"HTML5新特性多线程（Worker SharedWorker）" 在HTML5中，为了应对JavaScript单线程执行模型带来的性能限制，引入了多线程机制，主要是通过`Worker`类和`SharedWorker`类实现。这两个特性允许开发者在后台创建独立的线程，处理耗时任务，从而避免阻塞主线程，提升用户体验。 1. Worker类 Worker类是HTML5中用于创建后台线程的基本接口。它的工作原理是在线程之间通过`postMessage`方法传递消息进行通信。 - 构造函数：`new Worker(arg)`，arg参数是一个字符串，指定了Worker线程要执行的JavaScript脚本文件路径，如`'myworker.js'`。执行这个构造函数会返回一个Worker对象实例。 - postMessage方法：`worker.postMessage(message)`，用于在主线程和Worker线程之间发送消息。message参数可以是任何可以被序列化的值，通常是字符串，也可以是转换后的JSON对象。 - message事件：Worker对象上有`message`事件，当接收到其他线程通过`postMessage`发送的消息时，该事件会被触发。事件对象的`data`属性包含了传递过来的数据。以下是一个简单的`Worker`使用示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>main</title> </head> <body> <div id="out"></div> <input type="text" name="" id="txt"> <button id="btn">发送</button> <script type="text/javascript"> var out = document.getElementById("out"); var btn = document.getElementById("btn"); var txt = document.getElementById("txt"); var worker = new Worker("thread1.js"); btn.addEventListener("click", function() { worker.postMessage(txt.value); // 向Worker发送输入框的值 }); worker.onmessage = function(event) { out.innerHTML = event.data; // 接收Worker返回的消息并显示 }; </script> </body> </html> ``` 在这个例子中，用户在文本框输入后点击按钮，会将输入内容发送给Worker线程。Worker线程处理后通过`postMessage`将结果返回，更新到页面上。 2. SharedWorker类 SharedWorker是一种特殊类型的Worker，它可以被多个文档或窗口共享。这意味着同一个SharedWorker实例可以在多个页面之间通信，这对于实现跨页面的同步功能非常有用。 - 构造函数：`new SharedWorker(arg)`，与Worker类似，arg指定SharedWorker的脚本路径。 - connect方法：SharedWorker没有`postMessage`方法，而是通过建立连接来通信。每个窗口或文档需要调用`worker.port.start()`来启动通信，并通过`worker.port.postMessage()`发送消息。 - onconnect事件：在SharedWorker内部，需要监听`connect`事件来接收新的连接请求，并通过`event.ports[0]`获取到通信端口，然后通过这个端口进行消息传递。由于SharedWorker的特性，它适用于需要在多个页面间共享状态或数据的场景，如实时聊天应用或游戏。总结，HTML5的多线程特性通过Worker和SharedWorker为JavaScript提供了处理复杂计算和异步操作的能力，改善了用户体验。开发者可以根据需求选择合适的线程类型，实现高效、流畅的Web应用程序。

资源详情

资源推荐

HTML5新特性新特性多线程（多线程（Worker SharedWorker））

主要介绍了HTML5新特性多线程（Worker SharedWorker）的相关资料,需要的朋友可以参考下

There is no doubt that JavaScript是没有多线程之说的，他只能一件事一件事的做，做完一件事再做下一件事，假如你的js要

花一段比较长的时间做一件事的话，那么浏览器将会卡顿一段时间，不对用户的操作产生响应，这可咋办呢？谢天谢

地，HTML5为我们提供了实现多线程的机制，这么好的东西，想必你早就再用了，不过没关系啊，咱们一块儿复习一下咯！

一、一、Worker类类

　　1、方法介绍、方法介绍

　　（1）构造函数 new Worker(arg) :参数表示你的线程要执行的代码所在的js文件，例如‘myworker.js’,构造函数当然是返回

一个Worker类的实例

　　（2）worker.postMessage(message):这个方法表示从主线程向子线程发送消息或者子线程向主线程发送消息，message

一般是一个字符串，也可以将一个js对象转成字符串发过去

　　（3）worker上还有一个message事件，当有人向这个worker实例发送消息时，该事件被触发，我们可以从他的事件对象

的data属性中获得post过来的值

　　可以看到Woker类的API是相当简洁的，只有两个最常用的方法，一个事件，下面我们来通过实际的例子看看。

//main.html

<!DOCTYPE html>

<head>

</head>

<body>

var out = document.getElementById("out");

var btn = document.getElementById("btn");

var txt = document.getElementById("txt");

var worker = new Worker("thread1.js");

btn.addEventListener("click",function(){

var postData = txt.value;

worker.postMessage(postData);

},false);

worker.addEventListener('message',function(e){

out.innerText = e.data;

},false);

</script>

</body>

</html>

//thread1.js

onmessage = function(event){

var res = event.data+"帅气！";

postMessage(res);

}

　　当我在文本框输入“大～熊”点击发送按钮就会出现如下效果

　　简单分析分析，我在主线程由thead1.js创建了一个Worker的实例worker，当点击按钮时会调用他的postMessage方法，

将文本框中的内容发送到thread1.js，我们的thread1.js怎么做的呢？是这样，他侦听message事件，主线程发送消息过来就触

发这个事件，执行回调函数，回调函数从事件对象取得发送来的值，然后将这个值加上“帅气！”,然后在发送回去。主线程呢也

侦听了worker的message事件，所以有消息过去时会触发，将消息内容显示在div中，如此就看到了上面的效果。

　　或许你会将这有什么用呢？这里确实没什么用，这里我们大可以在主线程还总完成加“帅气！”的操作，因为他的复杂度为

O(1)(哈哈，最近在学算法！)，但是假如不是做这么简单的操作呢？这种方法的好处就是不过你的子线程做多么复杂的工作，

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38647039

粉丝: 7
资源: 943

HTML5新特性：多线程详解（Worker与SharedWorker）

SharedWorkerSample:一个SharedWorker的简单示例

多线程worker，AIR桌面版， HelloWorld（转）

HTML5 Web Worker：多线程编程简介

微信小程序中多线程worker案例

Cesium 怎么使用多线程worker计算

vue3 webworker 多线程

worker开启多线程

GUI线程和worker线程

nodejs 使用Worker Threads实现多线程

html5 new worker js 文件

多线程 java实例

unity 多线程里面再开多线程

python 多线程 多线程

pyqt5多线程优化_PyQt5多线程防卡死和多窗口用法的实现

qt 多线程进行数据交互

QT多线程如何使用QT多线程如何使用

pyqt5多线程信号传参

树莓派多线程python

express实现多线程

最新资源

python 多线程多线程