问答入门----HTML5 / js多线程

来源：互联网发布：python日常实用小脚本编辑：程序博客网时间：2024/06/06 19:45

主要是讲web worker的啊啊啊啊啊！

能做什么？

1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

2.可以在worker中通过importScripts(url)加载另外的脚本文件

3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest来发送请求

5.可以访问navigator的部分属性

局限性

1.不能跨域加载JS

2.worker内代码不能访问DOM

window对象

document对象

parent对象都不能访问

3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

4.不是每个浏览器都支持这个新特性 (IE 11 是支持的，以下的还没测试)

支持的浏览器包括IE10、Firefox (从3.6版本开始)、Safari (从4.0版本开始)、Chrome 和 Opera 11+，但是手机浏览器还不支持。

5. 带有函数属性的object 对象不能够通过postMessage() 函数传入worker ！

兼容性

使用demo ：

需要一个html 两个js ，原理是一个js的事交给另外一个js 去单独悄悄的执行去！

html 代码：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>js多线程demo</title></head>    <script type="text/javascript">        //创建线程对象        var work = new Worker("work.js");        //发送消息，往work.js里面发送！        work.postMessage(1000);        //监听消息，监听work.js的postMessage（） 事件！        work.onmessage = function (event) {            alert(event.data.age + "，" + event.data.name);        }    </script><body></body></html>

work.js 中的代码：

onmessage = function (event) {    var num = event.data;    var result = {        name: "aa",        age: 22 + num    };    postMessage(result);    close() ;         //用以关闭worker ，释放内存！ }

其实两个js 是相互监听，相互发送数据的，这里需要格外注意几点:

1、正如前面所说的，work 读取不到window 对象，所以导致，全局的对象，方法都不能在work中使用，如果想使用的话，只能通过第一个js 文件通过对象属性的方式将全局对象发送给work.js，　而且，方法不能传入进去，所以如果有调用相关方法，那么只能再写一遍！

２、如果这个东西仅作为中间步骤执行，那么后续的步骤必须得写到第一个js 中的 onmessage（）方法里面，因为这个东西可以理解是异步的，这样的话就是会先执行第一个js 之后的代码，所以后续事情必须写到 onmessage（）函数里面，也就是当work.js有回应之后再执行！

2-2 ：注意, 在worker 内部支持函数，importScripts(); 来引入其他js ，从而实现函数的引入，通常我们会在worker中引入工具类函数！！！当然这个非常尴尬的一点，比如我们引用了util.js 但是util.js 依赖window 对象，那我们就引用不了了，所以很多时候我们还是得重新一遍函数！

在portal 中有实际应用：为支持前端渲染大数据（10W数据量级别），采用的这种方式来优化for 循环带来的浏览器卡死问题！！

当worker 不再使用时，需要关闭worker ，来节省内存，关闭worker 的方法有两种:

外部：也就是第一个js 中，使用 work..terminate(); 来关闭worker

内部，使用close() ; 方法来关闭，推荐使用！

注意事项：

如果像上边的demo那样写，你会发现，ie10 并不支持此功能！怎么处理？

注意worker.js　中最好这样写：

//写一个自执行函数(function (){//这里的self  可以不写，建议写！指代worker对象// 使用 addEventListener （） 代替 onmessage（） 提高兼容性self.addEventListener("message", function(event){    var num = event.data.age;    var result = {        name: "aa",        age: 22 + num    };    postMessage(result);}, false);})();

阅读全文

0 0