JavaScript 是单线程、异步、非阻塞、解释型脚本语言。JavaScript 的设计就是为了处理浏览器网页的交互(DOM操作的处理、UI动画等),决定了它是一门单线程语言。如果有多个线程,它们同时在操作 DOM,那网页将会一团糟。
但为了迎合复杂环境下的发展,前端界面渲染和执行的复杂度越来越大,这时需要其他线程来执行这些复杂耗时的操作
问题诞生1
- 如果我们要执行一些耗时的操作,比如加载一张很大的图片,我们可能需要一个进度条来让用户进行等待,在等待的过程中,整个js线程会被阻塞,后面的代码不能正常运行,这可能大大的降低用户体验,这时候我们就期望拥有一个工作线程来处理这些耗时的操作
Worker线程的实现
定义:创建Worker时,JS引擎向浏览器申请开一个子线程(子线程是浏览器开的,完全受主线程控制,而且不能操作DOM)
而我们只需要创建它的实例就可以使用它。
var worker = new Worker(js_file_path);
//用于关闭worker线程
worker.terminate();
问题诞生2
- 这两个线程怎么进行通信
JS引擎线程与worker线程间通过特定的方式通信
(postMessage API,需要通过序列化对象来与线程交互特定的数据)
postMessage API简单说明
那就是onPostMessage 和 onmessage这两个函数,其中onPostMessage(data)的参数是你要传递的数据,而onmessage是一个回调函数,只有在接受到数据时,onmessage会被回调,onmessage有一个隐藏的参数,那就是event,我们可以用event.data获取到传递过来的数据来更新主线程。
//main.html
var work = new Worker('work.js');
work.onmessage = function(message){
console.log(message);
}
//work.js
while(i < 1000000000){
i++;
}
postMessage({workdown:'yes'});