Browser Kernel resident Thread

Browser Kernel resident Thread

1. Browser GUI Render Thread
2. JavaScript engine Thread
3. Browser timed trigger Thread
4. Browser Event Trigger Thread
5. Browser HTTP Asynchronous Request thread

The browser GUI rendering thread is mutually exclusive with the JavaScript engine thread

Check the effect of the code below in debug to know

var sleep = function (time) {    var date = new Date ();      while (new date ()-date <= time) {}}document.body.innerhtml = ' 123 '; Sleep (3000)

The principle is also very simple:

• The GUI rendering thread is responsible for rendering the HTML elements of the browser interface, which is executed when the interface needs to be redrawn (repaint) because of an operation that causes reflux (reflow).
• Because JavaScript scripts manipulate DOM elements and render the interface while modifying these element properties, the element data obtained before and after the render thread may be inconsistent.
• So updates to the interface in the script, such as adding nodes, deleting nodes, or changing the appearance of nodes, are not immediately reflected, and will be stored in a queue that is only available for rendering when the JavaScript engine is idle.

So when the JS engine is encountered in a large amount of time, and want to call GUI rendering in time, you can make the following changes:

var sleep = function (time) {    var date = new Date ();      while (new Date ()-date <= time) {}}document.body.innerhtml = ' 123 '; SetTimeout (function () {   sleep (3000);}, 0);

JavaScript Engine Thread event-driven (driven) mechanism

Event drivers are typically implemented through event loops and event queues.

Suppose there is an instance in the browser that is dedicated to event scheduling (which can be a thread, which can be called an event dispatch thread), the work of that instance is a loop that does not end, the event is taken out of the event queue, Handles all the events associated with the callback function (event handler).

Note that the callback function runs in the main thread of JavaScript, not in the event distribution thread, to ensure that event handling is not blocked.

Event Loop Code

If the queue is not empty, the engine takes a task out of the queue header until the task finishes processing, returning the engine to run the next task, and other tasks in the queue that are not returned by the task cannot be executed.

Communication with other threads

 

Browser HTTP Asynchronous Request thread

The number of concurrent connections that the browser requests for the same domain name is limited, result: In IE 8, 6 in Firefox, and Chrome 5+. For details, refer to demo:http://developer.oncecode.com/comet/

XMLHttpRequest After the connection is a new thread request through the browser, when a state change is detected, if a callback function is set, the asynchronous thread will produce a state change event to be placed in the processing queue of the JavaScript engine waiting for processing

Browser Event Trigger Thread

Accepts action event responses inside the browser. If you hear the mouse, keyboard and other events, if there is an event handler function, the corresponding task is pressed into the queue.

Browser timed trigger Thread

The browser model timer counter is not counted by the JavaScript engine because the JavaScript engine is single-threaded, and if the state of the blocking thread affects the accuracy of the timing, it must depend on the external timing and trigger the timing.

SetTimeout & Setintervalsettimeout: Places the Pending method into the execution queue after the time specified by the parameter, and if no other method waits in the queue, the SetTimeout specified method is executed immediately. Setiinterval: The timed trigger thread assigns the specified method to the execution queue at a specified time, and when the function executes, it will only execute 1 times if it finds that the same timer already has multiple tasks waiting to be executed. The back will be ignored.

var sleep = function (time) {    var date = new Date ();      while (new date ()-date <= time) {}}var time = new Date (), var a = setinterval (function () {    sleep ();    Console.log (New Date ()-time);    if (new Date ()-time > Clearinterval) (a);}, 100); Output  303506708

The above code indicates that in 700 time, a total of 7 timer callback was pressed into the tail, after clearinterval, only 3 timer corresponding callback get executed. So this can be done in a settimeout way to make the results more consistent with development expectations:

var a = SetTimeout (function () {    sleep ();    SetTimeout (Arguments.callee, 100)}, 100);

Reference:

http://blog.csdn.net/jqrsdsy/article/details/7335249

http://ronxin999.blog.163.com/blog/static/4221792020115711582653/

Browser Kernel resident Thread