第10章 使用Web Workers处理线程(HTML5与CSS3 Web前端开发技术).ppt

HTML5+CSS3 Web前端开发技术第10章使用Web Workers处理线程Web Workers概述1页面与线程数据的交互2使用SharedWorker创建共享线程3HTML5+CSS3 Web Workers概述1. Web Workers的引入 Web Workers是HTML5提供的一种多线程机制。?线程的概念线程是线程是一个程序内的顺序控制流,使得一个程序具有能够“同时”执行多个任务的能力。线程可以认为是比程序更小的的可执行单元,实现了在程序内部并发执行多任务的能力。Web Workers就是一种多线程机制,它本身考虑了线程安全问题,其底层是多线程技术。HTML5+CSS3 Web Workers概述1. Web Workers的引入示例10-1是一个单线程程序,实现数值累加的功能HTML5+CSS3 Web Workers概述1. Web Workers的引入?Web WorkersWeb Workers是运行在后台的JavaScript,是HTML5实现多线程的一种方法,它的功能包括创建线程,线程与前端页面的数据交互,线程本身占用大量内存资源,本身也需要关闭或销毁。 Web Workers API中的方法和事件对上面的功能进行了封装。使用Web Workers API,用户可以很容易地创建在后台运行的线程(Worker),并完成数据交互和终止线程。HTML5+CSS3 Web Workers概述1. Web Workers的引入表10-1 Web Workers API中常用的方法事件方法/事件功能Worker()方法构造器,用于创建线程postMessage()方法用于发送信息terminate()方法终止线程,并释放浏览器/计算机资源close()方法结束线程setTimeout()方法在线程中实现定时处理setInterval ()方法在线程中实现定时处理onmessage事件获得接收消息的事件句柄HTML5+CSS3 Web Workers概述2. 使用Web Workers创建线程(1)创建线程的方法创建后台线程的步骤十分简单。只要在Worker类的构造器中,将需要在后台线程中执行的脚本文件的URL地址作为参数,然后创建Worker对象就可以了,代码如下。var worker=new Worker(""); (2)传递数据通过发送和接收消息来实现前面页面与后台线程互相传递数据。接收消息的方法有2种。HTML5+CSS3 Web Workers概述?通过获取Worker对象的onmessage事件的句柄可以在后台线程中接收消息。 =function(event) { //消息处理, } ?使用addEventListener()方法监听message事件。("message",function(event) { //(‘message’).innerHTML= ; //消息处理,},false);如果想要发送消息,需要使用postMessage()方法。HTML5+CSS3 Web Workers概述2. 使用Web Workers创建线程(3)创建Web Workers线程的一个例子HTML5+CSS3 ("Mary")语句,向后台线程发送数据;后台线程接收数据后,("Hello "+)语句将数据发送至前端页面;由前端页面在一个output元素中显示。HTML5+CSS3 页面与线程数据的交互2. 前台页面向后台传送JSON数据 JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,适合于服务器与 JavaScript 的交互。JSON数据描述以“{”开始,以“}”结束,JSON中的多个元素需要用逗号分开。在Web Worker线程应用时,发送数据时,可以使用下面的代码:({name:"Rose",age:22,address: "Shai"});