Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the role of deferred scripts in JavaScript?
We must be aware of the JavaScript application's loading speed while running any script on an HTML page. Performance problems never cause harm to the programme. When we include a <script> tag inside the HTML <head> tag, the programme uses more memory and performs worse. The location on the HTML page where we add our script also affects how quickly the programme loads. Therefore, to enhance the performance of the application, include the defer attribute within the script> element using the syntax <script defer src="">. defer attribute loads to promptly free up the necessary resources and boost efficiency. A boolean type attribute called defer exists.
Consider a scenario in which the browser is parsing the HTML code as it loads your website when it unexpectedly comes across a script tag. At that point, the browser halts parsing because it detects the script tag, which downloads the script from the network, loads it in your browser, and then executes it. After that script tag, the browser once again begins parsing. Because of the blocking nature this circumstance produces, loading times are slow.
The boolean attributes Defer have been introduced to the script tag as a solution to this problem. While ensuring that all scripts are downloaded, this attribute will not actually execute any scripts until the DOM is ready.
How Does the JavaScript Defer Tag Operate?
The following details describe how defer tag operates −
JavaScript has an attribute called defer, which preserves a boolean value of true or false.
JavaScript's defer attribute is being used to load JavaScript resources (<script> files) just after HTML document's core content has loaded.
The user does not have to wait to view the page's primary content after loading JavaScript tools; the remaining <script> files can be included afterwards.
Application performance is enhanced by loading core content before <script> files. In order to decrease the running duration of the application.
Syntax
<body> <script defer src="script.js"></script> //Your code goes here </body>
Similar to how the defer attribute works, the async attribute also loads JavaScript tools in the same way. However, if we declare the defer attribute in one <script> file and the async attribute in another <script> tag, and both are defined inside the HTML body, JavaScript gives first priority to the defer attribute.
Remember − Scripts will load in the order given by the defer attribute. Users can structure whichever script is read first using this method.
Example 1
In this example let us understand how to use defer script with paragraph content.
HTML Source Code − index.html
<!DOCTYPE html> <html> <title>What is the role of deferred scripts in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> h1 { text-align: center; color: green; } .firstPara { border-style: dashed; border-color: rgb(15, 157, 162); border-width: 2px; font-size: 19px; color: rgb(183, 45, 188); width: 900px; } .secondPara { border-style: dashed; border-color: rgb(194, 39, 11); border-width: 2px; font-size: 19px; color: rgb(26, 89, 205); width: 1040px; } </style> </head> <body> <h1>Welcome to TutorialsPoint</h1> <h1>Paragraph Text to Help You Understand the Defer Attribute</h1> <!--Including the defer attribute in the script file--> <script src="defer_file.js" defer></script> <p class="firstPara"> JavaScript's defer attribute is used to load JavaScript tools (script files) just after main HTML content has loaded.</p> <br> <p class="secondPara">The end user does not need to wait until the page's core content has loaded in JavaScript. The defer includes all the rest of files later</p> </body> </html>
JavaScript Source Code − defer_file.js
alert("After HTML content, I'm loading.");
Output
The above code will give the below output −
Explanation
The HTML content will be executed first when the application is first launched. Due to the fact that this programme is already cached in the browser cache, when the alert box is later executed, content may come first.
Example 2
In this example let us understand how to use defer script with buttons element.
HTML Source Code − index.html
<!DOCTYPE html> <html> <title>What is the role of deferred scripts in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body style="text-align: center; padding-top: 120px;"> <h1 style="color:green">Using Buttons to Understand Defer Attribute</h1> <!--Including script file with defer attribute--> <script src="defer_file.js" defer></script> <div class="container"> <button type="button" class="btn">Login</button> <button type="button" class="btn btn-default">Sign Up</button> <button type="button" class="btn btn-primary">Upload Form</button> <button type="button" class="btn btn-success">Success</button> </div> <br> <div class="container"> <button type="button" class="btn btn-info">Pay Fees</button> <button type="button" class="btn btn-warning">Download Receipt</button> <button type="button" class="btn btn-danger">Contact Us</button> <button type="button" class="btn btn-link">Comments</button> </div> </body> </html>
JavaScript Source Code − defer_file.js
alert("The execution of the buttons will come first, then an alert will appear.");
Output
The above code will give the below output −
Explanation
The HTML content and buttons is executed first when the application is launched for the first time. Due to the fact that this programme is already cached in the browser cache, the content could be executed later after the alert box.
Example 3
In this example let us understand how to use defer script with Navigation Bar.
HTML Source Code − index.html
<!DOCTYPE html> <html> <title>What is the role of deferred scripts in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <h1 style="color: green;text-align: center; padding-top: 120px;">Using Navigation Bar to Understand Defer Attribute</h1> <!--Including script file with defer attribute--> <script src="defer_file.js" defer></script> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="active"><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Career</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </nav> </body> </html>
JavaScript Source Code − defer_file.js
alert("Deferred alert is executed after the execution of the Navigation Bar");
Output
The above code will give the below output −
Explanation
The HTML content and Navigation Bar is executed first when the application is launched for the first time. Because of the fact that this programme is already cached in the browser cache, the content could be executed later after the alert box.
1K+ Views
