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

最新推荐文章于 2024-07-25 14:20:14 发布

张校长

最新推荐文章于 2024-07-25 14:20:14 发布

阅读量559

点赞数

分类专栏： HTML5 web性能优化前端开发文章标签： javascript 性能 web 优化 HTML5

本文链接：https://blog.csdn.net/sinat_15258199/article/details/75072787

版权

前端开发同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

web性能优化

2 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

主要是讲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);

})();