- Methods of adding scripts
- Integration with an external JavaScript file
- 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
The most popular programming language for creating web resources is JavaScript, also known as JS. Modern browsers support JavaScript via HTML script tags without the need to install additional plugins. JavaScript must be loaded and executed at the same time as markup. This can be done within the HTML document or in a separate file that the browser downloads at the same time as the HTML. Additionally, it is regarded as the primary tool that helps to bring more life to Internet pages. Therefore, many inexperienced developers would wonder how to connect a JS script to HTML. In this article, we’ll go through all the options and strategies of how to link JavaScript code and a file directly to an HTML document.
Methods of adding scripts
There are currently two ways to perform this task: by embedding the code in a file or connecting an external JavaScript page.
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>.
Integration with an external JavaScript file
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.
Adding JavaScript code to HTML by integrating an external script and specifying a combination is restricted. The developer should select one of two options.
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.
Problems may arise if the system loads multiple JavaScript documents simultaneously. It dramatically lengthens the rendering process. Additional “defer” and “async” components in the script element can be used to overcome the issue.
<async>
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.
<defer>
The component holds off on running the script until the entire page has loaded. JavaScript can be loaded concurrently with HTML, just like asynchronous script loading. The script won’t be performed until the procedure is finished, even if the system fully loads the JS page before the site has finished processing.
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.
Developers need to understand not only how to connect a JavaScript file to HTML but also that loading scripts directly affects performance characteristics. Take a look at this instance – pictures on a web page have practically no effect on the metric (the period before displaying interactivity) since they do not intercept the loading of interface components. However, scripts in this situation are on the critical rendering path. Consequently, it is forbidden to increase the number of scripts on a web resource indefinitely.
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?
JavaScript must be enabled on the majority of websites and other web projects. The website’s speed as a whole, in addition to the performance of any given functionality on the pages, determines the accuracy of script writing. Users and search engines are much more committed to projects whose pages load quickly, even with terrible Internet connections. You can achieve it by optimizing JavaScript scripts on a website or application.
There are several ways to make JavaScript run smoothly on a web page. While adding scripts to a website, you must consider various characteristics, such as limit. It is essential to understand that all pages have their limit in terms of the number of scripts and the period. To get the most favorable service loading on smartphones, professionals recommend keeping the figure at 200 KB of compressed scripts. It opens the door for unpacking more than 1 MB of web browser code.
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:
- advertising;
- 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.
Wrapping Up
Nowadays, numerous junior and middle experts ask how to connect JavaScript files to HTML. The article discussed all the common ways to link JS files to HTML documents. Incorporating different scenarios into websites is made possible by using these techniques, which enable site owners to analyze, regulate the number of user clicks, and perform other duties.
Using JavaScript makes your site’s pages more dynamic and functional. However, the more features and dynamics your project provides, the more scripts you need to write and connect, which can become a burden. A good developer is always seeking ways to optimize JS scripts on the pages of the project.
JavaScript’s optimization is a crucial tool that enables you to execute the required concepts without overloading the website and making users wait for it to load. An integrated approach helps develop web resources by integrating JS into them. So there will be no negative consequences on the target audience, and will not be displayed on their stay on the site.
