一 应用
该应用允许用户输入两个数,两个数确定一个范围,而程序代码则计算、收集这个范围的所有质数。
二 代码
1、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> <style type="text/css"> #show { width: 400px; background-color: #ddd; border-collapse: collapse; } td { border: 1px solid #555; } </style> </head> <body> 起始值:<input type="text" id="start" name="start"/><br/> 结束值:<input type="text" id="end" name="end"/><br/> <input type="button" value="计算" onclick="cal();"/> <table id="show"></table> <script type="text/javascript"> var cal = function() { // 得到用户输入的start、end两个值 var start = parseInt(document.getElementById("start").value); var end = parseInt(document.getElementById("end").value); // 如果start大于、等于end,直接结束该函数 if (start >= end) { return; } var cal = new Worker("worker.js"); // 定义需要提交给Worker线程的数据 var data = { start : start, end : end }; // 向Worker线程提交数据。 cal.postMessage(JSON.stringify(data)); cal.onmessage = function(event) { var table = document.getElementById("show"); // 清空该表格原有的内容 table.innerHTML = ""; // 获取Worker线程返回的数据 var result = event.data; var nums = result.split(","); // 定义表格总共包含多少列 var COLS_NUM = 7; for (var i = 0 ; i <= (nums.length - 1) / COLS_NUM ; i++) { // 添加表格行 var row = table.insertRow(i); // 循环插入7个单元格 for(var j = 0 ; j < COLS_NUM && i * COLS_NUM + j < nums.length - 1 ; j++) { // 插入单元格、并为单元格设置innerHTML属性 row.insertCell(j).innerHTML = nums[i * COLS_NUM + j] } } } }; </script> </body> </html>
2、JS代码
onmessage = function(event) { // 将数据提取出来。 var data = JSON.parse(event.data); // 取出start参数 var start = data.start; // 取出end参数 var end = data.end; var result = ""; search: for (var n = start ; n <= end ; n++) { for (var i = 2; i <= Math.sqrt(n); i ++) { // 如果除以n的余数为0,开始判断下一个数字。 if (n % i == 0) { continue search; } } // 搜集找到的质数 result += (n + ","); } // 发送消息,将会触发前台JavaScript脚本中 // Worker对象的onmessage方法 postMessage(result); }
三 运行结果
相关推荐
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址:https://blog.csdn.net/weixin_42063951/article/details/125300644
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址:https://blog.csdn.net/weixin_42063951/article/details/125300644
Web Worker 使用起来非常简单,在“主线程”中执如下操作即可创建一个 Worker 实,通过监听onmessage 事件获取消息,通过 postMess
共享WebWorker中的Socket.io 在共享的Webworker中运行Socket.io,可以为多个浏览器窗口和选项卡共享一个Socket.io Websocket连接。 替换了socket.io客户端。 快速安装 npm i --save socketio-shared-webworker ...
为什么使用Worker线程? 1、不会阻塞主应用程序,但是fork进程一次只能处理一项任务。如果您有两个任务,一个将花费10秒,另一个将花费1秒,按照顺序执行,不理想的是必须等待10秒才能执行第二个任务。 2、如果一个...
webworker封装调用face-api.js
使用HTML5 Web Worker提高Web的应用性能研究.pdf
它不但强化了Web系统或网页的表现性能,而且还增加了对本地数据库等Web应用功能的支持。其中,最重要的一个便是对多线程的支持。在HTML5中提出了工作线程(WebWorker)的概念,并且规范出WebWorker的三大主要特征:...
web worker 详解 web worker 详解 web worker 详解 web worker 详解
HTML5 js后台实现多线程 克服js单线程导致页面卡死情况
使用Web Worker进行Web的通用线程 安装 使用npm install web-threads --save或yarn add web-threads添加它到您的项目中yarn add web-threads 用法 带参数的简单功能 import { execute } from 'web-threads' let ...
web-worker-indexeddb 使用 Web Worker 访问服务器,并将数据保存在 IndexedDB 中以供离线使用。 在 IndexedDB 中保存数据后,应用程序将始终离线访问数据,并将通过 Web Worker 刷新数据。
node-webworker, NodeJS的WebWorkers实现 node-webworkers 是网络工作者API的一个实现,用于 node.js 。请参见这里的设计文档 。示例主源var sys = require('sys');var Worker = require('web
利用Render Props模式获得最大的灵活性以及易于使用的新Context API。 只需为Web Worker指定公共URL,您就可以访问它发送的任何消息或错误,以及postMessage处理程序。
在Webpack中自动捆绑和编译Web Workers
H5 web Worker demo
前端开源库-web-worker-manager网络工人经理,工人经理
圆周率计算,多线程,基于大数框架decimal.js和webworker 圆周率计算-可设置圆周率位数-可选择线程个数-多线程大数框架webworker输出useragent大数框架
NULL 博文链接:https://blueion.iteye.com/blog/1226652
同时,该示例还展示了如何与Web Worker进行通信和共享数据。 能做到什么: 1. 后台任务处理:通过创建Web Worker实例,可以在前端实现后台任务的处理,提高页面的性能和响应速度。 2. 消息传递:通过使用post...