0

I was reading "Eloquent Javascript", chapter 11 on asynchronous programming and there is a diagram given on page 181 contrasting the differences in single threaded, multithreaded and asynchronous techniques in the case of sending two network requests. Black dots represent the points where the request was made in the timeline. The thin lines represent the time spent waiting for the response. The thick lines represent normal program execution. My doubt was about the gaps in the timeline. The author doesn't mention what they represent so I'm having a hard time making a precise distinction in the concepts. Any help in understanding is appreciated.

An asynchronous model allows multiple things to happen at the same time. When you start an action, your program continues to run. When the action finishes, the program is informed and gets access to the result (for example, the data read from disk).
We can compare synchronous and asynchronous programming using a small example: a program that fetches two resources from the network and then combines results.
In a synchronous environment, where the request function returns only after it has done its work, the easiest way to perform this task is to make the requests one after the other. This has the drawback that the second request will be started only when the first has finished. The total time taken will be at least the sum of the two response times.
The solution to this problem, in a synchronous system, is to start additional threads of control. A thread is another running program whose execution may be interleaved with other programs by the operating system—since most modern computers contain multiple processors, multiple threads may even run at the same time, on different processors. A second thread could start the second request, and then both threads wait for their results to come back, after which they resynchronize to combine their results.
In the following diagram, the thick lines represent time the program spends running normally, and the thin lines represent time spent waiting for the net- work. In the synchronous model, the time taken by the network is part of the timeline for a given thread of control. In the asynchronous model, starting a network action conceptually causes a split in the timeline. The program that initiated the action continues running, and the action happens alongside it, notifying the program when it is finished.

enter image description here

Jamāl
  • 119
  • 6

1 Answers1

1

I'd say the gaps represent yielding control back to a higher instance. For JavaScript, this higher instance would be the browser, which would then use the time inbetween to render the page or perform other tasks. For a generic process, the higher instance would be the operating system, which would schedule the execution of another process, or if no other process is present shutdown the processor physically for a small amount of time.

Jonas Wilms
  • 106,571
  • 13
  • 98
  • 120
  • Ok but then what is the difference between the gaps and thin lines? Is a waiting process still running? – Jamāl May 02 '21 at 14:24
  • 2
    It could be, that's calles [busy waiting](https://en.m.wikipedia.org/wiki/Busy_waiting). In the context of JS this is probably not the case though, a "blocking call" like NodeJS `readFileSync` will probably also yield up back to the engine / OS to perform other tasks, however it will block other JS tasks from running. So while the task is not actively executing, it is still blocking execution. – Jonas Wilms May 02 '21 at 16:31