- Methods of adding scripts
- JS in event elements
- Connecting JS considering deferred/asynchronous scripts
- Increasing the mass of a web resource
- How to optimize JS on the page?
- Wrapping Up
Methods of adding scripts
Any script must be inserted into HTML exclusively with the help of <script> tag. You can insert a link to an external document or code directly between the opening and closing tags. Nowadays, <script> can be placed in the <head> component and the web page’s body.
This technique enables the simultaneous placement of many scripts on a single web page. Nevertheless, how would a web browser run hosted scripts in such a scenario? The majority of the time, they are loaded immediately and then executed. It is vital to remember that the program examines the HTML file from top to bottom. As a result, whenever it sees a tag like this, it interprets the information as a script and executes it.
The rest of the data on the web page will not be loaded and displayed until the system executes all the code in the <script>.
Most of the time, it is best to load the script straight from an external document. This option is used when a standard JS file needs to be loaded from an external source. Developers frequently use the jQuery library to accomplish it. Another possibility is that the downloading script is a sizable Internet application created independently of the website by experts. If a program is required by numerous sites, loading from a third-party file is a perfect solution.
The user must additionally use <script> to incorporate an external file. Between the opening and closing tags, you must write the direct path to the document, which has the .js extension, and where the corresponding combination is written, not the software code. The outcome of executing such a script, inserted via the above-described technique, is identical to the code stated on the HTML page.
Specifying any number of documents with the .js extension on a web page is possible. To run the corresponding script, they will be downloaded and activated. Let’s focus on the fact that these tags can be added anywhere on the page and are sequentially indicated one after the other.
JS in event elements
There is not always a need for the script to be executed by the system instantly, for example, immediately after the page is loaded. In most cases, it may be needed when a user performs a specific action, e.g., when a site visitor clicks on a selected button.
Here, the <script> element is inserted immediately in the <head> and is complemented by the <button> component. It explicitly states what action the system should take when the button is pressed to start the script. The on-click event will be activated when this action is taken.
Connecting JS considering deferred/asynchronous scripts
As mentioned above, all JS code files traditionally stop the HTML document parsing until the loading occurs and the script is implemented. It increases the time before the web page’s basic rendering. When <script> is written in the middle of the page, the part of the web page under the script will not be shown until the moment of its use. The corresponding behavior of the Internet browser is called synchronous.
It highlights to the Internet browser that the script will be executed non synchronously. Such a tag makes it clear to the system that it is not worth pausing HTML processing to load and implement the script. It means parsing the document and executing the script can be done simultaneously.
There is no guarantee that the script will be executed only in the order in which elements were added for samples where “async” is utilized. In some circumstances, the second script may run more quickly than the first one. Therefore, it’s crucial to make sure that there is no dependency between various components.
In simple terms, the attribute ensures the developer that script implementation only starts after the web browser has completed everything up to closing </html>. Likewise, unlike the “asynchronous” period, a particular order of implementation of all scripts with the “defer” component is preserved.
When the code allows dealing with HTML, the attribute is relevant. However, developers must also be entirely confident in rendering the entire page. It’s crucial to realize that because both components depend on the src element, they can only be used with external JS files.
Increasing the mass of a web resource
According to the latest statistics since 2018, the average weight of a web page is 1720 kilobytes. For eight years, the indicator has increased by more than 3.5 times. There can be many reasons for increasing the mass of the website, for example, the use of heavy graphics or a growth in the proportion of external JS files.
Knowing how to eliminate the reason behind the web resource’s slowness is also indispensable knowledge. It is insufficient to grasp how to connect the js library to HTML. Users might have to wait a while for the page to fully load before entering any data. Additionally, the page frequently moves in jerks even when the interface loads as rapidly as possible.
Those using a mobile device cannot download the page as rapidly as those using a laptop or personal computer. Therefore, they exit the service.
How to optimize JS on the page?
The execution order is another crucial variable. Web browsing software builds DOM components as it moves through the HTML file and renders a page to the user from top to bottom. The JS will only be opened at the very last second if the developer places the tags at the end of the content. It won’t significantly affect the crucial rendering path as a result.
On the other hand, when placing the tag at the very beginning of the page, the browser executes the script in the first place and then displays the rest of the data. It is one of the primary reasons the download is slow-paced and faces some problems. Therefore, it is recommended to move the location of non-critical scripts to the very end of the page:
- analytical tools;
- calculators, etc.
Asynchronous loading is a more effective way to address the issue of sluggish third-party scripts appearing on webpages. Utilizing the async attribute, browsers can render the rest of the page while waiting for these scripts to be downloaded and executed. This ultimately leads to improved performance of websites and smoother user experience.
It is better to use the delay tag if the recommended scripts depend on one another. With its aid, asynchronous page loading is within reach, but only after a specific order of script execution.