HTML5 Web Worker and html5webworker
In HTML5Worker thread(Web Workers) concept, that is, the concept of multithreading, you can give a lot of computing code to the web worker to run without freezing the user interface.
Three main features of Web Workers:
1) long running (response)
2) Ideal Startup Performance
3) Ideal memory consumption
Web Workers allows developers to write background programs that can run for a long time without being interrupted by users, execute transactions or logic, and ensure that pages respond to users in a timely manner.
Web Workers provides a method for running scripts on Web Front-end Web pages in background processes. Once it is created, Web Workers can sendTask poolSend a task request and then use postMessageReturns a message to the event handler specified by the creator.(Capture through onmessage ). The Web Workers process can process tasks without affecting the user interface. In addition, it can also use XMLHttpRequest to process I/O, but generally, background processes (including Web Workers processes) DOM cannot be operated. If you want the result processed by the background program to change the DOM, you can only process it by returning the message to the callback function of the Creator.
You need to create a new Worker instance in the JavaScript code on the client page. The parameter is the name of the JavaScript file to be run in another thread. Then listen to the onmessage event on this instance. Finally, JavaScript in the other thread can pass data between the two threads by calling the postMessage method.
In the main program, create a worker instance and listen to onmessage events
<Html>In the client's compute. js, a new thread is opened, which does not have the effect of blocking execution, and provides an interface for data interaction between the main thread and the new thread. Simply repeat multiple addition operations and return the result to the main thread through the postMessage method. The purpose is to wait for a while. During this period, the main thread should not be blocked. You can drag and drop the browser to expand or narrow the browser window and perform other operations to test this phenomenon. The result of this non-blocking main thread is what the Web Workers wants to achieve.
The postMessage method is called in compute. js to return the calculation result.
Var I = 0; function timedCount () {for (var j = 0, sum = 0; j <100; j ++) {for (var I = 0; I <1000000; I ++) {sum + = I ;}// call postMessage to send the message postMessage (sum);} postMessage ("Get the time before calculation, "+ new Date (); timedCount (); postMessage (" Get the time after calculation, "+ new Date ());Demo address: http://lovermap.sinaapp.com/test/test.html
Because javascript is executed by a single thread, the browser cannot execute other javascript scripts during complicated operations, and the UI rendering thread will also be suspended, causing the browser to become frozen. Using web worker to put the calculation process of a series into a new thread will avoid this situation.
In addition to loading a JS file using web worker for a large number of complex computing tasks without suspending the main process and communicating through postMessage and onmessage, importScripts (url) can be used in worker) load other script files, use setTimeout (), clearTimeout (), setInterval (), and clearInterval (), and use XMLHttpRequest to send requests and access some attributes of navigator.
But there are also someLimitations:
1. JS cannot be loaded across domains (same-origin policy restrictions)
2. The code in the worker cannot access the DOM.
3. the implementations of Worker in different browsers are not consistent
4. Not every browser supports this new feature.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
