web worker 是执行在后台的 JavaScript，独立于其它脚本。不会影响页面的性能。这是HTML5的一个标准；实现上讲。浏览器为wokrer启动了新的线程，从而实现了异步操作的功能;

以下是woker的一个简单样例。在html页面中。以worker.js为源文件。创建了名为“worker”的Worker对象。通过worker.postMessage()接口向worker线程发送消息； worker线程将JSON格式化传递的两个数据相加后。再通过postMessage()接口将消息发送回页面js执行的主线程。 主线程再在onMessage()函数中处理woker线程发来的消息；

main.html

<html>

  <head>

  <script type="text/javascript">

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

    var obj = {"first":1, "second":2};

    worker.postMessage(obj);

    worker.onmessage = function (event) {

      alert(event.data);

    }

    function postMsg(){

      if (worker)

        worker.postMessaage(obj);

    }

  </script>

  </head>

  <body>

     <button onclick="postMsg()">post</button>

  </body>

</html>

worker.js

 onmessage = function (event)

 {

    var data = event.data;

   var first=data.first;

   var second=data.second;

   handleTask(first,second);

 }; 

 function  handleTask(a, b)

  {

    var out = a + b;

    postMessage("Worker Done! out = " + out);

  }

WebKit载入并运行js的流程简单分成下面几步：

1. 运行到"var worker = new Worker('worker.js')“时。在内核中构造WebCore::JSWorker对象（JSBbindings层）以及相应的WebCore::Worker对象（WebCore模块);

2.  构造JSWorker对象的过程中，依据初始化的url地址"worker.js"发起异步载入的流程；

3.  运行worker.postMessage()。向worker线程发送JSON格式化的消息数据； 由于这个时候。worker线程还没有创建，所以消息数据放在一个暂时消息队列中；

4. worker.js异步载入完毕后，创建并启动worker线程。并将暂时消息队列中的消息数据copy到woker相应的WorkerRunLoop的消息队列中；

5. worker线程创建完毕后。開始处理WorkerRunLoop的消息队列中所保存的消息；

6. woker线程发送消息到主线程。

7. 主线程收到worker线程发送的消息，运行onMessage();

在经过一轮消息来回后，我们假设通过样例中button按钮来异步触发消息发送。那么步骤3的运行会有差别； 这个时候由于worker线程已经创建。所以消息会直接加入到WorkerRunLoop的消息队列中；

为了搞清楚整个实现机制，我们先来看一下WebKit内部worker相关的类。　当中Worker相应主页面JS中的'worker'对象（主线程中），而DedicatedWorkerThread表示worker线程； WorkerMessagingProxy关联了Worker对象与worker线程，从而实现主线程与worker线程之间的消息中转； DedicatedWorkerThread通过WorkerScriptController控制worker.js文件里的脚本在worker线程中的运行；浏览器会为worker线程创建一个独立的虚拟机环境(VM);

以下来看一下具体流程：

1. worker.js的异步载入步骤例如以下图，载入是在创建WebCore::JSWorker和WebCore::Worker对象的时候发起的。而且是异步载入的流程，不会堵塞兴许JS的运行，这也是为什么首次调用worker.postMessage()的时候。会出现worker线程还没有创建的情况；

2. worker线程的创建例如以下图所看到的。

能够看出。当worker.js载入完毕后。WebKit会通过中转对象WorkerMessagingProxy创建DedicatedWorkerThread对象，并启动WorkerThread; WorkerMessagingProxy保持DedicatedWorkerThread对象的指针；

3.  主线程向worker线程发送消息的流程例如以下。当js运行到"worker.postMessage()“时，终于会通过JS主线程虚拟机映射到JSWorker::postMessage()函数，并通过中转对象WorkerMessagingProxy将消息加入到worker的消息队列。 假设worker线程在发送消息的时候，还没有创建。我们看到有个m_queueEarlyTasks对象会暂时保存当前消息，并在worker线程创建后再转移到正式的消息队列中； 否则。直接将消息加入到WorkerRunLoop管理的正式消息队列中；

4. worker线程中处理消息的流程例如以下。这就是worker.js中開始运行”onmessage()”的流程； 我们能够看到DedicatedWorkThread对象在自己的线程环境下的runLoop取出消息队列中的数据运行。而运行是通过EventTarget::dispatchEvent()分发并fire一个"message"类型的事件来实现的；

. 

5. 下图是在worker线程中发送消息的流程，也是通过WorkerMessagingProxy来进行中传。最后会触发Document::postTask()函数，该函数实际上将Document::didReceiveTask()函数抛到主线程上去运行。

6. 下图是main线程上处理消息的流程， Document::didReceiveTask()在主线程上開始运行。终于也是通过dispatch并fire一个"message"类型的事件实现消息的处理。

。 

所以总得来讲。woker的机制是通过中转对象实现消息的传递，再通过"message"事件完毕消息的处理；

(转载请注明出处：http://blog.csdn.net/codigger）

Web Worker在WebKit中的实现机制的更多相关文章

  1. Web worker 与JS中异步编程的对比

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何 ...

  2. 【转向Javascript系列】深入理解Web Worker

    本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/11/deep-in-web-worker/ 上一篇文章<从setTimeout说事件循 ...

  3. 关于Web Worker你必须知道的7件事

    介绍 通过使用Web Worker, 我们可以在浏览器后台运行Javascript, 而不占用浏览器自身线程.Web Worker可以提高应用的总体性能,并且提升用户体验.如果你想在自己的Web应用中 ...

  4. html5之web worker

    Web Worker   在本文中 与 Web Worker 进行双向通信 WindowTimers 在 IE10 Platform Preview 4 中对 Web Worker 的更新 API 参 ...

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

    Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把 ...

  6. H5中的web worker示例demo分析

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

  7. vue中使用web worker

    众所周知,JavaScript是单线程的,一些复杂比较耗时的操作,会阻塞页面的渲染交互,引起页面卡顿,影响用户体验.web worker是html5的新特性之一,主要就是用来解决此类问题,为页面额外开 ...

  8. HTML5中的Web Worker技术

    为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...

  9. HTML5中的Web Worker

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

随机推荐

  1. Android RingtoneManager铃声管理

    本篇介绍一下跳转到系统铃声选择界面,android中的铃声通过RingtoneManager管理,RingtoneManager管理来电铃声(TYPE_RINGTONE).提示音(TYPE_NOTIF ...

  2. ADO异步查询显示进度条

    一般,ADO都是以同步的方式来处理数据.这就是说,当ADO开始处理数据后,应用程序必须等到ADO处理完毕之后才可以继续执行.但是除了同步执行方式之外,ADO也提供了异步执行的方式,允许当ADO处理时, ...

  3. Cocos2d-x 创建（create）动画对象CCAnimation报错分析

    本人在使用精灵表单创建动画的过程中突然遇到了一些个问题,下面进行一下分析总结. 根据在Cocos2d-iphone中的经验,我写出了如下的代码: CCSpriteFrameCache::sharedS ...

  4. XML序列化反序列化—常用类

    public class XMLSerializer    {        #region (public) xml序列化        /// <summary>        /// ...

  5. discuz清空session,导致session保存机制失败,session无法更新与解决

    <?php function userErrorHandler() { $e = func_get_args(); echo '<pre style="color:red;&qu ...

  6. Android本地视频播放器开发--简易播放器原型

    在以前的基础上,将音视频进行合并,音频播放采用OpenSL ES,视频播放采用OpenGL ES2.0进行显示,这次的版本其中音频和视频是在同一个线程,会造成音频断断续续,后续会采用音频使用SDL,视 ...

  7. AMFPHP1.4与PHP5.3及以上版本号不兼容问题的解决

    近期在升级PHP5.4版本号,AMFPHP出现了兼容性问题.解决过程记录例如以下. 1.ereg类相关函数改动为preg相关函数. 2.通过错误日志输出的提示.将全部以静态方式调用的类函数加入stat ...

  8. [C++]函数指针与指针函数

    函数指针与指针函数,之前总是分不清,今天就好好把它两认认清楚. 先从概念说起,简单是理解. 函数指针:是指针.一个指向某一个函数入口地址的指针. 指针函数:是函数.一个返回值是指针的函数. 记忆: 从 ...

  9. Shell简易学习练习

    1.Linux Shell入门 Quiz 1 一个接受命令行参数的shell脚本 任务 编写一个shell脚本1.sh,这个脚本接受一个命令行参数,并把这个参数打印两次到标准输出. 如果输入没有参数输 ...

  10. OpenCV-Python教程（5、初级滤波内容）

    本篇文章介绍如何用OpenCV-Python来实现初级滤波功能. 提示: 转载请详细注明原作者及出处,谢谢! 本文介绍使用OpenCV-Python实现基本的滤波处理 本文不介绍滤波处理的详细概念,所 ...