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