06、HTML5-Worker

一、什么是Worker？

• JS之前单线程，如果JS执行时被阻塞，那就会阻塞整个JS的执行流程，甚至导致浏览器失去响应(放入UI队列的个数，利用定时器解决)
• Worker对象，即启动一条新的后台JS线程，也就意味JS的并发。也就可以将耗时操作交给子线程处理，而不会阻塞当前UI线程，避免阻塞浏览器。

二、Worker API

• new Worker('后台处理的js地址')

• 利用postMessage传输数据

• onmessage消息事件

• importScripts('导入其他js文件')

01-worker.html文件
  <script>
  // 创建Worker
  var w1 = new Worker('01-test.js');
            
  // 向对应线程发送数据
  w1.postMessage('李明');
            
  // 监听消息
  w1.onmessage = function(ev){
    ev = ev || window.event;
    alert(ev.data);
  }
            
  </script>

01-test.js文件
// self: 全局Worker的对象
// 监听消息
self.onmessage = function(ev){
    
    ev = ev || window.event;
    
    // 再将数据返回给UI线程
    self.postMessage('hello ' + ev.data);
}

在开启的线程中，有很多语法都是不支持的，在另外的线程中更多就还是进行一些复杂的运算操作；

三、worker运行环境

• navgator: appName、appVersion、userAgent、platform
• location: 所有属性都是只读
• self: 指向全局的worker对象
• 所有的ECMA对象: Object、Array、Data等
• XMLHttpRequest()
• setTimeout()和setInterval()
• close(): 立即停止worker运行
• importScripts()

分析时间性能:
// 开始时间console.time(str);
// 结束时间console.timeEnd(str);