Grouping Scripts and Non-Blocking Scripts

Zia

2 Followers

Follow

Feb 6, 2024

-

1 sec read

428

0

0

0

Grouping Scripts

Developers might often have different files of JavaScript codes with multiple functions and handlers available to them. However, at certain times, they may need to be grouped together into one script. Grouping scripts allows the merging of different JavaScript codes to form one script. Before grouping different scripts, a developer needs to first decide whether the script file that is to be executed should be inline or external. Developers should know about inline and external JavaScript files to understand situations where each of them can be best utilized.

• Inline JavaScript:

A JavaScript file is said to be in line when the code to be executed is embedded within the HTML document. With the code already embedded in an HTML file of a Web page, the number of requests made by the page to the Web server reduces. This helps in reducing the time taken to display the content to the users. Therefore, the execution of code is immediate in the case of an inline JavaScript file. However, inline JavaScript files can become cumbersome to handle when there is a large chunk of code. This is because debugging a large volume of code is often challenging.

• External JavaScript:

In an external JavaScript file, the actual JavaScript code is placed in a file external to the HTML code. The external file can be called in and executed from anywhere in the HTML code. Developers can use an external JavaScript code stored in a js file (on a Webserver, Website, or in a Web application) and request for all the mentioned CSS and .js files when the server processes the main HTML script. Unlike inline JavaScript that is executed immediately, the Website takes additional time to load an external JavaScript, because there are multiple files to be fetched from an external source. To maintain the load speed, a developer can reduce the number of JavaScript files by keeping all the codes in a single JavaScript file and then using that file. This practice also enables easy debugging of the code. Hence, code maintenance is easier with an external JavaScript file than it is with an internal JavaScript file. Consider the following example of an HTML code of a Web page in which the content is sourced from an external JavaScript file named 'small.js'.

Balance between Requests and Cache-Ability

When an inline JavaScript code is embedded within an HTML code, no additional requests are made to the JavaScript resources placed externally. In case the JavaScript file is bulky and is not changed too frequently, the file should be stored as an external file at a location different from the HTML code on the Web page. The number of external script files should be finite. If there is a finite number of requests made to external script files in an HTML code, these external files are also cached by the Web browser. Therefore, a developer can reduce The time required to download external files from the browser by simply limiting the number of external scripts. Developers can further reduce the number of external files by concatenating several external files into a single file. Such a single file can be called with a single script tag. The best possible way to concatenate several files with different codes is to copy and paste the code present in all the JavaScript files into a single file. While doing so, make sure to check the sequence in which the concatenated code is placed in the file. If a function or part of code is called without defining the function, then the result would be an error. Such errors are hard to debug.

There are online tools for merging files, such as require.js (https://requirejs.org/) and merge.js (https://www.filesmerge.com/mergejavascript-files). These tools can merge files at runtime as well.

'Grouping' or 'Concatenating' JavaScript decreases the load time of a Web page which in turn gives a better user experience.

Blocking and Non-Blocking JavaScript Operations

A JavaScript operation is categorized as a blocking operation if it waits for the process to execute until an I/O operation is completed. On the other hand, a non-blocking operation does not wait for an I/O operation to be executed. Before understanding the concept of blocking and non-blocking operations in JavaScript, let us see what 'node.js' and 'callback' are and how they are implemented for blocking and non-blocking operations in JavaScript.

• Node.js and Callback:
  

Node.js is a cross-platform runtime environment that provides certain in-built JavaScript functionalities. Usually, Node functions do not perform I/O directly and hence, the processing happens uninterrupted. As there are no blockings, Node functions prove to be extremely effective in developing scalable systems. A callback is an asynchronous function, which means the function can handle multiple requests at the same time. Such functions are called on the completion of a specified task. APIs of Node.js are programmed to support callback function calls and use callback functions extensively. The following example displays how multiple connections can be handled in parallel using nodes. On establishing each node connection, a callback function is fired. However, when there are no calls available for a node, the callback function goes to sleep.

• What Is Blocking?:

Blocking means the execution of an additional JavaScript in the code execution must wait until a non-JavaScript operation completes. Typically, a delay in code execution occurs when an event loop (the order in which the code is executed) is unable to process JavaScript when a blocking operation is in progress. Usually, synchronous methods in the standard library of Node.js and libuv (I/O library within-built event loops) are common blocking operations. At times, in Node.js, CPU-intensive scripts of JavaScript perform I/O functions poorly. Such functions are not referred to as blocking. The operation of reading a file is a single-thread operation and should be executed fully before another function can take place. When a thread invokes an operation such as read () or write(), then such a thread remains blocked until the respective function is carried out. Here, the thread remains engaged until some data is read or until the write()method is invoked successfully. Such a thread does not engage in anything else in the meantime.

• What Is Non-Blocking?:

Non-blocking in JavaScript means that the request for the I/O has been made and will be processed once the resources are freed. There are more than one ways to load JavaScript in a non-blocking manner. The most basic approach to do so is to dynamically create a script node.

If there is a script that is blocking, the page will not render the operation until the script is:

• Fully downloaded
• Parsed
• Executed

The load time of a blocked JavaScript is roughly equivalent to the amount of time a browser requires to render an operation. When an external script is loaded using a script fag, the load time required is far more than expected.

Understanding Non-Blocking I/O in JavaScript

At times, certain data is reserved for use of a process and no other process is allowed access to it. Though the data might or might not be in interaction with the disk, it would still block operation over I/O. Input as well as output, both kinds of operations are blocked. A non-blocking I/O operation enables a thread to ask and read data from a certain channel. In the case of the front-end, data is read from trigger Callbackthe 'Event Loop' (Refer to the figure). If data is available, then it is fetched; otherwise, nothing is gathered.

It is possible to use the same thread for a different function until the readable data becomes available. Threads, when not blocked in I/O calls, perform I/O on another requestor on other channels present in the event loop. The event loop speeds up the processing time, improves the time required to read and write data, and improves error handling. The blocking approach operates synchronously, that is, it finishes the full process, from the beginning to the end, in one go. The non-blocking approach operates asynchronously. The non-blocking approach allows sending and receiving callbacks as tokens to and from where their operations are performed. Refer to the following example to understand how a file is read, both synchronously and asynchronously.