1 / 21

WEB WORKERS

WEB WORKERS. Amitesh Madhur (amitesh@yahoo-inc.com) ( Exceptional Performance, Bangalore). var worker = new Worker(‘MyWork.js'); worker.addEventListener ('message', function(e) { document.getElementById (‘heading'). textContent ( e.data ); }, false); worker.postMessage (‘WEB WORKERS');.

reed-frazier
Télécharger la présentation

WEB WORKERS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB WORKERS Amitesh Madhur (amitesh@yahoo-inc.com)(Exceptional Performance, Bangalore) var worker = new Worker(‘MyWork.js'); worker.addEventListener('message', function(e) { document.getElementById(‘heading').textContent(e.data);}, false); worker.postMessage(‘WEB WORKERS'); • onmessage = function(e) { • postMessage(e.data); • }

  2. Why Web Workers? • JavaScript should not execute for longer than 100 milliseconds to ensure responsive UI. My recommendation, though, is to keep JavaScript under 50 milliseconds at a time, because why even try to get close to that? • - Nicholas Zakas for(;;;) { // Perceived performance of the UI } • UI Blocked for 100 milliseconds == Perceived performance page is slow50 milliseconds….

  3. What is Web Worker? serialize unserialize worker.postMessage(obj || str) HeavyComputation FormatData MAIN PAGE MAIN PAGE self.postMessage(obj || str) MAIN PAGE serialize unserialize

  4. Without Web Workers • With Web Workers • What are Web Workers • Worker Environment • Subworkers/Delegation • Inline Worker • Restrictions • Browser Support • Use cases • Demo AGENDA • onmessage = fn{} • setTimeout(); • worker.postMessage('Hello World'); • worker.postMessage(obj);self.postMessage(e.data);

  5. Without Web Workers Chrome Internet Explorer Firefox

  6. With Web Workers Chrome Internet Explorer Firefox

  7. What are Web Workers? • Scripts running in background. • Heavy Weight Scripts.

  8. What are Web Workers? myworker.js // create web worker worker.postMessage({‘cmd’:gen_num}); self.onmessage = fn(e){} worker.onerror = fn(e){ // e.lineno // e.filename // e.message } // task completed self.postMessage(arrayOfRandomNum); worker.terminate(); worker.onmessage = fn(e){ // update DOM with e.data }

  9. Difference from other approach. • How different from setTimeout? • How different from AJAX?

  10. So what does Worker look like? Main Page // Check if workers are supported. if (typeof(Worker) == "undefined") { document.getElementById(‘support’).textContent = ‘Your browser does not  support Web Workers’; return false; } // worker object var worker = new Worker('worker.js');              // post message to worker worker.postMessage(‘Are you there?’); // error handling worker.onerror = function(event){     console.log(event.message + ‘ in file = ’ + event.filename + ‘ at line #’  + event.lineno ); }; // on message handler worker.onmessage = function (event)  {  document.getElementById('result').textContent = event.data; } 1 2 3 4 5

  11. So what does Worker look like? worker.js 1 self.onmessage = function(event){ postMessage(event.data + ‘ Worker says: Yes I am here.’); } OR self.addEventListener('message', function(e) { self.postMessage(event.data +‘ Worker says: Yes I am here.’); }, false); 2

  12. Worker Environment • No BOM • No DOM • !parent • setTimeout, setInterval • navigator object • location object (read-only) • XMLHttpRequest • Spawning other web workers

  13. Subworker/Delegation • Ability to spawn child workers • Breaks up huge task into smaller chunks • Sub workers should be in hosted in the same domain • Location of sub worker file is relative to parent worker (and not main page).

  14. Subworker/Delegation Parent Worker self.onmessage = function(event){ varnum_workers = 4; // total sub workers varpending_workers = num_workers; // loop though the sub-workers for (vari = 0; i < num_workers; i++) { var worker = new Worker('subworker.js'); worker.postMessage(event.data); // on message worker.onmessage = function(event) { varstr += event.data; // collect data pending_workers -= 1; // workers pending // case: all response collected then post to main page if (pending_workers == 0) self.postMessage(str); } // on message sub-worker end } // loop end } 1 2 3 4

  15. Subworker/Delegation subworker.js onmessage = function(event){ postMessage(event.data + ‘ Sub Worker says: Yes I am here.’); }

  16. Inline worker • Worker script on the fly • Without creating separate worker file • BlobBuilder interface

  17. Inline worker • Worker script on the fly • Without creating separate worker file • BlobBuilder interface var bb = new BlobBuilder(); bb.append("onmessage = function(e) { postMessage('msg from worker'); }"); varblobURL = window.URL.createObjectURL(bb.getBlob()); var worker = new Worker(blobURL); worker.postMessage('Hello'); // post message to start worker // on message worker.onmessage = function(e) { // e.data == 'msg from worker' };

  18. Restrictions • !file:// (chrome) • http: | https: && data: | javascript:

  19. Browser Support 3.5+ ✔ ✔ ✔ ✔ • 4.0+ • 4.0+ • 10.6+ X

  20. Use Cases • Prefetching and/or caching data for later use • Code syntax highlighting or other real-time text formatting • Spell checker • Background I/O or polling of webservices • Processing large arrays or JSON responses

  21. DEMO var worker = new Worker(‘MyWork.js'); worker.addEventListener('message', function(e) { document.getElementById(‘heading').textContent(e.data);}, false); worker.postMessage(‘DEMO'); • onmessage = function(e) { • postMessage(e.data); • }

More Related