locked
multithread in Javascript

    Question

  • We use JavaScript/html5 for our metro app development. However, while processing the image, we find it takes so long time to finish. We did some research and see Java script doesn't support multi-thread. What is the recommendation for improving the performance in this case? Thanks.

    Great Wall

    Thursday, November 15, 2012 10:14 PM

Answers

  • You can pass various collection types between JavaScript and a WinRT component. Straight arrays require a direction (in or out), and aren't supported for in/out at the same time, so that might not work for you. But a WinRT type like a vector (IList<Byte>in C# and concurrent_vector in C++) provide for in/out. Again, my book chapter goes into these details (in the section "Arrays, Vectors, and Other Alternatives"). There aren't, however, mechanisms for directly sharing the same piece of global data/memory, however.

    • Marked as answer by Song Tian Wednesday, November 21, 2012 9:27 AM
    Monday, November 19, 2012 5:45 PM

All replies

  • JavaScript does support web workers that run on separate threads; the only limitation there is that communication is based on postMessage rather than passing parameters around.

    Fortunately, you can also write your own WinRT component with async methods for this purpose, which sounds like more work than it really is. I cover this in Chapter 16 of my book (see link under my name below), where I specifically show how to write components in C# and C++ for the purpose of image manipulation, and point out some caveats and alternate implementations along the way (e.g. how to pass image data, or basing the operations on passing a StorageFile instead). I also show how to implement similar routines as web workers in JS, where the perf is actually pretty good.

    Something I discovered in writing that chapter too, is that if you're also working with an HTML canvas, its putImageData method is really the slowest part of the equation, rather than the image manipulation. (Also, storing the data object from the canvas' createImageData method in another variable, e.g. making a temp variable for imageData.data instead of dereferencing it every time, made a huge difference...something I pointed out in Chapter 10 when I first introduce the pixel manipulation routine.)

    Anyway, I think that chapter will very much address your need.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    • Proposed as answer by Amac01 Friday, November 16, 2012 1:44 PM
    Thursday, November 15, 2012 10:28 PM
  • Thanks. But ether web worker or WinRT component doens't really improve much. The reason is I have to get the image data, which has been splitted into couple of pieces, back to the main thread after the child threads processed all of those pieces. While I merge those data, I have to copy them one pixel by one pixel. That is very time consuming.

    Is there a way that I can use gloabal data that both child thread and mail thread can share to avoid copying image data? Or if I can pass something like pointer to child thread and the child thread change the data in main thread directly other than locally, that also works.

     

    Great Wall


    • Edited by GXLPower Sunday, November 18, 2012 1:02 AM
    Saturday, November 17, 2012 8:23 PM
  • You can pass various collection types between JavaScript and a WinRT component. Straight arrays require a direction (in or out), and aren't supported for in/out at the same time, so that might not work for you. But a WinRT type like a vector (IList<Byte>in C# and concurrent_vector in C++) provide for in/out. Again, my book chapter goes into these details (in the section "Arrays, Vectors, and Other Alternatives"). There aren't, however, mechanisms for directly sharing the same piece of global data/memory, however.

    • Marked as answer by Song Tian Wednesday, November 21, 2012 9:27 AM
    Monday, November 19, 2012 5:45 PM