I like to record what I learned from technical salon or some thoughts inspired by group discussion. Today's group discussion topic is async and performance in You don’t know JS. Actually, what impressed me a lot is the extension points we discussed about Event Loop in Javascript, below I'd like to record it.
First袭异，I would like to Introduce a conception
What is event loop捐祠？
// `eventLoop` is an array that acts as a queue (first-in, first-out)
var eventLoop = [ ];
var event;
// keep going "forever"
while (true) {
// perform a "tick"
? ?if (eventLoop.length > 0) {
? ? ? // get the next event in the queue
? ? ? event = eventLoop.shift();
? ? ? // now, execute the next event
? ?try {
? ? ? event();
? ?}
? ?catch (err) {
? ? ? reportError(err);
? ?}
}
}
The above code are easy to understand. Pop every unit in eventLoop out and try to execute.?
Below is the code need to discuss.
var res = [];
// `response(..)` receives array of results from the Ajax call
function response(data) {
// let's just do 1000 at a time
var chunk = data.splice( 0, 1000 );
// add onto existing `res` array
res = res.concat(
// make a new transformed array with all `chunk` values doubled
chunk.map( function(val){
return val * 2;
} )
);
// anything left to process?
if (data.length > 0) {
// async schedule next batch
setTimeout( function(){
response( data );
}, 0 );
}
}
// ajax(..) is some arbitrary Ajax function given by a library
ajax( "http://some.url.1", response );
ajax( "http://some.url.2", response );
Albert said：“Does these codes will accelerate the speed？If not, why we write code like this静浴？”
The answer in my mind is to make program smoothly.But Lucky provide a more professional answer.
We simulated a parallel status which only read 1000 items data when data are too huge and page turn to blocking.
The key point is what is the core of this fake parallel?
setTimeout(fn, 0);
These codes seems simple, execute fn after 0 second.Albert present a core code as below:
function a(){
? ?...
? ?b();
? ?...
}
function b(){
? ?...
? ?setTimeout(d, 0);
? ?c();
? ?...
}
function c(){
...
}
function d(){
? ?...
}
How does Event Loop work糙置？
What is the running sequence of these codes?
Please continue to read if your answer is a, b, d, c.
Obviously, this answer is incorrect, the correct answer is: a, b, c, d
So what is the running principle of setTimeout(d,0)?? And why single thread javascript can have same function with setTimeout?
Now we can lead in eventLoop which was mentioned in the beginning.
Single thread means that all tasks need to queue, one by one.? ? At 21st century, CPU is more power than before. They can solve plenty of tasks during most of time. IO devices, by contrast, are so slow that CPU need to be idle to wait for them(.e.g ajax actions).
Designer of Javascript has already realized it撩匕，main thread can completely regardless of the IO equipment, hang in this task and run next one.Wait until the IO device returns the results, and then turn around, to carry out the pending mission.
So, all tasks can be divided into two types, one is the synchronous task, the other is the asynchronous task.Synchronous task refers to the task of queuing in the main thread.Asynchronous task refers to, do not enter the main thread, and into the "task queue" (task queue) task, only the "task queue" notify the main thread, an asynchronous task can be implemented, the task will enter the main thread of execution.
Synchronous task will be run only when previous on is finished.
———translated from the blog of Mr. Ruan Yifeng《Explain the operation mechanism of Javascript: Event Loop》
Back to see the above section of code. Fn a() is running and be added into stack until fn b appear.At this time, something associated with a() like context, pointer and so on will be pushed into heap.The same thing occurred on b() and c().The only question is when will the method in b()?setTimeout?be called?
setTimeout?will cause d() be pushed into eventLoop when it is running.
When the entire stack and heap is empty, that is, the main thread is idle, it will start to view the eventLoop, compared to each of the event time stamp蜓堕，
If the timestamp expires, call the event. If event does not meet the conditions of the start of the next process.
Above is my own understanding and some thinking for the contents of Albert told today.
