HTML5 多线程处理

HTML5中我觉得最有用和激动人心的功能就是引入了线程的概念，从而我们可以用多线程的思想来处理比较复杂的应用。我们可以让前台线程去完成和用户交互的工作，而把比较复杂的，耗时较长的运算放在后台线程中完成，而让前台线程与后台线程通过消息交互.(注意：后台线程是不可以直接操作window对象和dom树的)

创建后台线程的核心就是HTML5 提供的 Workers API ,下面是我用这个API开发一个相对比较复杂的应用。

假设我们有一个需求，页面上有一个输入框，让用户输入一个整数，然后计算出所有小于这个整数的素数，然后把所有的素数分别计算平方，最后吧结果显示在主页面上。

如果不用HTML5，那么将会是非常长的一段JS代码，而且如果输入的值比较大时，它会吧整个页面全部“冻结”，有了HTML5就轻松许多了，我们分工如下：

主线程：把主页面上的输入框的中的数发送给后台线程1

后台线程1：根据这个数来找到所有比它小的素数，然后把这些素数封装在一个JSON数组中发送给主线程,同时把这一步骤的处理时间发送给主线程

主线程：收到后台线程发过来的信息，然后把素数列表发给后台线程2

后台线程2：对于素数列表中的每一个素数，计算求出其平方，然后把所有的结果以JSON数组形式发送给主线程，同时把这一步骤的处理时间发送给主线程

主线程：把后台线程1，后台线程2所得到的结果以及每个线程执行各自所用的时间显示在主页面上指定id的区域内

所以，我们首先要有个主页面，用来接受用户输入和最终显示结果，这个页面代码如下：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta 
    charset="utf-8" 
/> 
<title>HTML5 线程交互例子</title> 
<script 
    type="text/javascript" 
    src="js/mainthread.js" 
> 
</script> 
  
 
</head> 
 
<body> 
    <p>这个例子演示HTML5中的Worker的用法，它可以让主线程和多个后台线程合作来完成一项任务</p> 
    <p>步骤概述： 
    <p>主线程：把主页面上的输入框的中的数发送给后台线程1</p> 
    <p>后台线程1：根据这个数来找到所有比它小的素数，然后把这些素数封装在一个字符串对象中发送给主线程,同时把这一步骤的处理时间发送给主线程</p> 
    <p>主线程收到后台线程发过来的信息，然后把素数列表发给后台线程2</p> 
    <p>后台线程2：对于素数列表中的每一个素数，计算求出其平方，然后把所有的结果发送给主线程，同时把这一步的处理时间发送给主线程</p> 
    <p>主线程：构造html页面，显示出每个步骤的处理时间，以及最终显示结果</p> 
    <br> 
    输入一个正整数： 
    <input type="text" id="inputedInteger"/> 
    <input type="button" value="点击让主线程把这个数值发送给后台线程1" onclick="handleInputInteger()"/> 
     
    <p id="result"></p> 
</body> 
 
</html>

其次，我们来构建主线程，它主要任务就是进行协调和调度，它先取得用户输入，然后发送消息给后台工作线程1，之后接收从后台工作线程1返回的内含素数数组的消息，并把这个数组发给后台工作线程2，再接收从后台工作线程2中返回的内含素数平方数组的消息，最终把所有消息汇总然后打印在主页面上，细节请看我的代码注释：

mainthread.js

//这个函数是页面上点击button的事件处理函数 
function handleInputInteger(){ 
     
//让window对象创建第一个后台线程(worker1)，这个后台线程专门负责得到小于等于某个整数的所有素数 
var worker1= new Worker("js/worker1-getPrimeList.js"); 
 
 
//获取用户输入的整数并转为10进制 
var integerInput=document.getElementById("inputedInteger").value; 
var num=parseInt(integerInput,10); 
 
//把从用户输入的整数传给后台线程1 
worker1.postMessage(num); 
 
 
//当获取从后台线程1(worker1)传递过来的结果时，我们处理这个结果,我们这个结果是个json对象 
worker1.onmessage=function(event){ 
  
    //取得从后台线程1(worker1)返回的JSON对象,并且分离出信息 
    //其中primeArray是由后台线程1(worker1)完成的取得所有<=指定整数的素数构成的素数数组（还是未解析的JSON数组） 
    //而worker1ElapsedTime则是后台线程1(worker1)完成它的工作的用时，单位毫秒 
    var data = event.data; 
    var dataInfo=JSON.parse(data); 
    var primeArray=dataInfo.primeArray; 
    var worker1ElapsedTime=dataInfo.worker1ElapsedTime; 
     
     
    //我们让主线程创建第二个后台线程(worker2)，这个后台线程可以把所有的素数计算平方 
    var worker2 = new Worker("js/worker2-getSquaredPrimeList.js"); 
     
    //把primeArray的信息发送给第二个后台线程（worker2） 
    worker2.postMessage(primeArray); 
     
    //当获得从后台线程2(worker2)传来的结果时，我们在主页面上构造信息块，反映出整个过程 
    worker2.onmessage=function(event){ 
         
        //取得从后台线程2(worker2)返回的JSON对象，并且分离出信息 
        //primeArray是从主线程传递给后台线程2（worker2)的素数数组 
        //squaredPrimeArray是由后台线程2(worker2)完成的所有的素数的平方构成的数组 
        //而worker2ElapsedTime则是后台线程2（worker2)完成它的工作的用时，单位毫秒 
        var data = event.data; 
        var dataInfo=JSON.parse(data); 
        var primeArray=dataInfo.primeArray; 
        var squaredPrimeArray=dataInfo.squaredPrimeArray; 
        var worker2ElapsedTime=dataInfo.worker2ElapsedTime; 
         
        //取得素数的个数 
        var numOfPrimes=JSON.parse(primeArray).length; 
        //构造信息文本,并且显示在页面上id为"result"的区域 
        var result=document.getElementById("result"); 
        var resultStr="用户输入的整数为： "+num+"<br>"; 
        resultStr+="<br>"; 
        resultStr+="后台线程1(worker1)经过分析可知，小于该整数的素数一共有"+numOfPrimes+"个。"+"<br>"; 
        resultStr+="后台线程1(worker1)得到了素数数组为："+primeArray+"<br>"; 
        resultStr+="后台线程1(worker1)的操作用时为： "+worker1ElapsedTime+"毫秒!"+"<br>"; 
        resultStr+="<br>"; 
        resultStr+="后台线程2(worker2)得到的素数的平方数组为:"+squaredPrimeArray+"<br>"; 
        resultStr+="后台线程2(worker2)的操作用时为: "+worker2ElapsedTime+"毫秒!"+"<br>"; 
        result.innerHTML=resultStr; 
         
    } 
 
}; 
 
 
}

再次，我们来定义后台工作线程1(worker1),这个线程必须被包含在一个js文件中，它必须定义当接收从主线程传来的消息（一个整数）时的处理函数，它会构造一个小于这个整数的所有素数组成的素数数组，并把这个素数数组返回给调用者线程（主线程）、当然了，我们还需要一个辅助方法来判断某个整数是否为素数，所以worker1-getPrimeList.js的代码如下：

//这个函数用于判断某个数是否为素数 
function isPrime(number) { 
        if (number < 2) { 
            return false; 
        } else { 
            for (var j = 2; j <= Math.sqrt(number); j++) { 
                if (number % j == 0) { 
                    return false; 
                } 
            } 
        } 
        return true; 
    } 
  
 
// 这个js代码可以接收传入的整数并且返回所有小于等于这个整数的素数列表 
onmessage = function(event) { 
     
     
    //计算开始时间 
    var beginTime = new Date().getTime(); 
     
 
    // 获取用户输入的整数 
    var num = event.data; 
     
 
    // 构造一个buffer素数数组 
    var bufferedPrimeArray = new Array(num); 
 
    var primeArrayMaxIndex=0; 
    for (var i = 0; i < num; i++) { 
        if (isPrime(i)){ 
            bufferedPrimeArray[primeArrayMaxIndex]=i; 
            primeArrayMaxIndex++; 
        } 
    } 
     
    //构造真正的素数数组 
    var primeArray = new Array(primeArrayMaxIndex); 
    //将buffer素数数组中的所有的素数移动到这个数组中 
    for(var j=0;j<primeArrayMaxIndex;j++){ 
        primeArray[j]=bufferedPrimeArray[j]; 
    } 
     
    //计算结束时间 
    var endTime= new Date().getTime(); 
     
    var elapsedTime=endTime-beginTime; 
     
     
    //构造json对象来存储信息: 
    var data = new Object; 
    data.primeArray = JSON.stringify(primeArray); 
    data.worker1ElapsedTime= elapsedTime; 
    var str=JSON.stringify(data); 
     
    //把这个json对象发送回主线程 (也就是创建这个worker1的线程） 
    postMessage(str); 
     
     
}

最后，我们来定义后台工作线程2(worker2),这个线程也必须被包含在一个js文件中，它必须定义当接收从主线程传来的消息（一个素数数组）时的处理函数，它会构造一个对应的素数平方数组，并把这个素数数组，以及素数平方数组返回给调用者线程（主线程），所以worker2-getSquaredPrimeList.js的代码如下：

// 这个 js代码可以把传入的素数数组中每个素数依次求平方，然后构造一个素数平方数组 
onmessage = function(event) { 
     
     
    //计算开始时间 
    var beginTime = new Date().getTime(); 
     
 
    // 获取从主线程传来的素数数组,并且还原成真正的素数数组 
    var primeArrayFromMainThread= event.data; 
    var primeArray = JSON.parse(primeArrayFromMainThread); 
    var length=primeArray.length; 
 
    //构造一个素数平方数组 
    var squaredPrimeArray=new Array(length); 
     
    //将原来数组中的所有素数依次求平方，然后填充到这个新的平方数组中 
    for (var i=0;i<length;i++){ 
        squaredPrimeArray[i]=primeArray[i]* primeArray[i]; 
    } 
         
     
    //计算结束时间 
    var endTime= new Date().getTime(); 
     
    var elapsedTime=endTime-beginTime; 
     
     
    //构造json对象来存储信息: 
    var data = new Object; 
    data.primeArray = JSON.stringify(primeArray); 
    data.squaredPrimeArray=JSON.stringify(squaredPrimeArray); 
    data.worker2ElapsedTime= elapsedTime; 
    var str=JSON.stringify(data); 
     
    //把这个json对象发送回主线程 (也就是创建这个worker1的线程） 
    postMessage(str); 
     
     
}

最后国际惯例，我们演示下例子：

首先，用户输入前：

用户输入某个整数，比如98，则显示如下：

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

stm32--独立看门狗使用
我采用得是STM32F10RC 参考得是STM32普中科技的给出得例子：https://www.bilibili.com/video/av30149282/?p=45（这里给出网址）1、基本介绍包含有两个看门狗，独立看门狗：IWDG 窗口看门狗：WWDG用来检测由于软件错误导致的故障。看门狗由VDD电压与供电，在停止和待机模式…...
2024/4/28 8:44:36
HTML5铸就VMware新特性，WSX技术能让浏览器远程运行虚拟桌面 .
from: http://blog.csdn.net/wuyelvcha/article/details/7377367 VMware公司的虚拟机可能很多人都用户过，他们正开发一项让人兴奋的新特性，允许用户使用浏览器远程访问虚拟桌面。该技术的开发实施者，VMware公司的克里斯提哈蒙德（Christian Hammond）近日在其博客上展示…...
2024/4/28 16:07:28
MySQL数据库优化概述
一，数据库优化的目的 1，避免出现页面访问错误由于数据库的timeout产生的5**错误；由于慢查询造成的也没无法加载；由于阻塞造成数据无法提交；2，增加数据库的稳定性很多数据库的问题都是由于低效的查询引起的；3，优化用户体验流畅页面的访问速度； …...
2024/4/20 2:12:19
STM32　IWDG独立看门狗定时时间计算
运用前须知： 1、IWDG所用计时时钟是不稳定的（35-60KHZ），通常取40KHZ计算. 对以下代码段，定时时间为：T=prer/40000*rlr，单位是S void watchdogInit(uint8_t timeoutS)//宏 {uint8_t prer = 4;uint16_t rlr = timeoutS * 625;IWDG_WriteAccessCmd(IWDG_WriteAccess_Enable…...
2024/4/27 22:07:30
让IE支持HTML5的新属性:Placeholder,Autofocus
借助jquery，让IE也支持HTML5新属性：Placeholder,Autofocus。 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta na…...
2024/4/13 2:38:51
STM32L151 的ADC的模拟看门狗中断和溢出中断
现场条件： 1.AD采集，DMA传输；AD设置为单通道的持续模式，DMA设置为单次模式。AD模拟看门狗设置的上门槛小于AD采集值，下门槛大于AD采样值，当DMA单次结束后，即会发生AD看门狗中断和溢出中断 void ADC1_IRQHandler(void) {if(ADC_GetITStatus(ADC1, ADC_IT_OVR) != RESET){…...
2024/4/27 21:59:34
mysql数据库库推荐书籍
一，《MySQL必知必会》《MySQL必知必会》MySQL是世界上最受欢迎的数据库管理系统之一。书中从介绍简单的数据检索开始，逐步深入一些复杂的内容，包括联结的使用、子查询、正则表达式和基于全文本的搜索、存储过程、游标、触发器、表约束，等等。通过重点突出的章节，条理清晰、…...
2024/4/13 2:38:46
知乎网解决HTML5 Placeholder的方案
使浏览器支持Placeholder有很多方法，都不是很完美，或多或少有点问题，且有些原生支持的浏览器在获得焦点时会清空Placeholder提示。发现知乎网的解决方法不错，特记录下。 windows系统中以下浏览器测试通过:Google Chrome 18,Firefox 12,IE 9,IE 6,Opera 11.5。在androi…...
2024/4/19 17:41:35
STM8S_008_WDG独立看门狗和窗口看门狗
相关标题：STM8S看门狗、IWDG、WWDGⅠ、写在前面STM8S看门狗WDG分为两类：IWDG：Independent WatchDog独立看门狗WWDG：Window WatchDog窗口看门狗独立看门狗模块可以用于解决处理器因为硬件或软件的故障所发生的错误。它由一个内部的128kHz的LSI阻容振荡器作为时钟源驱动，因…...
2024/4/27 23:14:14
zabbix的数据库优化
zabbix数据库优化参考文档： https://www.zabbix.org/wiki/Docs/howto/mysql_partition https://www.kancloud.cn/devops-centos/centos-linux-devops/375488my.cnf的参数的调整要根据实际应用和长期使用中慢慢去调整，此处主要是创建四个存储过程： create，drop，maintena…...
2024/4/13 2:38:31
Wadda：基于 HTML5 Canvas 的图片放大镜
简介　　Wadda 是下一代图片放大技术，使用 HTML5 Canvas 实现图片放大镜功能。借助 HTML5 Canvas 标签，能够自定义放大级别而不需要为每个级别定义图片，还能够设置羽化（Fading）效果。使用方法使用非常简单，只需在img标签的title属性中设置放大图片的路径，例如：<im…...
2024/4/28 4:21:02
STM32学习笔记——窗口看门狗WWDG介绍及配置
WWDG 窗口看门狗通常被用来监测，由外部干扰或不可预见的逻辑条件造成的应用程序背离正常的运行序列而产生的软件故障。除非递减计数器的值在T6位（WWDG->CR 的第六位）变成0前被刷新，看门狗电路在达到预置的时间周期时，会产生一个MCU复位。在递减计数器达到窗口寄存器(WW…...
2024/4/13 2:38:56
STM32F4 ADC1 模拟看门狗【库函数操作】
ADC的模拟看门狗用于检查电压是否越界。他又上下两个边界，可分别在寄存器ADC_HTR和ADC_LTR中设置。库函数是使用ADC_AnalogWatchdogThresholdsConfig设置的，无论是常规通道还是注入通道，都非常简单。当模拟看门狗检测到电压高于上限或者低于下限时将会产生看门狗中断。捕获这…...
2024/4/28 14:52:31
Mysql数据库如何优化？从哪几个方面考虑？
首先应该想到的是：1、优化分片键（如果有分库分表）（1）不要使用分区，分区性能很低，难以维护（2）不要使用主从数据库，读写分离有了缓存就再也不需要分主从了，毕竟延迟问题是无法解决的（虽然很小）（3）如果使用分库分表，那么查询条件务必先走分片键，否则就成了全表查…...
2024/4/28 3:37:38
HTML5 利用canvas API 展示阴影效果
HTML5的Canvas自带API可以显示阴影效果，主要还是在画布(canvas)的上下文对象(context)上做文章<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>HTML5 Combine Shape DEMO</title> <script type="text/javascript&quo…...
2024/4/13 2:39:16
stm32独立看门狗的溢出时间说明
...
2024/4/13 2:39:46
数据库优化相关面试题
1、如何设计一个高并发的系统数据库的优化，包括合理的事务隔离级别、SQL语句优化、索引的优化使用缓存，尽量减少数据库 IO分布式数据库、分布式缓存服务器的负载均衡2、实践中如何优化MySQL四条从效果上第一条影响最大，后面越来越小。SQL语句及索引的优化数据库表结构的优化…...
2024/4/13 2:39:41
STM32之窗口看门狗(WWDG)
转自 http://www.eeworld.com.cn/mcu/2015/1021/article_23159.html前几天学习STM32的两条狗，先学习了宠物狗（IWDG），和其它MCU差不多，不多说了。学到警犬（WWDG）的时候，问题来了，没有IWDG那么好理解了，看了半天没有搞懂是怎么回事，计数器值、窗口值、在什么时候喂狗、…...
2024/4/5 1:47:55
MySQL数据库优化总结如果索引多个字段，第一个字段要是经常作为查询条件的。如果只有第二个字段作为查询条件，这个索引不会起到作用;
MySQL数据库优化总结 http://www.cnblogs.com/villion/archive/2009/07/23/1893765.html对于一个以数据为中心的应用，数据库的好坏直接影响到程序的性能，因此数据库性能至关重要。一般来说，要保证数据库的效率，要做好以下四个方面的工作：数据库设计、sql语句优化、数…...
2024/4/5 1:47:54
HTML5 利用json对象来存取复杂数据
HTML5中可以用json对象来存取一组相关的对象，以下是个例子，我们收集一组用户输入信息，然后创建一个Object来囊括这些信息，之后用一个json字符串来表示这个Object，然后把json字符串存放在localStorage中。之后，我们让用户检索名称，用名称为key去问localStorage取得对应的…...
2024/4/18 4:07:20

HTML5 多线程处理

相关文章

最新文章