Web Worker

时间 2020-05-20

标签 web worker 栏目 HTML 繁體版

原文原文链接

Web Worker 让你在后台运行JS代码。
html

通常地，JavaScript和页面UI会共用一个线程，当JavaScript在运行的时候，页面是不响应用户的任何操做的。这个时候，这段代码就能够交给Web Worker来完成，不会影响页面交互。
java

Web Worker 没法访问DOM节点
跨域

Web Worker 没法访问window、document之类的浏览器全局变量浏览器

Web Worker 没法访问全局变量或全局函数ide

Web Worker 没法使用 alert（），confirm（）等函数

1.经常使用API
post

（1）postMessage(data)ui

子线程与主线程之间互相通讯使用方法，传递的data为任意值url

//worker = new Worker('url');
//worker.postMessage传递给子线程数据，对象
worker.postMessage({first:1,second:2});
//子线程中也能够使用postMessage，如传递字符串
postMessage(‘test’);

(2)terminate()spa

线程中终止worker，此后没法再利用其进行消息传递。注意：一旦terminate后，没法从新启用，只能另外建立。

 function init(){                
      var worker = new Worker('worker.js');                
     //每隔100毫秒，向子线程传递{name: 'monkey'}信息                
      setInterval(function(){
           worker.postMessage({name: 'monkey'});
      },100);                
      //当主线程worker收到来自子线程的消息后，触发message事件  
      worker.onmessage = function(event){                                
            document.getElementById('result').innerHTML+=event.data+"<br/>" ;                   //主线程使用terminate方法中断与子线程来往，在浏览器中只能显示一次event.data                    worker.terminate();
         };
    };

3.Web Worker 上下文

onmessage() //接收消息事件

onerror() //错误消息事件

<!DOCTYPE html>
    <head>
        <title>worker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            function init(){
                var worker = new Worker('worker.js');
                //接收消息事件
                worker.onmessage = function(event){
                    console.log(event.data);
                };
                //错误信息事件
                worker.onerror = function(e){
                    console.log('erro: ' + e.message);
                    //终止线程
                    worker.terminate();
                };
            };
        </script>
    </head>
    <body onload = "init()">
        
    </body>
</html>

咱们能够作什么：

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

　　2.能够在worker中经过importScripts(url)加载另外的脚本文件

　　3.能够使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

　　4.能够使用XMLHttpRequest来发送请求

　　5.能够访问navigator的部分属性

局限性：

　　1.不能跨域加载JS

　　2.worker内代码不能访问DOM

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

　　4.IE这个新特性

1. Web Worker
2. web worker
3. 区别Web Socket、Web Worker和Service Worker
4. Web Worker Best Practices
5. Web Worker API
6. web worker 简介
7. Web Worker 初探
8. web worker 实践
9. JavaScript之Web Worker
10. 如何debug web worker
更多相关文章...
• Web 标准 - 网站建设指南
• Web 词汇表 - 网站建设指南
• Java 8 Stream 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）