js多线程的实现-Worker

大家都知道js是基于单线程的，而这个线程就是浏览器的js引擎。
首先来看一下大家用的浏览器都具有那些线程吧。

如果我们要执行一些耗时的操作，比如加载一张很大的图片，我们可能需要一个进度条来让用户进行等待，在等待的过程中，整个js线程会被阻塞，后面的代码不能正常运行，这可能大大的降低用户体验，这时候我们就期望拥有一个工作线程来处理这些耗时的操作。在传统的html时代是基本不可能实现的，而现在，我们拥有一种叫做worker的东西。它是js里的一个类，而我们只需要创建它的实例就可以使用它。

var worker = new Worker(js_file_path);

参数填上你的js文件的路径，这个js文件将会在浏览器新开的线程里运行，而与原先的js引擎的线程并不影响。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>worker</title>
</head>
<body><input type="text" name="ipt" id="ipt" value=""><br><input type="button" name="start" id="start" value="start"><input type="button" name="stop" id="stop" value="stop"><input type="button" name="alert" id="alert" value="alert"><script type="text/javascript">var ipt = document.getElementById("ipt");var start = document.getElementById("start");var stop = document.getElementById("stop");var alt = document.getElementById("alert");var worker = new Worker("js/test.js");function getMessage() {worker.onmessage = function() {ipt.value = event.data;}}getMessage();stop.addEventListener("click", function() {//用于关闭worker线程
            worker.terminate();})start.addEventListener("click", function() {//开启worker线程
            worker = new Worker("js/test.js");getMessage();})alt.addEventListener("click", function() {alert("i'm a dialog");})</script>
</body>
</html>

test.js里的代码，也就是存在于worker线程里的代码

var i = 0;
function mainFunc(){i++;//把i发送到浏览器的js引擎线程里
    postMessage(i);
}
var id = setInterval(mainFunc,1000);

运行起来我们会发现

点击"alert"里的“确定”后，它的数值并非2，而是一个比2更大的数

虽然dialog的弹出会阻塞js引擎线程，但是并不影响worker线程的运行，所以，在我们点击确定后，只是在js引擎线程上更新了新的内容，而数值是一直在跑动的，这就说明worker线程和原本的js线程互不影响.

那么既然互不影响，两个线程之间要怎么来联系呢，答案其实已经在代码里了，那就是onPostMessage 和 onmessage这两个函数，其中onPostMessage（data）的参数是你要传递的数据，而onmessage是一个回调函数，只有在接受到数据时，onmessage会被回调，onmessage有一个隐藏的参数，那就是event，我们可以用event.data获取到传递过来的数据来更新主线程。

使用worker线程应注意的是，所有js里集成的对象都在js线程里，而并非worker线程。
例如我们在worker线程里写上：

var a = document.getElementById("a");

结果你会得到一条Error，告诉你找不到document,或者document is undefined。所以我们尽量把需要的东西都写到主线程里，而只把耗时的操作写到worker线程里。

注意：如果所运行的html页面在本地启动脚本，chrome会报错。

原因分析：Chrome从本地文件运行脚本时不允许加载web worker.

解决办法：启动web容器，通过服务器访问页面资源。比如：localhost:8081/worker.html 或这换种浏览器试试。

参考： https://www.cnblogs.com/haodawang/articles/5850822.html

转载于:https://www.cnblogs.com/starrk-01/p/10282377.html

js多线程的实现-Worker相关推荐

原生JS多线程解决方案：Worker
一.简介一般情况下我们使用JS都是单线程的模式,也就是前边的代码执行完,才能轮到后边的代码执行.后来因为电脑计算能力的增强,单线程模式对于多核CPU的计算机计算能力便出现了一些浪费. web Wor ...
js多线程的实现：worker
JS是一种单线程语言,即使是一些异步的事件也是在JS的主线程上运行的.像setTimeout.ajax的异步请求,或者是dom元素的一些事件,都是在JS主线程执行的.这些操作并没有在浏览器中开辟新的线 ...
js打印线程id_Node.js多线程完全指南[每日前端夜话0x43]
每日前端夜话0x3D 每日前端夜话,陪你聊前端. 每天晚上18:00准时推送. 正文共:5177 字预计阅读时间: 17 分钟翻译:疯狂的技术宅原文:https://blog.logrocket ...
简单实现一个 js 多线程
简单实现一个 js 的多线程执行和多线程之间数据的传递 JS作为脚本语言,它的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.(这里这些问题我们不做研究) 但 ...
android 多线程 js,JS多线程（web work）
JS多线程 JS多线程不允许操作DOM 1. 引用Concurrent Thread.js库用法:Concurrent.Thread.Create(function(){};) 2. Web Wor ...
前端进阶（十八）js多线程
HTML5引入Web Works,让js支持多线程. 一.多线程demo 1.先写一个add函数 function(a, b){if(a && b){return a + b;}ret ...
node和php处理高并发,node.js“多线程”如何处理高并发任务？,nodejs java 高并发
node.js"多线程"如何处理高并发任务?node . js"多线程"是如何处理高度并发的任务的?,下面的文章介绍了使用nodejs"多线程&quo ...
js多线程new worker报错cannot be accessed from origin 问题
---- Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法.一旦它被创建,Web Workers 就可以通过 postMessage 向任务池发送任务请求,执行完 ...
【nodejs原理源码赏析（4）】深度剖析cluster模块源码与node.js多线程（上）
[摘要] 集群管理模块cluster浅析示例代码托管在:http://www.github.com/dashnowords/blogs 一. 概述 cluster模块是node.js中用于实现和管理 ...

js多线程的实现-Worker

js多线程的实现-Worker相关推荐

最新文章

热门文章