美文网首页
06、HTML5-Worker

06、HTML5-Worker

作者: 王梓懿_1fbc | 来源:发表于2018-10-20 14:51 被阅读2次

    一、什么是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);
    

    作者:西门奄
    链接:https://www.jianshu.com/u/77035eb804c3
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    相关文章

      网友评论

          本文标题:06、HTML5-Worker

          本文链接:https://www.haomeiwen.com/subject/crhmzftx.html