　　Web Worker Threading

1 browser all the events scheduled by the operating system to the event queue (for example: you go to a window-shopping, to wait in line); the browser to use the single-threaded processing queue events and executing user code (that is, single-threaded; Workers except Web ).

　　Therefore, the browser can only handle one of these tasks, and a task can prevent the execution of any other tasks.

2 How to determine the code " fast enough" ? 0.1 seconds of the user experience: Users can operate freely, without waiting; 0.2 to 1.0 second delay will be noticed by the user; if more than one second, then the user will feel smooth; more than 10 seconds, users can be very frustrating.

　　Manual code detection:

<div the onclick = "jstest"> ... </ div> 

function jstest () { 
  var new new a Date = Start () the getMilliseconds ();. 
// this is a more expensive code 
var = STOP Time - Start; 
Alert ( "jstest () Executes in" + Time + "milliseconds");         
}

　　Performance Analyzer fireBug

Can include specific code in a survey of code to collect performance statistics, real-time validation code or specific execution at a specific time to monitor the run time. Buy the latter less distortion performance analysis, but the first point acquired data quality will be. You can (click on the "send" button)

Then the stars firebug Performance Analyzer to view time-consuming.

3 Threading

The use of multi-threading to a large overhead from the thread code that interacts with the user in peeling off. The basic problem is multi-threaded different threads can access and modify the same address. (What we need is a multi-threaded execution, as can multi-task like but not dangerous invasive methods with each other threads)

4 Web Workers

Let's look at how to use the Web Workers API to de-value package. The following shows how to create and start Worker:

// create and begin worker 
var worker = new new the Worker ( "JS / decrypt.js"); 

// Register the event handler is executed when the worker thread send a message to the main 
worker.onmessage = function (E) { 
  Alert ( " dECRYPTED value iS of the "+ e.data); 
} 

// send a message to the worker, this refers to a value to be decrypted 
worker.postMessage (getValueToDecrypt ()); 

// the following content js / decrypt.js in: 
// Register handler for receiving information from the main thread 
onMessage = function (E) { 
  // Get the data transmission over 
  var valueToDecrypt = e.data; 
  // the TODO: decryption function implemented here 
  // the value is returned to the main thread 
  this.postMessage (decryptedValue); 
}

　　On the page of any significant overhead (for example, long-running) javascript operation should be delegated to the Worker; it can be run faster.

5 If you are using a browser that does not support the Web Worker API, you can use Gears Worker API; code is as follows:

// Create worker Pool, it will produce Worker 
var WorkerPool = google.gears.factory.create ( 'beta.workpool'); 

// register event handlers, he receives information from the Worker's 
workerPool.onmessage = function (ignorel, ignorel2 , E) { 
  Alert ( "IS value of the DECRYPTED" + e.body); 
} 

// Create the Worker 
var workerId = workerPool.createWorkerFromUrl ( "JS / decrypt.js"); 

// send this information to the Worker 
workerPool.sendMessage ( . getValueToDecrpt () workerId); 

// the following is Gears version js / decrypt.js is: 

var = WorkerPool google.gears.workerPool; 
workerPool.onmessage = function (ignorel, ignorel2, E) { 
  // get the data transfer from 
  var = e.body getValueToDecrpt; 
  // the TODO: encapsulation function implemented here 

  // the value is returned to the main thread 
  workerPool.sendMessage (decryptedValue, e.sender); 
}

　　6. Timer

funState = {} var; 
function expensiveOperation () { 
  var the startTime = new new a Date () the getMilliseconds ();. 
  the while ((new new a Date () the getMilliseconds () - the startTime) <80.) { 
    // the TODO: It is performed by the following method much overhead operations: 
    // it performs work done within 80ms in chunks iteration, 
    // then modify the present state of the external function "function" of. 
  } 
  IF (! FunState.isFinished) { 
    // exit 10 seconds before performing expensiveOperation; 
    // tested with a larger value, in order to achieve an appropriate balance between performance and response Ui 
    the setTimeout (expensiveOperation (), 10); 
  } 
}

　　XHRHttpRequest: XHR synchronous and asynchronous execution mode. In asynchronous mode, XHR essentially has a dedicated Web Worker API.

　　XHR as in the synchronous mode, the delay time will lead to sustained user interface to send his request with XHR and time-consuming to resolve the overall response from the server. Also lead to unpredictable and user interface intolerable delays.

Web Worker multithreading