在 Web Workers 中使用 postMessage 和 onmessage

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

清单 1. 主线程中创建 Worker 实例，并监听 onmessage 事件
 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 <title>Test Web worker</title>

 <script type="text/JavaScript">

	 function init(){

		 var worker = new Worker('compute.js');

		 //event 参数中有 data 属性，就是子线程中返回的结果数据

		 worker.onmessage= function (event) {

			 // 把子线程返回的结果添加到 div 上

			 document.getElementById("result").innerHTML +=

			    event.data+"<br/>";

		 };

	 }

 </script>

 </head>

 <body onload="init()">

 <div id="result"></div>

 </body>

 </html>

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

清单 2. compute.js 中调用 postMessage 方法返回计算结果
 var i=0; 

 function timedCount(){

	 for(var j=0,sum=0;j<100;j++){

		 for(var i=0;i<100000000;i++){

			 sum+=i;

		 }

	 }

	 // 调用 postMessage 向主线程发送消息

	 postMessage(sum);

 } 

 postMessage("Before computing,"+new Date());

 timedCount();

 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. linux中用户、组的管理（密码管理、权限管理及其修改用户、组）(转)

    process(进程) 1 计算资源 权限 用户(获取资源或服务的凭证或标识) 用户,容器,关联权限:用户组(标识符),方便地指派权限 2 用户.组.权限   安全上下文(secure context ...

  2. asp.net 将word文档进行编辑并导出一个新的word

    最近做项目,需要多word文档进行编辑并导出一个新的word,在最初的word编辑中留下特定的字符串用来替换,然后在本地生成一个新的word文档,并且不修改服务器中的word文档,这样才能保证服务器中 ...

  3. 利用Jurassic在.net下运行js函数

    static void Main(string[] args) { var eng = new Jurassic.ScriptEngine(); eng.Evaluate("function ...

  4. package、import和import static

    package 语句: 该语句必须作为源文件的第一条非注释性语句,一个源文件只能指定一个包,即只能包含一条package语句. import 和import static 关键字: 引入import关 ...

  5. 关于swap

    一个小小的swap确出现了好多个版本.不断的优化,不断的发现问题: 版本一: function swap(a,b){ var temp = a; a = b; b = temp; } 这个版本对于数组 ...

  6. Asp.Net MVC4入门指南（9）：查询详细信息和删除记录

    在本教程中,您将查看自动生成的Details和Delete方法. 查询详细信息和删除记录 打开Movie控制器并查看Details方法. public ActionResult Details(int ...

  7. 详解C语言的类型转换

    1.自动类型转换 字符型变量的值实质上是一个8位的整数值,因此取值范围一般是-128-127,char型变量也可以加修饰符unsigned,则unsigned char 型变量的取值范围是0-255( ...

  8. PIL show() 报错

    将 PIL 安装目录下的 ImageShow.py 文件的第 99 行:(我的 Python 安装在 D:\Program Files\python 2.6,那  ImageShow.py  文件在: ...

  9. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

  10. LeetCode（124） Binary Tree Maximum Path Sum

    题目 Given a binary tree, find the maximum path sum. For this problem, a path is defined as any sequen ...