資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究JavaScript 中延遲指令碼的作用是什麼？
在 HTML 頁面上執行任何指令碼時，我們必須瞭解 JavaScript 應用程式的載入速度。效能問題永遠不會對程式造成損害。當我們在 HTML 的 <head> 標籤內包含 <script> 標籤時，程式會使用更多記憶體並且效能更差。我們在 HTML 頁面上新增指令碼的位置也會影響程式載入的速度。因此，為了提高應用程式的效能，請使用語法 <script defer src=""> 在 script> 元素內包含 defer 屬性。defer 屬性載入以快速釋放必要的資源並提高效率。defer 是一個名為布林型別的屬性。
假設瀏覽器正在解析 HTML 程式碼以載入您的網站，當它意外遇到一個指令碼標籤時。此時，瀏覽器會停止解析，因為它檢測到指令碼標籤，該標籤會從網路下載指令碼，將其載入到您的瀏覽器中，然後執行它。在該指令碼標籤之後，瀏覽器再次開始解析。由於此情況產生的阻塞性質，載入時間會變慢。
作為此問題的解決方案，布林屬性 Defer 已被引入指令碼標籤。在確保下載所有指令碼的同時，此屬性實際上不會執行任何指令碼，直到 DOM 準備就緒。
JavaScript Defer 標籤如何工作？
以下詳細資訊描述了 defer 標籤的工作方式：
JavaScript 具有一個名為 defer 的屬性，它保留 true 或 false 的布林值。
JavaScript 的 defer 屬性用於在 HTML 文件的核心內容載入後立即載入 JavaScript 資源（<script> 檔案）。
使用者無需等待檢視頁面載入 JavaScript 工具後的主要內容；其餘的 <script> 檔案可以在之後包含。
在 <script> 檔案之前載入核心內容可以提高應用程式效能。為了減少應用程式的執行時間。
語法
<body> <script defer src="script.js"></script> //Your code goes here </body>
與 defer 屬性的工作方式類似，async 屬性也以相同的方式載入 JavaScript 工具。但是，如果我們在一個 <script> 檔案中宣告 defer 屬性，而在另一個 <script> 標籤中宣告 async 屬性，並且兩者都在 HTML body 內定義，則 JavaScript 會優先考慮 defer 屬性。
請記住 - 指令碼將按照 defer 屬性給出的順序載入。使用者可以使用此方法構建首先讀取哪個指令碼。
示例 1
在此示例中，讓我們瞭解如何將 defer 指令碼與段落內容一起使用。
HTML 原始碼 - 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 原始碼 - defer_file.js
alert("After HTML content, I'm loading.");
輸出
以上程式碼將給出以下輸出：
解釋
當應用程式首次啟動時，HTML 內容將首先執行。由於此程式已快取到瀏覽器快取中，因此當稍後執行警報框時，內容可能會首先出現。
示例 2
在此示例中，讓我們瞭解如何將 defer 指令碼與按鈕元素一起使用。
HTML 原始碼 - 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 原始碼 - defer_file.js
alert("The execution of the buttons will come first, then an alert will appear.");
輸出
以上程式碼將給出以下輸出：
解釋
當應用程式首次啟動時，HTML 內容和按鈕將首先執行。由於此程式已快取到瀏覽器快取中，因此內容可能會在警報框之後執行。
示例 3
在此示例中，讓我們瞭解如何將 defer 指令碼與導航欄一起使用。
HTML 原始碼 - 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 原始碼 - defer_file.js
alert("Deferred alert is executed after the execution of the Navigation Bar");
輸出
以上程式碼將給出以下輸出：
解釋
當應用程式首次啟動時，HTML 內容和導航欄將首先執行。由於此程式已快取到瀏覽器快取中，因此內容可能會在警報框之後執行。
2K+ 次檢視
