了解非同步和延遲
- 王林原創
- 2024-08-09 01:58:42767瀏覽
這是流行的前端面試問題之一。它測試受訪者對 HTML、JS 和效能的了解。
這是前端面試問題系列的第 1 個問題。如果您希望提高準備程度或保持最新狀態，請考慮註冊 FrontendCamp。
script 標籤用於將 JavaScript 新增至 HTML 頁面。它可以是內聯腳本或外部腳本。
<body>
<!-- Some code before it -->
<script>
console.log("This is an inline script.");
</script>
<script src="https://example.com/external-script.js" />
<!-- Some code after it -->
</body>
在解析 HTML 時，如果瀏覽器遇到 script 標籤，它將停止 HTML 解析並開始執行 JS 腳本。如果它是內聯的，它將立即開始執行，但如果它是外部腳本，它將下載然後執行。
在此期間，當JS腳本正在下載並執行時，HTML解析被阻塞。只有瀏覽器執行完 JS 腳本後才能恢復。
你看出這裡出了什麼問題嗎？這將為最終用戶帶來效能問題。如果我們有很多腳本或某個腳本需要很長時間來執行，使用者將很長時間看不到頁面的內容。
為了解決這個問題，我們有兩個屬性：async 和 defer。
非同步
如果存在 async 屬性，則腳本將在解析 HTML 的同時並行下載，並在可用時立即執行。
如果多個腳本使用 async 屬性，執行順序可能與它們在 HTML 中出現的順序不同。最先可用的腳本將首先執行。
<body> <!-- Some code before it --> <script async src="https://example.com/external-script.js" /> <!-- Some code after it --> </body>
延遲
如果存在 defer 屬性，腳本將與 HTML 解析並行下載（就像非同步一樣），但在 HTML 解析完成後、觸發 DOMContentLoaded 之前執行。
如果多個腳本使用 defer 屬性，執行順序將保持不變，與 async 不同。
<body> <!-- Some code before it --> <script defer src="https://example.com/external-script.js" /> <!-- Some code after it --> </body>
概括
- 非同步和延遲下載腳本都不會阻止 HTML 解析。
- 非同步腳本將在可用時立即執行。它可能會阻止 HTML 解析。
- defer 腳本只會在 HTML 解析完成後、觸發 DOMContentLoaded 之前執行。
- 如果執行順序無關緊要且腳本不修改 DOM，請使用非同步。
- 如果執行順序很重要或腳本修改了 DOM，請使用 defer。
- 另請注意，這些屬性不適用於內嵌腳本，即沒有 src 屬性的腳本。
- 如果同時新增了 async 和 defer，則 async 優先。
資源
MDN：腳本元素
前端營地
以上是了解非同步和延遲的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn