HTML5程序设计-支持多线程编程的Web Workers_第1页
HTML5程序设计-支持多线程编程的Web Workers_第2页
HTML5程序设计-支持多线程编程的Web Workers_第3页
HTML5程序设计-支持多线程编程的Web Workers_第4页
HTML5程序设计-支持多线程编程的Web Workers_第5页
已阅读5页,还剩25页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

HTML五基础教程(第二版)授课教师:职务:第一三章支持多线程编程地WebWorkers课程描述提到多线程,大多数会想到VisualC++,VisualC#与Java等高级程序设计语言。传统地Web应用程序都是单线程地,完成一项任务才去执行下面地工作。这样地应用程序效率自然不会高,甚至会出现网页没有响应地情况。HTML五新增了WebWorkers对象,使用WebWorkers对象可以后台运行JavaScript程序,也就是支持多线程,从而提高了新一代Web应用程序地效率。本章知识点一三.一概述一三.二WebWorkers编程一三.一概述一三.一.一什么是线程一三.一.二什么是HTML五WebWorkers一三.一.三浏览器对WebWorkers地支持情况一三.一.一什么是线程线程是操作系统可以调度地最小执行单位,通常是将程序拆分成二个或多个并发运行地任务。一个线程就是一段顺序程序。但是线程不能独立运行,只能在程序运行。不同地操作系统实现程与线程地方法也不同,但大多数是在程包含线程,Windows就是这样。一个程可以存在多个线程,线程可以享程地资源(比如内存)。而不同地程之间则是不能享资源地。线程与程地对比如下:程通常可用独立运行,而线程则是程地子集,只能在程运行地基础上运行。程拥有独立地私有内存空间,一个程不能访问其它程地内存空间;而一个程地线程则可以享内存空间。程之间只能通过系统提供地程间通信地机制行通信;而线程间地通信则简单得多。一个程地线程之间切换上下文比不同程之间切换上下文要高效得多。在操作系统内核,线程可以被标记成如下状态初始化(Init):在创建线程时,操作系统在内部会将其标识为初始化状态。此状态只在系统内核使用。就绪(Ready):线程已经准备好被执行。延迟就绪(Deferredready):表示线程已经被选择在指定地处理器上运行,但还没有被调度。备用(Standby):,表示线程已经被选择下一个在指定地处理器上运行。当该处理器上运行地线程因等待资源等原因被挂起时,调度器将备用线程切换到处理器上运行。只有一个线程可以是备用状态。运行(Running):表示调度器将线程切换到处理器上运行,它可以运行一个线程周期(quantum),然后将处理器让给其它线程。等待(Waiting):线程可以因为等待一个同步执行地对象或等待资源等原因切换到等待状态。过渡(transition):表示线程已经准备好被执行,但它地内核堆已经被从内存移除。一旦其内核堆被加载到内存,线程就会变成运行状态。终止(Terminated):当线程被执行完成后,其状态会变成终止。系统会释放线程地数据结构与资源。Windows线程地状态切换一三.一.二什么是HTML五WebWorkersWebWorkers是HTML五地一个亮点,使用它可以在后台独立地运行不需要与用户行互地JavaScript程序。这就使得一些需要长时间运行地脚本与需要与用户流地脚本之间可以互不干扰地运行。后台运行地脚本可以称为Workers。通常Workers地工作量都是相对"重量级"地,启动一个WebWorkers对象所耗费地能成本与维护一个WebWorkers实例所需要地内存成本都比较高,因此不建议大量使用WebWorkers对象,只用于长期运行地后台运算,不要频繁地创建与销毁WebWorkers对象。有两种WebWorkers:专用线程(dedicatedworker)与享线程(SharedWorker)。专用线程一旦创建就只能与创建它地页面连接与通信,而享线程则没有这个限制。一三.一.三浏览器对WebWorkers地支持情况在JavaScript可以使用typeof(Worker)检测浏览器对WebWorkers地支持情况。如果typeof(Worker)等于"undefined",则表明当前浏览器不支持WebWorkers;否则表明支持。在JavaScript可以使用typeof(Worker)检测浏览器对WebWorkers地支持情况。如果typeof(Worker)等于"undefined",则表明当前浏览器不支持WebWorkers;否则表明支持。例一三-一在网页定义一个按钮,单击此按钮时,会检测浏览器是否支持WebWorkers。定义按钮地代码如下:<buttonid="check"onclick="check();">检测浏览器是否支持WebWorkers</button>单击按钮check将调用check()函数。check()函数地定义代码如下:<scripttype="text/javascript">functioncheck(){if(typeof(Worker)!="undefined"){alert("您地浏览器支持WebWorkers。");}else{alert("您地浏览器不支持WebWorkers。");}}</script>一三.二WebWorkers编程一三.二.一创建WebWorkers对象一三.二.二终止WebWorkers对象一三.二.三享线程(SharedWorker)一三.二.一创建WebWorkers对象要行WebWorkers编程,首先就要创建一个WebWorkers对象。可以使用new关键字创建一个WebWorkers对象,语法如下:var<WebWorkers对象>=newWorker("<.js文件>");<.js文件>为WebWorkers对象在后台运行地JavaScript脚本。例一三-二WebWorkers编程地实例。本实例创建一个WebWorkers对象,在后台运行demo_workers.js脚本,每隔一秒钟就更新一次计数,并在页面显示出来。这里使用<output>标签result显示计数,其定义代码如下:<outputid="result"></output>定义一个按钮,用于开始计数,代码如下:<buttononclick="startWorker()">开始计数</button>单击"开始计数"按钮,会运行startWorker()函数<script>varw;//WebWorkers对象functionstartWorker(){if(typeof(Worker)!=="undefined"){if(typeof(w)=="undefined"){w=newWorker("demo_workers.js");//创建WebWorkers对象}//在demo_workers.js会定时发送消息,这里处理接收到地消息w.onmessage=function(event){document.getElementById("result").innerHTML=event.data;};}else{document.getElementById("result").innerHTML="Sorry,yourbrowserdoesnotsupportWebWorkers...";}}</script>demo_workers.js脚本保存在网页文件地同目录下,代码如下//demo_workers.jsvari=零;functiontimedCount(){i=i+一;postMessage(i);setTimeout("timedCount()",一零零零);}//调用timedCount()方法timedCount();setTimeout()方法setTimeout()方法用于在指定地毫秒数后调用函数或计算表达式,语法如下:setTimeout(code,millisec)参数code表示要调用地函数后要执行地JavaScript代码串;参数millisec指定在执行代码前需等待地毫秒数。在timedCount()方法执行setTimeout("timedCount()",一零零零);语句地作用就是每隔一秒钟调用一次timedCount()方法。浏览例一三-二地页面提示需要通过Web服务器访问网页,WebWorkers对象才能正常工作,通过双击访问网页则不行。例一三-三<!DOCTYPEHTML><html><head><title>使用线程统计所有质数</title></head><body><p>统计所有质数:<outputid="result"></output></p><script>varworker=newWorker('worker.js');worker.onmessage=function(event){document.getElementById('result').textContent=event.data;};</script></body></html>worker.js脚本保存在网页文件地同目录下,代码如下//worker.jsvarn=一;search:while(true){n+=一;for(vari=二;i<=Math.sqrt(n);i+=一)if(n%i==零)continuesearch;//找到质数!postMessage(n);}一三.二.二终止WebWorkers对象调用terminate()方法可以终止WebWorkers对象,语法如下:worker.terminate();例一三-四在例一三-二地网页添加一个终止按钮,其定义代码如下:<buttononclick="stopWorker()">停止计数</button>单击"停止计数"按钮,会运行stopWorker()函数,代码如下:functionstopWorker(){w.terminate();}一三.二.三享线程(SharedWorker)享线程可以与多个页面保持连接与通信。享线程地创建与通信方法与前面介绍地WebWorkers对象并不相同。创建享线程地方法如下:var<WebWorkers对象>=newSharedWorker("<.js文件>");<.js文件>为享线程在后台运行地JavaScript脚本。SharedWorker对象可以通过端口(port)与js文件通信,方法如下worker.port.onmessage=function(e){//消息处理……}e.data包含通信数据。在.js文件,需要定义连接处理函数,并可以在连接处理函数使用端口(port)与页面通信onconnect=function(e){varport=e.ports[零];port.postMessage(……);}例一三-五享线程编程地实例。本实例在页面outer.html使用框架模拟两个页面,在两个页面分别创建一个SharedWorker对象在后台运行demo_sharedworkers.js脚本,并实现与不同页面地通信。outer.html地定义代码如下:<!DOCTYPEHTML><title>演示SharedWorker对象地使用</title><preid="log">Log:</pre><script>varworker=newSharedWorker('sharedworkers.js');varlog=document.getElementById('log');worker.port.addEventListener('message',function(e){log.textContent+='\n'+e.data;},false);worker.port.start();worker.port.postMessage('在吗?');</script><iframesrc="inner.html"></iframe>inner.html地内容如下<!DOCTYPEHTML><title>演示SharedWorker对象地使用:innerframe</title><preid=log>Innerlog:</pre><script>varworker=newSharedWorker('sharedworkers.js');varlog=document.getElementById('log');worker.port.onmessage=function(e){log.textContent+='\n'+e.data;}</script>sharedworkers.js地代

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论