使用Web Worker创建多线程应用

淩亂°似流年 2022-05-12 00:48 156阅读 0赞

**一 介绍**

HTML5 Web Workers

web worker是运行在后台的JavaScript，不会影响页面的性能。

什么是 Web Worker

当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。

您可以继续做任何愿意做的事情：点击、选取内容等等，而此时web worker在后台运行。

**二 应用**

利用Web Worker计算质数。

**三 代码**

1、JS代码

var n = 1;
    search: 
    while (n < 99999) 
    {
    	// 开始搜寻下一个质数
    	n += 1;
    	for (var i = 2; i <= Math.sqrt(n); i++)
    	{
    		// 如果除以n的余数为0，开始判断下一个数字。
    		if (n % i == 0)
    		{
    			continue search;
    		}
    	}
    	// 发现质数
    	postMessage(n);
    }

2、HTML代码

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> 计算质数 </title>
    </head>
    <body>
    	<p>已经发现的所有质数：<div id="result"></div></p>
    	<script>
    		// 使用Worker启动多线程来计算、收集质数
    		var worker = new Worker('worker.js');
    		worker.onmessage = function(event) 
    		{
    			document.getElementById('result').innerHTML
    				+= event.data + ", ";
    		};
    	</script>
    </body>
    </html>

**四 运行结果**

![3852b0e3-39e1-3c74-ae65-d011de412a43.png][]

[3852b0e3-39e1-3c74-ae65-d011de412a43.png]: /images/20220512/08794815488e4b45aa60d08311c67cf7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器多线程——web worker

一、引入 Web Worker 的原因 > JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，

- 日理万妓/ 2022年12月17日 11:53/ 0 赞/ 122 阅读

相关 nodejs中使用worker_threads来创建新的线程

文章目录简介 worker\_threads isMainThread MessageChannel parentP

Myth丶恋晨/ 2022年11月19日 09:43/ 0 赞/ 129 阅读

相关多线程——worker-master模式

该模式通过将任务拆分，多个worker线程共同处理任务，最终返回结果给master，由master组装最终结果。一、master

落日映苍穹つ/ 2022年06月09日 02:12/ 0 赞/ 142 阅读

相关【JavaScript】H5多线程的实现 — Web Worker

什么是Web Worker 　　将JavaScript代码交给Web Worker在后台执行时，页面就可以在JavaScript运行期间依然可以响应用户操作，以防止出现页

拼搏现实的明天。/ 2022年06月05日 04:56/ 0 赞/ 135 阅读

相关 JavaScript实现多线程——Web Worker【源代码】

原理网上都应该有介绍，这里我就不介绍了。直接上代码。代码分为3个文件，一个HTML文件，两个JS文件。 html文件： <html> <h

桃扇骨/ 2022年06月01日 04:41/ 0 赞/ 117 阅读

相关与Web Worker线程交换数据应用

一应用该应用允许用户输入两个数，两个数确定一个范围，而程序代码则计算、收集这个范围的所有质数。二代码 1、HTML代码 <!DOCTYPE htm

逃离我推掉我的手/ 2022年05月12日 00:48/ 0 赞/ 129 阅读

相关嵌套Worker线程应用

一应用 1、前台JS脚本先启动一个Worker线程，该Worker线程负责收集该范围内的所有质数。 2、程序把收集到的所有质数再次提交给另外一个Worker线程统计出指定

缺乏、安全感/ 2022年05月12日 00:48/ 0 赞/ 108 阅读

相关使用Web Worker创建多线程应用

一介绍 HTML5 Web Workers web worker是运行在后台的JavaScript，不会影响页面的性能。什么是 Web Worker 当在HTML页

淩亂°似流年/ 2022年05月12日 00:48/ 0 赞/ 157 阅读

相关 Web Worker使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。介绍通过

快来打我*/ 2022年02月24日 02:36/ 0 赞/ 147 阅读

相关 Html5之web workers多线程

Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。 1、首先看一

Dear 丶/ 2021年06月24日 14:34/ 0 赞/ 293 阅读