資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML5中非同步執行指令碼？
script標籤用於使網頁動態化，但是大量的指令碼可能會導致網頁渲染緩慢，最終導致使用者體驗差。為了解決這個問題，我們非同步執行網頁中的指令碼，即javascript與其他網站元素並行下載，並在下載完成後立即開始執行。
要非同步載入指令碼，常用的兩種方法是
async屬性：指令碼並行下載，並在下載完成後立即開始執行。
defer屬性：指令碼並行下載，只有在頁面解析過程完成後才開始執行。
如果沒有這些屬性中的任何一個，指令碼將在下載後立即開始執行，這也導致阻塞解析過程。
方法一：async屬性
在這個例子中，我們將研究如何使用JavaScript中可用的async標籤非同步執行指令碼。
語法
<script src="..." async></script>
async是一個布林屬性，在<>內定義時為true，否則預設為false。
演算法
步驟1：使用HTML標籤定義網頁框架
步驟2：使用<script>標籤匯入指令碼
步驟3：在<script>標籤中新增async屬性
示例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Async Javascript</title>
</head>
<body>
<h1>Tutorials Point</h1>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" async></script>
<!-- Loaded after sometime if aysnc attribute is removed -->
<h3>Welcome to Tutorials point</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla debitis deleniti harum perferendis quisquam,
cum dignissimos ex laborum saepe pariatur sapiente dolores possimus autem quam voluptates commodi a eveniet facere!
</p>
<button onclick="window.location.reload()">Reload</button>
</body>
</html>
使用async時，有一些重要事項需要注意
無論它們在HTML檔案中的位置如何，具有async屬性的指令碼在下載完成後立即開始執行。這意味著如果指令碼依賴於其他尚未完成載入的資源（例如影像或樣式表），則指令碼可能會導致問題或意外行為。
HTML檔案中具有async屬性的指令碼的執行順序是未知的。如果執行順序很重要，當一個指令碼依賴於另一個指令碼時，這可能會很麻煩。
具有async屬性的指令碼不會阻塞頁面的渲染。雖然提高了頁面的載入時間，但這也會導致內容未設定樣式或其他視覺故障的情況。
為了消除這些問題，HTML5提供了一個defer屬性，允許指令碼非同步下載，並確保依賴於其他資源的指令碼按正確的順序執行，從而減少錯誤或故障的可能性。
方法二：defer屬性
在這個例子中，我們將展示如何使用設定為true的defer屬性載入指令碼。
語法
<script src="..." defer></script>
defer是一個布林屬性，在<>內定義時為true，否則預設為false。
演算法
步驟1：使用HTML標籤定義網頁框架
步驟2：使用<script>標籤匯入指令碼
步驟3：在<script>標籤中新增defer屬性
示例
<!DOCTYPE html>
<html lang="en">
<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">
<title>Async Javascript</title>
</head>
<body>
<h1>Tutorials Point</h1>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
<!-- Loaded after sometime if defer attribute is removed -->
<h3>Welcome to Tutorials Point</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla debitis deleniti harum perferendis quisquam,
cum dignissimos ex laborum saepe pariatur sapiente dolores possimus autem quam voluptates commodi a eveniet facere!
</p>
<button onclick="window.location.reload()">Reload</button>
</body>
</html>
從輸出中我們可以看到，<h1>標題內容在網頁載入後立即載入，但<h3>和<p>內容載入稍後才載入，這是由於指令碼執行而阻塞的。但是，當在script標籤中使用async和defer屬性時，不會遇到此類問題。
結論
HTML5中的async/defer屬性允許非同步載入指令碼。當遇到具有async屬性的指令碼時，瀏覽器會在頁面仍在渲染時後臺下載指令碼。
HTML5中的async/defer屬性允許非同步載入指令碼。當遇到具有async屬性的指令碼時，瀏覽器會在頁面仍在渲染時後臺下載指令碼。
瀏覽量：332
