Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What the Web Worker

What the Web Worker

隨著Web Application的發展,前端開發越來越複雜,多執行緒的需求也慢慢浮現,本議題主要介紹何謂Web Worker,到底能做到什麼,不能做到什麼,以及實際案例的分享。

Bingo Yang

May 18, 2013
Tweet

More Decks by Bingo Yang

Other Decks in Programming

Transcript

  1. Bingo
    2013/05/19
    1
    Web Worker
    What the
    Sunday, May 19, 13

    View full-size slide

  2. About Me
    • front-end Engineer at
    • http:/
    /blog.blackbing.net
    [email protected]
    • https:/
    /www.facebook.com/blackbing
    2
    Sunday, May 19, 13

    View full-size slide

  3. Hello Web Worker
    3
    Sunday, May 19, 13

    View full-size slide

  4. In the beginning
    4
    if (heard?)
    if (heard? && used?)
    if (heard? && used? && frustrated?)
    if (heard? && used? && used_in_project?)
    Sunday, May 19, 13

    View full-size slide

  5. Web Worker
    A web worker, as defined by the World Wide Web Consortium
    (W3C) and the Web Hypertext Application Technology Working
    Group (WHATWG), is a JavaScript script executed from an HTML
    page that runs in the background, independently of other, user-
    interface scripts that may also have been executed from the same
    HTML page. Web workers are able to utilize multi-core CPUs more
    effectively.
    http://en.wikipedia.org/wiki/Web_worker
    5
    Sunday, May 19, 13

    View full-size slide

  6. Web Worker
    6
    http://en.wikipedia.org/wiki/Web_worker
    A web worker, as defined by the World Wide Web Consortium
    (W3C) and the Web Hypertext Application Technology Working
    Group (WHATWG), is a JavaScript script executed from an HTML
    page that runs in the background, independently of other, user-
    interface scripts that may also have been executed from the same
    HTML page. Web workers are able to utilize multi-core CPUs more
    effectively.
    Sunday, May 19, 13

    View full-size slide

  7. 7
    Sunday, May 19, 13

    View full-size slide

  8. UI Blocking?
    • javascript is single-threaded
    • UI rendering
    • executing javascript
    8
    http://www.nczonline.net/blog/2010/08/10/what-is-a-non-blocking-script/
    Sunday, May 19, 13

    View full-size slide

  9. Boss said...
    9
    1+2+3+...+n
    Sunday, May 19, 13

    View full-size slide

  10. That’s easy!
    function getsum(max) {
    var cnt = 0;
    var sum = 0;
    while (cnt <= max) {
    sum += cnt++;
    }
    return sum;
    }
    10
    Sunday, May 19, 13

    View full-size slide

  11. 11
    getsum(1,000)
    getsum(100,000)
    getsum(1,000,000,000)
    ഋ۩
    Sunday, May 19, 13

    View full-size slide

  12. DEMO
    12
    http://blackbing.github.com/WorkerD/why.html
    Sunday, May 19, 13

    View full-size slide

  13. 13
    Sunday, May 19, 13

    View full-size slide

  14. 14
    Sunday, May 19, 13

    View full-size slide

  15. 1+2+..+n =
    15
    Sunday, May 19, 13

    View full-size slide

  16. 16
    Sunday, May 19, 13

    View full-size slide

  17. Don’t jump into Web Worker
    for using Web Worker.
    17
    If you just think it’s cool
    ,you’ll be frustrated.
    Sunday, May 19, 13

    View full-size slide

  18. 18
    Sunday, May 19, 13

    View full-size slide

  19. Expectation
    19
    It should be faster.
    It should be easy to use.
    It should avoid blocking UI.
    Sunday, May 19, 13

    View full-size slide

  20. CAN I USE it on Desktop?
    20
    http://caniuse.com/#search=worker
    100%
    Sunday, May 19, 13

    View full-size slide

  21. CAN I USE it on Mobile?
    21
    http://caniuse.com/#search=worker
    Sunday, May 19, 13

    View full-size slide

  22. CAN I USE it on Mobile?
    22
    http://caniuse.com/#search=worker
    100%(!?)
    Sunday, May 19, 13

    View full-size slide

  23. 23
    Sunday, May 19, 13

    View full-size slide

  24. new Worker
    var worker = new Worker('worker.js');
    worker.postMessage(something);
    worker.onmessage = function(e) {
    console.log('Worker said: ', e.data);
    });
    24
    self.onmessage = function(e) {
    self.postMessage(e.data);
    };
    Master
    Worker
    Sunday, May 19, 13

    View full-size slide

  25. var worker = new Worker('worker.js');
    worker.postMessage(something);
    worker.addEventListener('message', function(e) {
    console.log('Worker said: ', e.data);
    }, false);
    25
    self.addEventListener('message', function(e) {
    self.postMessage(e.data);
    }, false);
    Master
    Worker
    new Worker
    Sunday, May 19, 13

    View full-size slide

  26. Worker cannot access
    • window
    • DOM
    • document
    • parent
    is undefined
    is undefined
    is undefined
    is undefined
    26
    Sunday, May 19, 13

    View full-size slide

  27. Pass window object?
    worker.postMessage(window);
    27
    Master
    Sunday, May 19, 13

    View full-size slide

  28. postMessage
    28
    worker.postMessage({
    'number': 1234,
    'reg': /[\d]+/ig,
    'boolean': true,
    'object': {
    'foo':'bar'
    },
    'array': ['foo','bar']
    })
    Master
    Sunday, May 19, 13

    View full-size slide

  29. postMessage
    29
    worker.postMessage({
    'number': 1234,
    'reg': /[\d]+/ig,
    'boolean': true,
    'object': {
    'foo':'bar'
    },
    'array': ['foo','bar'],
    'func': function(){
    //this is a function
    }
    })
    Master
    Sunday, May 19, 13

    View full-size slide

  30. 30
    http://ajaxian.com/archives/an-implausibly-illustrated-introduction-to-html5-web-workers
    Sunday, May 19, 13

    View full-size slide

  31. Worker can use
    • navigator
    • location(read-only)
    • XMLHttpRequest
    • setTimeout/setInterval
    • Basic Javascript data Structure and
    Function(Math, Date, Array, etc.)
    31
    Functions available to workers : https://developer.mozilla.org/en-US/docs/DOM/Worker/Functions_available_to_workers
    Sunday, May 19, 13

    View full-size slide

  32. 32
    Web Workers in IE10: Background JavaScript Makes Web Apps Faster
    Sunday, May 19, 13

    View full-size slide

  33. Debug
    33
    worker.addEventListener('error', function(error){
    console.error(error.message);
    console.error(error.filename);
    console.error(error.lineno);
    });
    Master
    Sunday, May 19, 13

    View full-size slide

  34. Import Scripts
    34
    importScripts("http://underscorejs.org/underscore.js")
    no jQuery, Backbone, etc.
    Worker
    Sunday, May 19, 13

    View full-size slide

  35. Release Worker
    35
    worker.terminate()
    self.close()
    Master
    Worker
    Sunday, May 19, 13

    View full-size slide

  36. Cost
    36
    Sunday, May 19, 13

    View full-size slide

  37. Use Case
    Prefetching and/or caching data for later use
    • Code syntax highlighting or other real-time text formatting
    • Spell checker
    • Analyzing video or audio data
    • Background I/O or polling of web services
    • Processing large arrays or humungous JSON responses
    • Image filtering in
    • Updating many rows of a local web database
    37
    Sunday, May 19, 13

    View full-size slide

  38. front-end is more and more
    • upload image: resize/rotate/filtering
    • upload/download file format: use a
    format for the server, translating
    other format in client side.
    38
    powerful
    Sunday, May 19, 13

    View full-size slide

  39. Client-Server
    39
    Client
    Server Server Server Server
    Sunday, May 19, 13

    View full-size slide

  40. Client-Server
    40
    Master HTML
    Worker Worker Worker Worker
    Sunday, May 19, 13

    View full-size slide

  41. Background tasks run while user
    interacting
    • auto save the draft of article
    • syntax highlighting
    • log user’s behavior(mouse tracking,
    clicking, etc...)
    • prefetching data
    • predicting user behavior
    • Generate complicated html template
    41
    Sunday, May 19, 13

    View full-size slide

  42. Mobile
    • Limited capability on mobile
    • Multicore CPU
    42
    Sunday, May 19, 13

    View full-size slide

  43. Real world usage
    • Syntax highlighting : ace code editor(Bespin)
    • Crypto : SHA1 Checksum Calculator
    • Graphics/image
    • snowCam
    • arborjs: http:/
    /arborjs.org/
    • A User-Driven Web OS: http:/
    /grimwire.github.io/grimwire
    • parallel.js: http:/
    /adambom.github.io/parallel.js/
    • Post huge data to server
    43
    Sunday, May 19, 13

    View full-size slide

  44. Wanna Try?
    • http:/
    /webworkersandbox.com/
    44
    Sunday, May 19, 13

    View full-size slide

  45. Brief Summary
    • What is web worker?
    • Basic usage
    • onMessage/postMessage
    • Debug
    • Use case and real world usage
    45
    Sunday, May 19, 13

    View full-size slide

  46. Known Issue
    • create worker in worker, but it is
    currently not support in Chrome
    • Crash when trying to use many
    Webworkers
    46
    Sunday, May 19, 13

    View full-size slide

  47. Problems
    • Break dependency
    • Hardly debug
    • Troublesome on postMessage
    47
    Sunday, May 19, 13

    View full-size slide

  48. Break dependency
    48
    worker = new Worker('/worker_path/my_worker.js');
    define (require)->
    require 'jquery'
    car = require 'lib/car'
    plane = require 'lib/plane'
    break requirejs dependency
    Master
    Sunday, May 19, 13

    View full-size slide

  49. inline Worker
    49
    var jscontent = require('text!workerScript/inline_worker.js');
    var blobWorker = new Blob([jscontent], {type:'application/javascript'});
    var blobWorker_url = URL.createObjectURL(blobWorker);
    URL.revokeObjectURL(blobWorker_url);
    inlineWorker.terminate();
    var inlineWorker = new Worker(blobWorker_url);
    require text plugin
    Master
    Release resource
    Sunday, May 19, 13

    View full-size slide

  50. Hardly debug
    50
    worker.addEventListener('error', function(error){
    console.error(error.message);
    console.error(error.filename);
    console.error(error.lineno);
    });
    no console !?
    Master
    Sunday, May 19, 13

    View full-size slide

  51. Troublesome on postMessage
    51
    var worker = new Worker('worker.js');
    worker.postMessage({'type': 'task1', data:'blabla'});
    worker.postMessage({'type': 'task2', data:'blabla'});
    worker.postMessage({'type': 'task3', data:'blabla'});
    ....
    self.addEventListener('message', function(e) {
    var data = e.data;
    var type = data.type;
    if(type === 'task1')
    //blablabla
    else if(type === 'task2')
    //blablabla
    //......etc
    }, false);
    Master
    Worker
    Sunday, May 19, 13

    View full-size slide

  52. Passing Massive Data
    52
    worker.postMessage({
    //it is a very very complicated JSON
    })
    Worker
    UI still block!
    Master
    Sunday, May 19, 13

    View full-size slide

  53. Solution
    • Split the data
    • Transferable Object
    53
    Sunday, May 19, 13

    View full-size slide

  54. Split data
    54
    Worker
    Sunday, May 19, 13

    View full-size slide

  55. Transferable Object
    55
    worker.postMessage({
    'number': 1234,
    'reg': /[\d]+/ig,
    'boolean': true,
    'object': {
    'foo':'bar'
    },
    'array': ['foo','bar'],
    'ref_object': object_from_closure,
    })
    worker.postMessage('this is a string');
    Worker
    structured cloning
    Freeeeze!!
    Master
    Sunday, May 19, 13

    View full-size slide

  56. pass Transferable Object
    56
    worker.postMessage(arrayBuffer, [arrayBuffer]);
    var SIZE = 1024 * 1024 * 32; // 32MB
    var arrayBuffer = new ArrayBuffer(SIZE);
    var uInt8View = new Uint8Array(arrayBuffer);
    var originalLength = uInt8View.length;
    for (var i = 0; i < originalLength; ++i) {
    uInt8View[i] = i;
    }
    worker.postMessage(uInt8View.buffer, [uInt8View.buffer]);
    Master
    Sunday, May 19, 13

    View full-size slide

  57. Feature Detection
    57
    var ab = new ArrayBuffer(1);
    worker.postMessage(ab, [ab]);
    //If the buffer is transferred and not copied,
    its .byteLength will go to 0:
    if (ab.byteLength) {
    alert('Transferables are not supported in your browser!');
    } else {
    // Transferables are supported.
    }
    http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast
    Master
    Sunday, May 19, 13

    View full-size slide

  58. Expectation?
    58
    It must be faster.
    It should be easy to use.
    It should avoid blocking UI.
    Cost of creating Worker
    Hardly to set up dependency
    if we need to pass massive data
    Sunday, May 19, 13

    View full-size slide

  59. WorkerD
    59
    https:/
    /github.com/blackbing/WorkerD
    bower install WorkerD
    Sunday, May 19, 13

    View full-size slide

  60. Why D?
    60
    Sunday, May 19, 13

    View full-size slide

  61. Benefits
    worker.send('count', {s:1, e:10})
    syntax sugar
    self.on('count', function(data){
    //data is {s:1, e:10}
    })
    Master
    Worker
    Sunday, May 19, 13

    View full-size slide

  62. 62
    console
    console.log/error/time/etc...
    require([
    "./car"
    "./wheel"
    ], (Car, Wheel) ->
    car = new Car('red')
    wheel = new Wheel('iron')
    )
    require
    Worker
    Worker
    Benefits
    Sunday, May 19, 13

    View full-size slide

  63. Example
    63
    jscontent = require('text!inline_worker.js')
    $('#sum_with_worker').on('click', ->
    loading()
    worker = new WorkerD(inlineWorker_js)
    worker.send('getSum', sumMax)
    worker.on('gotSum', (event, data)->
    log "gotSum: #{data}"
    loaded()
    )
    )
    @on "getSum", (max) ->
    sum = cnt = 0
    while(cnt<=max)
    sum += cnt++
    self.send('gotSum', sum)
    Master
    Worker
    Sunday, May 19, 13

    View full-size slide

  64. console
    64
    @on "getSum", (max) ->
    console.group 'getSum'
    console.time 'getSum'
    console.log 'getSum'
    console.log max
    sum = cnt = 0
    while(cnt<=max)
    sum += cnt++
    console.log sum
    self.send 'gotSum', sum
    console.log 'inlineWorker send message'
    console.timeEnd 'getSum'
    console.groupEnd 'getSum'
    Worker
    Sunday, May 19, 13

    View full-size slide

  65. Live Demo
    65
    http://blackbing.github.com/WorkerD/sandbox.html
    Sunday, May 19, 13

    View full-size slide

  66. Real World Example
    66
    Sunday, May 19, 13

    View full-size slide

  67. 67
    https://c9.io
    Sunday, May 19, 13

    View full-size slide

  68. 68
    http://antimatter15.github.io/js-typed-array-sha1/
    Sunday, May 19, 13

    View full-size slide

  69. 69
    http://arborjs.org/
    Sunday, May 19, 13

    View full-size slide

  70. 70
    https://start.htc.com
    Sunday, May 19, 13

    View full-size slide

  71. 71
    http://adambom.github.io/parallel.js/
    Sunday, May 19, 13

    View full-size slide

  72. 72
    લ୺ᏈೳఏঋํҊ
    Web Worker ਆث
    Web Worker࿝໦!?
    ၏!बሣྃ!
    Sunday, May 19, 13

    View full-size slide

  73. More Reading
    73
    http://www.html5rocks.com/en/tutorials/workers/basics/
    http://social.msdn.microsoft.com/Search/en-US?query=web%20worker&ac=5
    Sunday, May 19, 13

    View full-size slide

  74. Thank you
    74
    Sunday, May 19, 13

    View full-size slide

  75. We are hiring
    front-end Engineer
    75 https:/
    /www.facebook.com/blackbing
    Sunday, May 19, 13

    View full-size slide