H5 web worker线程的使用
2017-08-08 22:59
218 查看
H5 web worker是执行线程,作用是用来执行耗时的js脚本,但又不完全是线程,为什么这样说呢,因为和真正的线程有些不一样,系统真正的线程是可以
用来执行任何任务的,但h5的worker底层虽然也是线程,却被限制了,只能做 特定的任务。不能用来操作DOM和BOM,浏览器禁止限制了。
注意:因为worker 的限制,所以创建的worker线程只能用来执行耗时的,跟DOM.BOM没有差点关系的js代码。
那这个怎么办呢,js程序多多少少总会和DOM有点关系,可以和UI主线程配合来完成一些相对跟DOM关联很小的操作。
把耗时操作的js单独写一个文件,专门用worker线程去执行,在UI主线程执行的js脚本操作跟DOM相关的工作,然后在
UI主线程执行的js脚本中创建一个worker工作线程,接着调用一个方法:postMessage();把数据传递到worker线程,在
耗时的文件里通过onmessage事件去判断ui主线程是否已传递了数据和消息过来通知开始执行脚本。
onmessage事件解释:只要UI主线程发送了消息,就会触发这个事件
具体使用方法:
首先在UI线程执行的js文件中创建一个工作线程:
UI主线程执行的js脚本
<script>
var worker = new Worker(js/1.js) //参数为要执行的js文件url
worker.postMessage("string")
//参数就是要传递的数据,字符串格式,当然如果在1.js文件中不需要用到dom或者UI主线程执行的js脚本中的数据,也可以省略这步,从第一步中直接去执行
</script>
worker线程执行的js脚本
<script>
console.log("worker线程待命中......") /
onmessage=function(e){ //UI线程发来消息触发事件,才开始执行,此事用全局window调用,所以没有前缀,
var n=e.data //从事件对象data中获取传递过来的消息及数据;
耗时的js代码......
}
//还是那句话,如果在这个文件中不需要用到dom中或者UI主线程执行的js脚本中的数据,
//这个可以直接是耗时程序,不需要onmessage事件和数据消息接收的步骤,让worker线程直接执行
</script>
反过来UI主线程要得到耗时操作后的结果的话,就是在耗时文件中用postMessage()方法发送数据,同样用window调用;如下:
postMessage(string) //参数为执行后的结果数据,字符串格式;
然后到UI主线程文件中用onmessage事件判断耗时操作文件是否执行完传递过来了数据,还是有消息传递过来就会触发事件
从事件data对象中获取结果数据和消息
w6.onmessage=function(e){
var a=e.data
}
也可以同时创建 多跟worker线程去执行多个耗时文件,返回的数据触发onmessage事件时会自动根据哪根线程执行的则
返回给哪个线程对象,因为创建线程对象时要用不同的变量保存worker对象,UI线程这边接收消息又需要把onmessage事件
绑定worker线程对象,所以多个线程也不会把消息返回错乱
用来执行任何任务的,但h5的worker底层虽然也是线程,却被限制了,只能做 特定的任务。不能用来操作DOM和BOM,浏览器禁止限制了。
注意:因为worker 的限制,所以创建的worker线程只能用来执行耗时的,跟DOM.BOM没有差点关系的js代码。
那这个怎么办呢,js程序多多少少总会和DOM有点关系,可以和UI主线程配合来完成一些相对跟DOM关联很小的操作。
把耗时操作的js单独写一个文件,专门用worker线程去执行,在UI主线程执行的js脚本操作跟DOM相关的工作,然后在
UI主线程执行的js脚本中创建一个worker工作线程,接着调用一个方法:postMessage();把数据传递到worker线程,在
耗时的文件里通过onmessage事件去判断ui主线程是否已传递了数据和消息过来通知开始执行脚本。
onmessage事件解释:只要UI主线程发送了消息,就会触发这个事件
具体使用方法:
首先在UI线程执行的js文件中创建一个工作线程:
UI主线程执行的js脚本
<script>
var worker = new Worker(js/1.js) //参数为要执行的js文件url
worker.postMessage("string")
//参数就是要传递的数据,字符串格式,当然如果在1.js文件中不需要用到dom或者UI主线程执行的js脚本中的数据,也可以省略这步,从第一步中直接去执行
</script>
worker线程执行的js脚本
<script>
console.log("worker线程待命中......") /
onmessage=function(e){ //UI线程发来消息触发事件,才开始执行,此事用全局window调用,所以没有前缀,
var n=e.data //从事件对象data中获取传递过来的消息及数据;
耗时的js代码......
}
//还是那句话,如果在这个文件中不需要用到dom中或者UI主线程执行的js脚本中的数据,
//这个可以直接是耗时程序,不需要onmessage事件和数据消息接收的步骤,让worker线程直接执行
</script>
反过来UI主线程要得到耗时操作后的结果的话,就是在耗时文件中用postMessage()方法发送数据,同样用window调用;如下:
postMessage(string) //参数为执行后的结果数据,字符串格式;
然后到UI主线程文件中用onmessage事件判断耗时操作文件是否执行完传递过来了数据,还是有消息传递过来就会触发事件
从事件data对象中获取结果数据和消息
w6.onmessage=function(e){
var a=e.data
}
也可以同时创建 多跟worker线程去执行多个耗时文件,返回的数据触发onmessage事件时会自动根据哪根线程执行的则
返回给哪个线程对象,因为创建线程对象时要用不同的变量保存worker对象,UI线程这边接收消息又需要把onmessage事件
绑定worker线程对象,所以多个线程也不会把消息返回错乱
相关文章推荐
- HTML5 使用Web Worker处理线程
- HTML5 Web Worker的使用方法
- HTML5 Web Worker的使用方法(转)
- html5 web worker 和serverSend使用
- 当你想在web应用中使用线程的时候-我们到底能走多远系列(24)
- Html5 Web worker 不能使用 web sql
- CODE:使用匿名方法,让worker线程中更新UI控件的代码更优雅
- JS线程模型&Web Worker
- HTML5 Web Worker的使用
- web worker 处理线程
- HTML5——Web Worker使用方法
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用
- Worker线程使用消息循环
- 在工作线程(WorkerThread)中使用Handler
- HTML5 中工作线程(Web Worker)简介
- HTML5 Web Worker的使用
- 【JavaScript】线程WebWorker
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用