Download - HTML5 Multithreading
HTML5 Multithreading
Agenda
Single Threaded Model Unresponsive Script
Multithreading Web Workers (Dedicated) Sub Web Workers Shared Web Workers
Single Threaded Model
Single Threaded Model
JavaScript in a browser executes on a Single Thread Asynchronous Events
Timer Delay is Not Guaranteed!
Unresponsive Script
Browser complains a long-running script and ask user if it should be stopped
Unresponsive Script
Solutions setTimeout()
Use 1ms timeout chunks cause task to complete slowly overall, but browser UI will remain responsive
Web Workers Web workers provide background thread support in th
e browser
Multithreading
Web Workers
Dedicated Web WorkersDedicated Web Workers Allow long-running script that are not interrupted by
scripts that respond to clicks or other user interactions
Allows long tasks to be executed without yielding to keep the page responsive
Checking for Browser Support Compatibility Tables if (typeof(if (typeof(window.Workerwindow.Worker) !== ‘undefined’) {) !== ‘undefined’) {
// this browser supports web workers // this browser supports web workers}}
Workers Environment Accessible
The this / self object (worker) The navigator object The read-only location object XMLHttpRequest setTimeout() / clearTimeout() setInte
rval() / clearInterval() The Application Cache
Web Sockets Web Data Storage
Inaccessible The DOM (thread-unsafe!) The window objects The document object The parent object
Communicate with DOM by message passing
Communication with Workers
Use postMessage() to send data to and from Web Workers for cross-pages (sub windows / internal frames) communication
postMessage() can be used to send most JavaScript objects, but Not JavaScript Functions or Objects with Cyclic References, since JSON doesn't support these
Web Workers
Stop Workers
Call worker.terminate()worker.terminate() from the main page Call self.close()self.close() inside of the worker itself
Handling Errors
e.message A human-readable error message
e.filename The name of the script file in which the error occurred
e.lineno The line number of the script file on which the error occurred
Sub Web Workers
Workers have the ability to spawn sub workers, but… Sub-workers must be hosted within the same origi
n as the parent page The URIs for sub workers are resolved relative to
the parent worker's location rather than that of the owning page
Sub Web Workers
Shared Web Workers
Shared Web Worker can be shared across pages (popups / iframes) on the same origin
Introduce the notion of ports that are used for postMessage() communication
Be useful for data synchronization among multiple pages (or tabs) on the same origin or to share a long-lived resource (like a WebSocket) among several tabs
Shared Web Workers
Inline Web Workers
Inline Web Workers which are created in the same web page context or on the fly Reduce the number of requests that the page perform Create some functionality on the fly
Page Inline Worker The worker's code is created inline inside the web page <script type="<script type="javascript/workerjavascript/worker">">
On The Fly Worker The worker’s code is provided by an external source as stri
ng
Inline Web Workers
Loading External Scripts
Workers have access to a importScripts API which lets them import scripts into their scope importScripts('script1.js');
importScripts('script2.js'); importScripts('script1.js', 'script2.js');
Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames
Use Cases Performing computations in the background
Code syntax highlighting Real-time text formatting Spell / Grammar checker
Performing web I/O in the background Pre-fetching and/or caching data Background I/O or polling of web services Concurrent requests against a local storage Updating many rows of a local storage
Dividing tasks among multiple workers Image processing Image synthesize Analyzing video or audio data Processing large data sets
jQuery Plug-in
In Firefox, It can be sent the complex data via postMessage()
In Chrome and Safari, It will handle only a string or other simple data via postMessage()
Web Workers with jQuery Hive Worker-to-worker direct messaging Object, array, and String manipulation Query JSON with JSONPath Variable evaluation and logic control flow utilities A syntax that jQuery developers will understand
Conclusion
Demo Demo 1 Demo 2 Demo 3
Q&A