在 Web Workers 中使用 postMessage 和 onmessage

首先，需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来，参数是需要在另一个线程中运行的 JavaScript 文件名称。然后在这个实例上监听 onmessage 事件。最后另一个线程中的 JavaScript 就可以通过调用 postMessage 方法在这两个线程间传递数据了。

清单 1. 主线程中创建 Worker 实例，并监听 onmessage 事件
  1.  <html>
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4.  <title>Test Web worker</title>
  5.  <script type="text/JavaScript">
  6. 	 function init(){
  7. 		 var worker = new Worker('compute.js');
  8. 		 //event 参数中有 data 属性，就是子线程中返回的结果数据
  9. 		 worker.onmessage= function (event) {
  10. 			 // 把子线程返回的结果添加到 div 上
  11. 			 document.getElementById("result").innerHTML +=
  12. 			    event.data+"<br/>";
  13. 		 };
  14. 	 }
  15.  </script>
  16.  </head>
  17.  <body onload="init()">
  18.  <div id="result"></div>
  19.  </body>
  20.  </html>

在客户端的 compute.js 中，只是简单的重复多次加和操作，最后通过 postMessage 方法把结果返回给主线程，目的就是等待一段时间。而在这段时间内，主线程不应该被阻塞，用户可以通过拖拽浏览器，变大缩小浏览器窗口等操作测试这一现象。这个非阻塞主线程的结果就是 Web Workers 想达到的目的。

清单 2. compute.js 中调用 postMessage 方法返回计算结果
  1.  var i=0; 
  2.  
  3.  function timedCount(){
  4. 	 for(var j=0,sum=0;j<100;j++){
  5. 		 for(var i=0;i<100000000;i++){
  6. 			 sum+=i;
  7. 		 }
  8. 	 }
  9. 	 // 调用 postMessage 向主线程发送消息
  10. 	 postMessage(sum);
  11.  } 
  12.  
  13.  postMessage("Before computing,"+new Date());
  14.  timedCount();
  15.  postMessage("After computing,"+new Date());
图 1. 浏览器中运行结果

Web Workers的更多相关文章

  1. html5 Web Workers

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

  2. 3D拓扑自动布局之Web Workers篇

    2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了,随着OpenGL特别是WebGL技术的普及,3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家,似乎和最近高档会所被整改为普通茶馆是一样的 ...

  3. 【HTML5】Web Workers

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...

  4. HTML5学习(十)---Web Workers

    参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...

  5. HTML5 Web Workers来加速您的移动Web应用

    一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...

  6. JavaScript 学习笔记 - Web Workers

    前言 本文仅是 Web Workers 的入门科普文章,不涉及太琐碎的知识点. 我们知道,在 Web Workers 出来之前,JavaScript 是单线程的.即使是 setTimeout 之类的看 ...

  7. (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event

    浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核            Trident内核,也是俗称的IE内核Chrome 浏览器内核            统称为 Chromium 内核或 ...

  8. 通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。

    Web Workers API - Web API 接口参考 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API ...

  9. JavaScript是如何工作的：Web Workers的构建块 + 5个使用他们的场景

    摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...

随机推荐

  1. sql中修改多表关联的字段

    表1:USERID USERNAME USERREMARK 表2:ROLEID USERID ROLENAME 其中表1的USERID与表2的USERID为关联字段. 若现在只知道ROLEID,要修改 ...

  2. 谈谈Activiti中流程对象之间的关系

    详细见:http://www.kafeitu.me/activiti/2012/03/22/workflow-activiti-action.html (咖啡兔好牛!) 详细见: http://blo ...

  3. 关于yii2框架活动记录activeRecord添加默认字段的问题

    平时使用sql的时候可以如下添加默认字段flag: "select a.*,0 as flag from user_info a", 对于yii2框架则需要这样: $query = ...

  4. 使用SVN同步资源后图标样式的详细解读

    项目视图   The Package Explorer view - 已忽略版本控制的文件.可以通过Window → Preferences → Team → Ignored Resources.来忽 ...

  5. strstr函数的用法

    C语言函数 编辑 包含文件:string.h 函数名: strstr 函数原型:      extern char *strstr(char *str1, const char *str2); 语法: ...

  6. html5调取手机摄像头或相册

    html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不 ...

  7. iOS.DistributionApp.1-mobile-provision-file[draft]

    .mobileprovision file 0. .mobileprovision file的作用 .mobileprovision file作用以及扮演的角色 1. 如何删除旧的.mobilepro ...

  8. shell 环境初始化顺序

    登陆shell 的执行顺序 /etc/profile /etc/profile.d/file /etc/bashrc .bashrc .bash_profile 非登录shell 的执行顺序, 例如: ...

  9. U盘启动盘 安装双系统 详细教程

    U盘启动盘 安装win7+linux双系统 最近在看鸟哥的linux 私房菜 ,看到多重系统那部分,自然的安装多重系统的激情由此而燃.在网上看了很多资料,感觉都不全.经过艰辛的摸索,终于被我发现了一个 ...

  10. 优化openfire服务器,达到单机20万,集群50万

    openfire压测概述 个月左右的测试,总算得到预定目标(3台服务器,并发50w用户在线) 测试环境搭建 压测客户端无他-tsung,尝试了windows安装perl失败后,使用centOS6.5作 ...