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

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