JavaScript and Threads

Question

Is there some way to do multi-threading in JavaScript

User · Accepted Answer

See http   caniuse com  search worker for the most up-to-date support info  The following was the state of support circa 2009   The words you want to google for are JavaScript Worker Threads Apart from from Gears there s nothing available right now  but there s plenty of talk about how to implement this so I guess watch this question as the answer will no doubt change in future  Here s the relevant documentation for Gears  WorkerPool API WHATWG has a Draft Recommendation for worker threads  Web Workers And there s also Mozilla   s DOM Worker Threads  Update  June 2009  current state of browser support for JavaScript threads Firefox 3 5 has web workers  Some demos of web workers  if you want to see them in action   Simulated Annealing   quot Try it quot  link  Space Invaders  link at end of post  MoonBat JavaScript Benchmark  first link   The Gears plugin can also be installed in Firefox  Safari 4  and the WebKit nightlies have worker threads   JavaScript Ray Tracer  Chrome has Gears baked in  so it can do threads  although it requires a confirmation prompt from the user  and it uses a different API to web workers  although it will work in any browser with the Gears plugin installed    Google Gears WorkerPool Demo  not a good example as it runs too fast to test in Chrome and Firefox  although IE runs it slow enough to see it blocking interaction   IE8 and IE9 can only do threads with the Gears plugin installed

User · Answer

There s no true threading in JavaScript  JavaScript being the malleable language that it is  does allow you to emulate some of it  Here is an example I came across the other day

User · Answer

Another possible method is using an javascript interpreter in the javascript environment    By creating multiple interpreters and controlling their execution from the main thread  you can simulate multi-threading with each thread running in its own environment   The approach is somewhat similar to web workers  but you give the interpreter access to the browser global environment   I made a small project to demonstrate this   A more detailed explanation in this blog post

User · Answer

If you can t or don t want to use any AJAX stuff  use an iframe or ten     You can have processes running in iframes in parallel with the master page without worrying about cross browser comparable issues or syntax issues with dot net AJAX etc  and you can call the master page s JavaScript  including the JavaScript that it has imported  from an iframe    E g  in a parent iframe  to call egFunction   in the parent document once the iframe content has loaded  that s the asynchronous part   parent egFunction      Dynamically generate the iframes too so the main html code is free from them if you want

User · Answer

Here is just a way to simulate multi-threading in Javascript  Now I am going to create 3 threads which will calculate numbers addition  numbers can be divided with 13 and numbers can be divided with 3 till 10000000000  And these 3 functions are not able to run in same time as what Concurrency means  But I will show you a trick that will make these functions run recursively in the same time   jsFiddle  This code belongs to me   Body Part       lt div class  div1  gt       lt input type  button  value  start stop  onclick   thread1 control    thread1 stop      thread1 start       gt  lt span gt Counting summation of numbers till 10000000000 lt  span gt     lt span id  1  gt 0 lt  span gt   lt  div gt   lt div class  div2  gt       lt input type  button  value  start stop  onclick   thread2 control    thread2 stop      thread2 start       gt  lt span gt Counting numbers can be divided with 13 till 10000000000 lt  span gt     lt span id  2  gt 0 lt  span gt   lt  div gt   lt div class  div3  gt       lt input type  button  value  start stop  onclick   thread3 control    thread3 stop      thread3 start       gt  lt span gt Counting numbers can be divided with 3 till 10000000000 lt  span gt     lt span id  3  gt 0 lt  span gt   lt  div gt    Javascript Part  var  thread1      This is my thread as object     control  false   this is my control that will be used for start stop     value  0    stores my result     current  0    stores current number     func  function          this is my func that will run         if  this control            checking for control to run             if  this current  lt  10000000000                    this value    this current                     document getElementById  1   innerHTML   this value                  this current                                    setTimeout function          And here is the trick  setTimeout is a king that will help us simulate threading in javascript              thread1 func         You cannot use this func   just try to call with your object name            0              start  function              this control   true      start function            stop  function              this control   false       stop function            init  function              setTimeout function                   thread1 func          the first call of our thread            0           var  thread2         control  false      value  0      current  0      func  function              if  this control                if  this current   13    0                    this value                              this current                document getElementById  2   innerHTML   this value                    setTimeout function                   thread2 func               0              start  function              this control   true             stop  function              this control   false             init  function              setTimeout function                   thread2 func               0           var  thread3         control  false      value  0      current  0      func  function              if  this control                if  this current   3    0                    this value                              this current                document getElementById  3   innerHTML   this value                    setTimeout function                   thread3 func               0              start  function              this control   true             stop  function              this control   false             init  function              setTimeout function                   thread3 func               0             thread1 init     thread2 init     thread3 init      I hope this way will be helpful

User · Answer

Javascript doesn t have threads  but we do have workers   Workers may be a good choice if you don t need shared objects   Most browser implementations will actually spread workers across all cores allowing you to utilize all cores  You can see a demo of this here   I have developed a library called task js that makes this very easy to do      task js Simplified interface for getting CPU intensive code to run on all cores  node js  and web    A example would be  function blocking  exampleArgument           block thread       turn blocking pure function into a worker task const blockingAsync   task wrap blocking       run task on a autoscaling worker pool blockingAsync  exampleArgumentValue   then result   gt           do something with result

User · Answer

With HTML5 specification you do not need to write too much JS for the same or find some hacks   One of the feature introduced in HTML5 is Web Workers which is JavaScript running in the background independently of other scripts  without affecting the performance of the page    It is supported in almost all browsers     Chrome  -  4 0    IE      -  10 0   Mozilla -  3 5   Safari  -  4 0   Opera   -  11 5

User · Answer

With the HTML5  side-specs  no need to hack javascript anymore with  setTimeout    setInterval    etc   HTML5  amp  Friends introduces the javascript Web Workers specification  It is an API for running scripts asynchronously and independently   Links to the specification and a tutorial

User · Answer

You could use Narrative JavaScript  a compiler that will transforms your code into a state machine  effectively allowing you to emulate threading  It does so by adding a  yielding  operator  notated as  -    to the language that allows you to write asynchronous code in a single  linear code block

User · Answer

Different way to do multi-threading and Asynchronous in JavaScript  Before HTML5 JavaScript only allowed the execution of one thread per page     There was some hacky way to simulate an asynchronous execution with Yield  setTimeout    setInterval    XMLHttpRequest or event handlers  see the end of this post for an example with yield and setTimeout      But with HTML5 we can now use Worker Threads to parallelize the execution of functions  Here is an example of use     Real multi-threading  Multi-threading  JavaScript Worker Threads  HTML5 introduced Web Worker Threads  see  browsers compatibilities  Note  IE9 and earlier versions do not support it   These worker threads are JavaScript threads that run in background without affecting the performance of the page  For more information about Web Worker read the documentation or this tutorial   Here is a simple example with 3 Web Worker threads that count to MAX VALUE and show the current computed value in our page    x000D   x000D    As a worker normally take another JavaScript file to execute we convert the function in an URL  http   stackoverflow com a 16799132 2576706 x000D  function getScriptPath foo   return window URL createObjectURL new Blob  foo toString   match    s function s    s    s       s S            s S     1    type  text javascript        x000D   x000D  var MAX VALUE   10000  x000D   x000D     x000D     Here are the workers x000D      x000D    Worker 1 x000D  var worker1   new Worker getScriptPath function    x000D      self addEventListener  message   function e    x000D          var value   0  x000D          while value  lt   e data   x000D              self postMessage value   x000D              value    x000D            x000D         false   x000D       x000D    We add a listener to the worker to get the response and show it in the page x000D  worker1 addEventListener  message   function e    x000D    document getElementById  result1   innerHTML   e data  x000D     false   x000D   x000D   x000D    Worker 2 x000D  var worker2   new Worker getScriptPath function    x000D      self addEventListener  message   function e    x000D          var value   0  x000D          while value  lt   e data   x000D              self postMessage value   x000D              value    x000D            x000D         false   x000D       x000D  worker2 addEventListener  message   function e    x000D    document getElementById  result2   innerHTML   e data  x000D     false   x000D   x000D   x000D    Worker 3 x000D  var worker3   new Worker getScriptPath function    x000D      self addEventListener  message   function e    x000D          var value   0  x000D          while value  lt   e data   x000D              self postMessage value   x000D              value    x000D            x000D         false   x000D       x000D  worker3 addEventListener  message   function e    x000D      document getElementById  result3   innerHTML   e data  x000D     false   x000D   x000D   x000D     Start and send data to our worker  x000D  worker1 postMessage MAX VALUE    x000D  worker2 postMessage MAX VALUE    x000D  worker3 postMessage MAX VALUE   x000D   lt div id  result1  gt  lt  div gt  x000D   lt div id  result2  gt  lt  div gt  x000D   lt div id  result3  gt  lt  div gt  x000D   x000D   x000D    We can see that the three threads are executed in concurrency and print their current value in the page  They don t freeze the page because they are executed in the background with separated threads     Multi-threading  with multiple iframes  Another way to achieve this is to use multiple iframes  each one will execute a thread  We can give the iframe some parameters by the URL and the iframe can communicate with his parent in order to get the result and print it back  the iframe must be in the same domain    This example doesn t work in all browsers  iframes usually run in the same thread process as the main page  but Firefox and Chromium seem to handle it differently    Since the code snippet does not support multiple HTML files  I will just provide the different codes here   index html     The 3 iframes containing the code  take the thread id in param   lt iframe id  threadFrame1  src  thread html id 1  gt  lt  iframe gt   lt iframe id  threadFrame2  src  thread html id 2  gt  lt  iframe gt   lt iframe id  threadFrame3  src  thread html id 3  gt  lt  iframe gt     Divs that shows the result  lt div id  result1  gt  lt  div gt   lt div id  result2  gt  lt  div gt   lt div id  result3  gt  lt  div gt     lt script gt        This function is called by each iframe     function threadResult threadId  result            document getElementById  result    threadId  innerHTML   result         lt  script gt    thread html     Get the parameters in the URL  http   stackoverflow com a 1099670 2576706 function getQueryParams paramName        var qs   document location search split      join           var params       tokens  re       amp               amp     g      while  tokens   re exec qs             params decodeURIComponent tokens 1      decodeURIComponent tokens 2              return params paramName        The thread code  get the id from the URL  we can pass other parameters as needed  var MAX VALUE   100000   function thread         var threadId   getQueryParams  id        for var i 0  i lt MAX VALUE  i             parent threadResult threadId  i                   Simulate multi-threading  Single-thread  emulate JavaScript concurrency with setTimeout    The  naive  way would be to execute the function setTimeout   one after the other like this   setTimeout function       Some tasks       0   setTimeout function       Some tasks       0           But this method does not work because each task will be executed one after the other     We can simulate asynchronous execution by calling the function recursively like this    x000D   x000D  var MAX VALUE   10000  x000D   x000D  function thread1 value  maxValue   x000D      var me   this  x000D      document getElementById  result1   innerHTML   value  x000D      value    x000D     x000D        Continue execution x000D      if value lt  maxValue  x000D          setTimeout function      me thread1 value  maxValue      0   x000D    x000D   x000D  function thread2 value  maxValue   x000D      var me   this  x000D      document getElementById  result2   innerHTML   value  x000D      value    x000D    x000D      if value lt  maxValue  x000D          setTimeout function      me thread2 value  maxValue      0   x000D    x000D   x000D  function thread3 value  maxValue   x000D      var me   this  x000D      document getElementById  result3   innerHTML   value  x000D      value    x000D    x000D      if value lt  maxValue  x000D          setTimeout function      me thread3 value  maxValue      0   x000D    x000D   x000D  thread1 0  MAX VALUE   x000D  thread2 0  MAX VALUE   x000D  thread3 0  MAX VALUE   x000D   lt div id  result1  gt  lt  div gt  x000D   lt div id  result2  gt  lt  div gt  x000D   lt div id  result3  gt  lt  div gt  x000D   x000D   x000D    As you can see this second method is very slow and freezes the browser because it uses the main thread to execute the functions     Single-thread  emulate JavaScript concurrency with yield  Yield is a new feature in ECMAScript 6  it only works on the oldest version of Firefox and Chrome  in Chrome you need to enable Experimental JavaScript appearing in chrome   flags  enable-javascript-harmony       The yield keyword causes generator function execution to pause and the value of the expression following the yield keyword is returned to the generator s caller  It can be thought of as a generator-based version of the return keyword    A generator allows you to suspend execution of a function and resume it later  A generator can be used to schedule your functions with a technique called trampolining   Here is the example    x000D   x000D  var MAX VALUE   10000  x000D   x000D  Scheduler     x000D    tasks      x000D   add  function func   x000D    this  tasks push func   x000D       x000D   start  function    x000D    var tasks   this  tasks  x000D    var length   tasks length  x000D    while length gt 0   x000D     for var i 0  i lt length  i     x000D      var res   tasks i  next    x000D      if res done   x000D       tasks splice i  1   x000D       length--  x000D       i--  x000D        x000D       x000D      x000D      x000D    x000D   x000D   x000D  function  updateUI threadID  maxValue    x000D    var value   0  x000D    while value lt  maxValue   x000D   yield document getElementById  result    threadID  innerHTML   value  x000D   value    x000D      x000D    x000D   x000D  Scheduler add updateUI 1  MAX VALUE    x000D  Scheduler add updateUI 2  MAX VALUE    x000D  Scheduler add updateUI 3  MAX VALUE    x000D   x000D  Scheduler start   x000D   lt div id  result1  gt  lt  div gt  x000D   lt div id  result2  gt  lt  div gt  x000D   lt div id  result3  gt  lt  div gt  x000D   x000D   x000D

User · Answer

The new v8 engine which should come out today supports it  i think

User · Answer

In raw Javascript  the best that you can do is using the few asynchronous calls  xmlhttprequest   but that s not really threading and very limited   Google Gears adds a number of APIs to the browser  some of which can be used for threading support

User · Answer

There is no true multi-threading in Javascript  but you can get asynchronous behavior using setTimeout   and asynchronous AJAX requests   What exactly are you trying to accomplish

[javascript] JavaScript and Threads

Examples related to javascript

Examples related to multithreading