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);

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. 我是谁,要到哪里去 我,彭启军,80后。电工电子专业,00年代在广东打工,前后一共干过 8 种工作,最后回归...
    85d2a072a063阅读 18评论 0 0
  • 白嫩嫩的小手小脚穿着洗的干干净净的公主裙的衣服,一双大眼正好奇的瞅着面前的幼儿园,里面都是孩子的欢声笑语,不...
    恋酒孤阅读 298评论 0 0
  • 当初到坦桑申请的项目是ICT类的,自己本科读的是工商管理,觉得会对这个项目有帮助所以就去了,去之前听说非洲的项目...
    马志成阅读 568评论 0 1
  • 《金文诚〈孟子〉学习笔记746,尽心章14-32-2》 【"君子之守,修其身而天下平。人病舍其田而芸人之田,所求于...
    金吾生阅读 304评论 0 0

友情链接更多精彩内容