Sometimes you have to load & process tons of data on client system however how you can do this without blocking of UI. JavaScript has a problem on browser that it runs on a thread. It means, 2 process or scripts can’t run at a time. If you’re processing Jscript on page load, the user can’t interact with webpage dynamically. Jscript don’t handle UI events during processing of any other activity. When you’ll process anything else before loading page, users have to wait that is very bad experience.
The JavaScript will not handle UI events while processing something else. If you process something large before page load, the end user has to wait all-together which is a horrible user experience. Running it also doesn’t help as non-blocking or concurrency.
Thus, how we can process 2 Script functions simultaneously? HTML 5 has web-workers that provide threading to Jscript and this post is used for multiple scripts simultaneously however makes requests as well.
With the beginning of web applications and Ajax, users are spoiled with quick updates on applications. As web applications can give fast responses, some bottlenecks should be eliminated. Bottleneck includes big computation of I/O and Jscript that must be removed from UI rendering process. Theses worker’s specifications has capability to run Jscript in background independently. Long running scrip could not be interrupted by Jscript which gives quick response to clicks. Web worker also allows long tasks to be implemented without yielding.
Actually, Ajax is not a technology. Its several technologies each works in new ways. Ajax applications incorporates:
- Standard based presentation with X-HTML & CSS
- Dynamic interactions and display with Document Object Model
- Data manipulation and interchange with XSLT and XML
In Jscript, using Web Workers is very simple. Find below some good start!
<!–HTML file–>
<!DOCTYPE html>
<script>
//define a worker
var worker = new Worker(‘worker.js’);
worker.addEventListener(‘message’, function(e) {
console.log(‘Worker said: ‘, e.data);
}, false);
worker.postMessage(‘Hello World’); // Send data to our worker.
</script>
<!–WebWorkers file called worker.js–>
self.addEventListener(‘message’, function(e) {
self.postMessage(e.data);
}, false);
Now another code
//simple XHR request in pure JavaScript
function load(url, callback) {
var xhr;
if(typeof XMLHttpRequest !== ‘undefined’) xhr = new XMLHttpRequest();
else {
var versions = [“MSXML2.XmlHttp.5.0”,
“MSXML2.XmlHttp.4.0”,
“MSXML2.XmlHttp.3.0”,
“MSXML2.XmlHttp.2.0”,
“Microsoft.XmlHttp”]
for(var i = 0, len = versions.length; i < len; i++) {
try {
xhr = new ActiveXObject(versions[i]);
break;
}
catch(e){}
} // end for
}
xhr.onreadystatechange = ensureReadiness;
function ensureReadiness() {
if(xhr.readyState < 4) {
return;
}
if(xhr.status !== 200) {
return;
}
// all is well
if(xhr.readyState === 4) {
callback(xhr);
}
}
xhr.open(‘GET’, url, true);
xhr.send(”);
}
//and here is how you use it to load a json file with ajax
load(‘data.json’, function(xhr) {
var result = xhr.responseText;
});
When you will merge this code. It will make an animation. This will initiate web worker that can process and retrieve file with background as animation is in process. Web workers resides in constrained world along with NO-DOM access however DIM is not safe thread. Thanks to web workers and HTML 5 you may spawn new thread providing true a synchrony.
With lot of things in HTML 5 specifications, web worker continues to change. For dedicated workers, versions of Safari, Firefox and Chrome works properly. However possibilities are nonstop.
