Journal of Applied and Multidisciplinary Sciences – AMS Journal – Vol. 1, No.1, pp.

16-20, 2022

Synchronous Vs Asynchronous
Content Loading On The Internet

Miloš Mladenović Marija Mojsilović

Academy of Professional Studies Sumadija Academy of Professional Studies Sumadija
Department in Trstenik, Department in Trstenik,
Trstenik, Serbia Trstenik, Serbia
[email protected] [email protected]

Abstract—Fast and fluent loading of content on the Internet of the web page to load; it is essential to think about the visual-
today is becoming an imperative of modern web programming, aesthetic side of content loading. Using asynchronous access to
which makes IT today, faster than ever, developing and the content of web applications in 2022 is considered the best
expanding its domain of activity, in order to provide users with practice so far. In the past, the traditional, sequential approach
the most comfortable and pleasant use of Internet content. worked by stopping the application, and the user's screen
Traditional approaches in programming provide the main "freezes" until the content is not available for manipulation by
support for the development of new technologies and approaches the user and the application starts working again. Today, such
in solving the more complex problems that engineers face today. an approach to loading web pages is considered a not so good
The ever-increasing amount of data, which must be processed,
solution, although we can still encounter such a way of
converted and made available to the user in a form that
represents easy data manipulation in the shortest possible time,
working applications and accessing a certain site and web page.
requires that the asynchronous model of loading content on the Therefore, asynchronous access to the content of the web
Internet replaces the previous sequential-synchronous model and application not only enables the timely appearance of the
that it be improved implements in the daily operation of searched content on the screen, whether it is browsing or
applications, programs, websites and the like. Accordingly, the accessing the site and the application via mobile phones, tablet
goal of this work is to explain how the asynchronous, or devices or computers, which the asynchronous method of
synchronous, content loading model works, as well as to prove programming offers as a solution, because a large amount of
that the asynchronous content loading model on the Internet is data from the database needs to access external application
superior to the synchronous model. Therefore, the subject of this programming interfaces in the shortest possible time, which on
paper is synchronous vs. asynchronous loading of content on the the other hand allows the server in the background of the
Internet application not to depend on the results of some slow
operation, until that same operation is performed. It strives for
Keywords- synchronous content loading; asynchronous content functionality in providing services to other programs or devices
loading; web loading; web page rendering; rendering; on-screen called clients, all for the purpose of satisfying the user himself
loading in interactive communication with certain web content. The
aim of this work is to prove that the asynchronous model of
I. INTRODUCTION content loading on the Internet is superior to the synchronous
The modern society of the 21st century implies an model.
accelerated pace of life and the rapid progress of technology.
Therefore, the progressive development of hardware and II. PREVIOUS RELATED RESEARCH
software does not allow the user, who is used to getting The traditional, existing synchronous programming model
everything "now and immediately", to wait in order to access relies on operations that are performed one after the other, that
the content that interests him. And so in the world of is, sequentially, and the program moves to the next step only
Information Technologies, and especially in the areas of web after the previous step has been fully completed. Such a linear
programming, the aspiration has been redirected to finding a approach to the execution of tasks encounters great difficulties
more efficient solution for fast loading of web pages, that and problems. Let's take into account that in modern client
content which represents the goal of interest and demand of the applications, the need for constant interaction with available
user himself. One of the important conditions that should not searchable content, which is located outside the working
be neglected is the efficiency of the programming itself, the memory, is becoming more and more frequent, which the
way of manipulating the data that is loaded. Also, a synchronous programming model, and then the result of
significantly greater impact, with more complex web loading content from the Internet, cannot satisfy, because a
applications, today when time is money, when the user does longer period of time is required to perform all the operations
not want to have the feeling that he has to wait for the content one after the other. An example of this way of executing

16 | A M S J o u r n a l
Synchronous Vs Asynchronous Content Loading On The Internet | IEEE

instructions with synchronous system calls blocks the thread asynchronous approach requires additional effort in order to
of execution of loading content until, for example, reading match the client interface with the data, so it is largely
from disk is complete. This type of programming tends to be necessary to block or match entire parts of the interface from
solved by the principle of "Multithreading", where it is the server to the final destination of displaying the content, i.e.
possible to perform several parallel processes at the same displaying the processed data [4].
time, and whose program work relies on an asynchronous
programming model that allows several operations to be
performed at the same time. Which provides greater comfort
to the user when loading content from the Internet [1].

Figure 3. CPU – IO Bound (source: https://www.baeldung.com/cs/cpu-io-

bound

A. How to speed upweb page loading?

Since we are already talking about loading content from
the Internet, the logical question is how to speed up the
loading of web pages. Therefore, sites that strive for high user
performance require the programmer to devise the sequence in
the code in advance and accurately predict the places where
Figure 1. The single-threaded Figure 2. The asynchronous model styles and scripts will be called, so calling external CSS at the
synchronous model [2] [2] bottom of the page generally slows down its loading, and its
movement in The HEAD part would permanently solve such a
problem. However, when we talk about scripts, external
III. ASYNCHRONOUS RENDERING OF WEBSITE JavaScript files cause a similar problem, but the solution to
such a problem would be completely opposite to the previous
Asynchrony in programming implies the processing of one, therefore, it is better to move the scripts from the top to
events that can happen outside the main flow of execution, i.e. the bottom of the page and as low as possible, and the reason
such a processing mechanism that does not depend on the for this movement is progressive loading i.e. page rendering,
management of the main flow "Control flow", usually such and therefore greater parallelism when downloading the
events are interprocess signals or instigating actions of the necessary script files.
program that will execute during the execution of the main
program without any blocking of the Internet page while When dealing with external CSS, progressive loading is
waiting for the results of the search itself [3]. More precisely, blocked until all styles are loaded. That's why it's best to move
during asynchronous programming, the program is free to the style call to the HEAD part of the page, so that they are
issue commands addressed to the database or network devices downloaded first. With scripts, progressive loading is blocked
in parallel while the processor continues to work and execute for all content below the script. Moving the script as low as
the given commands. This fluent approach in programming is possible means that the content above the script will be loaded
especially useful in the case of solving problems related to first.
input and output "I/O bound", where the execution time is Another problem caused by scripts is blocking parallel
actually the waiting time for the results of the requested downloads. The HTTP/1.1 specification suggests that
external application programming interface, when we talk browsers download no more than two components in parallel
about web programming the waiting time is in matters query per host. If for example images are uploaded from multiple
time over the database. Practically, if we look at the server hosts, it is possible to get multiple downloads in parallel.
side, this kind of asynchronous model offers us the possibility However, while the scripts are being downloaded, the browser
that while we wait for the data of one client, we do not ignore will not start any other downloads, even on different hosts.
the requests of another client, but at that moment the
capacities of the processor will be used to the maximum, so In some situations it is not easily feasible to move the
that the waiting time for loading the website and content is images to the bottom. If, for example, a script uses
minimal . For the user himself, this means that he is enabled to document.write to load part of the page's content, then the
display and respond to the desired interaction with the content, script cannot be moved down. There can also be range issues.
while the application is constantly running in the background. In many cases there are ways to resolve these situations.
However, although it seems that this approach is far better and An alternative suggestion that comes into play is the use of
more efficient than the traditional synchronous model, it is "deferred scripts". The DEFER attribute indicates that the
also not so efficient when it comes to programs that are tied to scripts do not contain document.write, which signals the
the processor "CPU bound", because then the waiting time, browser to continue loading the page. Unfortunately, Firefox
i.e. execution of a command determined by the time it takes does not support the DEFER attribute. In Internet Explorer,
the processor to process a large amount of data. Therefore, the scripts can be delayed, but not completely as you would like.

17 | a m s j o u r n a l . o r g
 Synchronous Vs Asynchronous Content Loading On The Internet | IEEE

If the script can be delayed, that means it can also be moved to Now that we're familiar with a popular way to manage
the bottom of the page. These are some of the tips on how to asynchronous code using promises, we can show a sample
speed up the loading of web pages [5]. Optimize images and code that uses the JavaScript language. The ECMAScript2017
video content, because over 40% of web page content consists standard provides a way to write asynchronous functions,
of images and photos. It is considered that the optimal size of where they look like synchronous functions, but of course,
photos is up to 150KB and that there is no need to display behave asynchronously, using the async and await keywords
images of huge resolutions, because just waiting for them to [8, 9].
be downloaded by users, if they have a bad internet
connection, can only spoil the user experience of using your
site.
It is also recommended to test the speed and performance
of the site itself after creating the website or during
development. If you follow the previously defined guidelines,
you will surely improve the loading speed of your site.

Figure 4. An example of asynchronous JavaScript (source:

IV. SERVER-SIDE RENDERING https://www.programiz.com/javascript/async-await
A term often used when loading content is "server-side
rendering", which is actually the process of asynchronously This way of calling functions can be used as one of the
rendering a web page into plain HTML before it is sent to the main ways of presenting content to users and is the very
client. This process used to be more prevalent than today, but foundation and basis that can be expanded for better
it still exists today, especially with programming languages adaptation for the specific application in which it will be
such as PHP, where data is fetched from the database, called. The following is a code example that shows how
compiled into an HTML document and thus sent to the user content can be displayed with asynchronous loading.
[6]. HTML document with asynchronous content loading
In this way, predefined content is displayed to the user <!DOCTYPE html>
most often in the form of dynamic web pages. After a certain <html>
time interval, the content that will be displayed to the user <body>
may be different compared to the previous visit. In contrast to <h2>JavaScript async / await example</h2>
dynamic web pages, there are static ones where the name itself <p id="page-content"></p>
indicates that the content of that page is static and does not <script>
change. async function renderPage() {
let myPromise = new Promise(function (resolve) {
let req = new XMLHttpRequest();
TABLE I. SERVER VS. CLIENT-SIDE PAGE RENDERING BASED ON req.open('GET', "page-content.html");
FREECODECOMP.ORG [7] req.onload = function () {
if (req.status == 200) {
resolve(req.response);
} else {
resolve("File not Found");
}
};
req.send();
ACKNOWLEDGMENT (HEADING 5) });
In order to prevent the creation of a hell of callback document.getElementById("page-content").innerHTML =
functions, there was a need to introduce more advanced await myPromise;
}
elements of the JavaScript language. The ES6 standard
renderPage();
introduced the concept of promises, which solves this </script>
problem. </body>
A promise can be in one of the following states [8]: </html>

 Pending — The promise is in this state during

initialization. V. EXPERIMENTAL RESULTS
 Fulfilled — The promise moves to this state if the In 2019, the research "Does asynchronous model really
asynchronous operation has completed successfully. give benefits in throughput against properly configured
synchronous?" was conducted by Russian software engineer
 Rejected — The promise goes into this state if the Eugene D. Gubenkov. In that research, Eugene created two
asynchronous operation ended unsuccessfully. ASP.NET Web API methods that he tested using Jmeter, a

18 | A M S J o u r n a l
Synchronous Vs Asynchronous Content Loading On The Internet | IEEE

tool for testing, analyzing and measuring the performance of

various services, with a focus on web applications.
You will notice how the synchronous model becomes
faster when the thread pool injects enough threads. If the
Thread Pool is set correctly, this way would be better than
asynchronizing from the beginning the beginning.

Figure 7. CPU time and Virtual Memory [10]

So we conclude that under some laboratory or specific

circumstances it is possible to obtain comparable results for
synchronization versus asynchrony, but in real cases where the
workload cannot be 100% predictable and where the workload
is uneven, it is inevitable that we reach some kind of limitation
Figure 5. Response time with thread count [10] threads, or server-side limits, or thread pool growth limits.
Additionally, the sync version has a larger memory footprint
If we wonder what happens with resource consumption, (both working set, and way bigger virtual memory size). In
under the claim "Thread has big cost in terms of CPU time terms of CPU consumption, the asynchronous model also wins
scheduling, context switching and RAM footprint". And not [10].
everything is like that. Thread scheduling and context
switching is efficient. In terms of stack usage, a thread does CONCLUSION
not immediately consume RAM, it just reserves the virtual When we talk about technologies of this kind, especially
address space and commits only the small part that is actually when there is an increasingly present emphasis on web
needed. programming, we should emphasize the importance of the
Let's see what the data says. Even with more threads the very availability and modernity of today, which requires the
sync version has a smaller memory footprint (the working set implementation of modern knowledge of Information
mapped to physical memory). Technology in what it creates, so that the users of a newly
built application or site, web page provided everything that the
demanding user demands and expects from it today, while at
the same time fulfilling and relying on scientific and
technological requirements at all times and being
methodologically set, and at the same time commercial and
visible to users, i.e. adapted for wider use and the possibility
of further development and improvement, which reflects the
importance of web programming. The path of transition that
modern society is going through and the increasing
digitization and automation, as well as data manipulation,
have led to the fact that web technologies and the
programming languages and design that would support them
have become new frameworks in the marketing of web content
on the information technology market. The content should be
appropriate, direct, quickly and efficiently placed, easily
Figure 6. Working Set and Thread Count [10] accessible and visible, which speaks in favor of the fact that
the asynchronous method of loading content from the Internet
is in a leading position in the selection of models and methods
of programming, which at the same time provides a lot of
space for further upgrading and improving all necessary
performance. The 21st century does not suffer from a delay in
loading content, but requires fluency, availability and

19 | a m s j o u r n a l . o r g
 Synchronous Vs Asynchronous Content Loading On The Internet | IEEE

applicability at a high level, and at the same time a satisfied REFERENCES

user. [1] Andić A., (2021), Upravljanje stanjima unutar React biblioteke –
Master’s thesis, Pula, University of Pula
FUTURE SCOPE [2] cs.brown.edu, Introduction to Asynchronous Programming,
https://cs.brown.edu/courses/cs168/f12/handouts/async.pdf, [Viewed 25
How can we predict the internet future, when it changes August 2022]
from second to second, what is current now and seems to be [3] Davies A., (2012), Async in C# 5.0: Unleash the Power of Async,
the most acceptable and most rational, most innovative Sebastol
solution in programming and the very selection of methods [4] Marić S., (2020), Razvoj asinhronih veb aplikacija korišćenjem radnog
and techniques, languages and programs, already at this okvira Tornado – Master’s thesis, Belgrade, University of Belgrade,
moment, while you are reading these sentences, it becomes an Faculty of Mathematics
outdated way of thinking and some new solutions have already [5] Ivezić J., Kako Ubrzati Učitavanje Web Stranica,
https://www.popwebdesign.net/popart_blog/2013/05/kako-ubrzati-
been created. It is precisely in this dynamic and the power of ucitavanje-web-stranica/, [Viewed 26 August 2022]
transformation that Information Technologies are reflected, [6] Mihajlović N., Renderovanje na strani servera – da li je i dalje
which are always a step or three ahead of what is currently potrebno?, https://www.mcloud.rs/blog/renderovanje-na-strani-servera-
marketed, just like the asynchronous model of uploading da-li-je-i-dalje-potrebno/, [Viewed 27 August 2022]
content to the Internet. Although we think that the entire [7] Vega C., Client-side vs. server-side rendering: why it’s not all black and
process of reading the content is finished, actually in the white, https://www.freecodecamp.org/news/what-exactly-is-client-side-
background the server is still working and creating the new rendering-and-hows-it-different-from-server-side-rendering-
bd5c786b340d/, [Viewed 27 August 2022]
content that is shown to us. The user follows the trends and
claims that his use of the Internet is futuristic, but he does not [8] Ajzenhamer N., Zečević A., (2021), Programiranje za veb, Belgrade,
University of Belgrade, Faculty of Mathematicsž
really understand how information technology, artificial
[9] programiz.com, Javscript async/await,
intelligence and the way of creating the future are actually https://www.programiz.com/javascript/async-await, [Viewed 28 August
ahead of the current future. Therefore, it is not possible to 2022]
speak with precision about the future trends that will be [10] Gubenkov D. Eugene, Does asynchronous model really give benefits in
imperative in solving the problem, but perhaps it is best to throughput against properly configured synchronous?,
speak about the proposals of future achievements, and https://stackoverflow.com/questions/55823184/does-asynchronous-
accordingly, as we conclude, progressive web applications model-really-give-benefits-in-throughput-against-properly-conf ,
[Viewed 28 August 2022]
with an asynchronous loading model are leading the way and
will definitely mark the future programming.

20 | A M S J o u r n a l