web worker使用

使用postMessage()方法传递信息。来自Worker的数据保存在event.data中。通过message和error事件与页面通信。

<script>
    var data = [4,2,3,5];
    alert("start  "+data);
    var worker = new Worker("stufftodo.js");
    worker.postMessage(data);

    worker.onmessage = function(event){
        var data = event.data;
        alert("end  "+data);
    };
    //filename,lineno,message分别对应发生错误的文件名、代码行号和完整的错误信息
    worker.onerror = function(event){
        console.log("ERROR: "+event.filename + " ("+event.lineno+"): "+
        event.message);
    };
</script>

stufftodo.js文件内容如下:

//self引用worker对象
self.onmessage = function(event){
    var data = event.data;
    data.sort(function(a,b){
        return a - b ;
    });
    self.postMessage(data);
}
时间: 2024-10-07 06:46:48

web worker使用的相关文章

JS线程模型&amp;Web Worker

js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做出响应.这也是为什么Ajax的API都是异步的,以及为什么客户端Javascript不能使用一个简单的异步load()或者require()函数来加载javascript库 如果应用程序不得不执行太多的计算而导致明显的延迟,应该允许文档在执行这个计算之前完全载入,并且确保告诉用户正在进行计算并且浏览

HTML5 Web Worker简单使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: //worker.jso

HTML5新增的一些属性和功能之八——web Worker

Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把js文件放在body结束之前,或者优化算法复杂度.但是根本上解决还是线程的问题.在HTML5中新增了web Workers的方法,用来解决JavaScript多线程的问题.把一些耗时的程序放在单独的js中,和浏览器的UI渲染线程同步执行. 如何用: 1.首先把需要单独执行的js代码单独放在一个js文

web socket and web worker 基础原理及使用

个人认为HTML5最吸引人的两大功能, web socket 和 worker为构建高效能的web应用提供了新的参考方案. 大体来说,web socket提供更高效的传输协议,web worker提供多线程提高web应用计算效率.最近项目有用到,对应两个问题的解决,目前运行效果来看还是很不错. 这里主要是总结这两个技术的基础原理,和常用API.备忘,也列举关键掌握点,入门和基础使用足以. Web Socket websocket是一种协议,本质上和http,tcp一样.协议是用来说明数据是如何传

web worker 的 self

A self object, which is the global object representing the worker in this scope. 对self对象的译法,未知妥否. 1 // Call the invertImage method when this worker receives a message from the calling script. 2 // The ‘self’ object contains the only methods a web wor

HTML5 Web Worker的使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: JavaScript 1

Web Worker

web worker 是运行在后台的 JavaScript,不会影响页面的性能. 什么是web worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker 在后台运行. 所有主流浏览器均支持 web worker,除了 Internet Explorer. 使用之前,检测浏览器是否支持? i

web worker在WebKit中的实现机制

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.这是HTML5的一个标准:实现上讲,浏览器为wokrer启动了新的线程,从而实现了异步操作的功能; 下面是woker的一个简单例子,在html页面中,以worker.js为源文件,创建了名为"worker"的Worker对象,通过worker.postMessage()接口向worker线程发送消息: worker线程将JSON格式化传递的两个数据相加后,再通过postMessage()接口

html5之Web Worker -- js多线程编程

什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript和UI页面会共用一个线程,在HTML页面中执行js脚本时,页面的状态是不可响应的,直到脚本已完成.而这段代码可以交给Web Worker在后台运行,那么页面在Javascript运行期间依然可以响应用户操作.后台会启动一个worker线程来执行这段代码,用户可以创建多个worker线程. 有两种 W

离线应用和web worker

只当自己笔记一样,把自己看的资料整理一下而已,勿喷! 搭建离线应用可以适用于一些小的应用场景.感觉目前用的也不是很多,分为以下几步: ①找到服务器的配置文件,设置头信息 : AddType text/cache-manifest .manifest ② html标签加 : manifest=“xxxxx.manifest”,例如: <html manifest="cache.manifest"> ③写manifest文件 : 离线的清单列表 先写 : CACHE MANIF