【HTML】淺談 script 標簽的 defer 和 async

The async and defer attributes are boolean attributes that indicate how the script should be evaluated. There are several possible modes that can be selected using these attributes, depending on the script’s type.
async 和 defer 屬性是布爾屬性,它們指示腳本應該如何被評估。可以使用這些屬性選擇幾種可能的模式,具體取決于腳本類型。

For external classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes). If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.
對于外部經典腳本,如果存在 async 屬性,則經典腳本將在解析的同時并行獲取,并在可用時立即評估(可能在解析完成之前)。如果不存在 async 屬性但存在 defer 屬性,則經典腳本將并行獲取,并在頁面解析完成后評估。如果這兩個屬性都不存在,則腳本將立即獲取并評估,阻塞解析直到這些操作都完成。

For module scripts, if the async attribute is present, then the module script and all its dependencies will be fetched in parallel to parsing, and the module script will be evaluated as soon as it is available (potentially before parsing completes). Otherwise, the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing. (The defer attribute has no effect on module scripts.)
對于模塊腳本,如果存在 async 屬性,則模塊腳本及其所有依賴項將在解析的同時并行獲取,模塊腳本將在可用時立即評估(可能在解析完成之前)。否則,模塊腳本及其依賴項將并行獲取,并在頁面解析完成后評估。( defer 屬性對模塊腳本沒有影響。)

This is all summarized in the following schematic diagram:
所有這些內容都總結在下方的示意圖中:

在這里插入圖片描述

The defer attribute may be specified even if the async attribute is specified, to cause legacy web browsers that only support defer (and not async) to fall back to the defer behavior instead of the blocking behavior that is the default.
即使指定了 async 屬性,也可以指定 defer 屬性,以使僅支持 defer (但不支持 async )的舊版網絡瀏覽器回退到 defer 行為,而不是默認的阻止行為。

參考資料

HTML Standard. https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/91647.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/91647.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/91647.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Kafka Streams 并行處理機制深度解析:任務(Task)與流線程(Stream Threads)的協同設計

在構建實時流處理應用時,如何充分利用計算資源同時保證處理效率是一個關鍵問題。Kafka Streams 通過其獨特的任務(Task)和流線程(Stream Threads)并行模型,為開發者提供了既簡單又強大的并行處理能力。本文將深入解析 Kafka Streams 中任務與線程的協同工…

使用 Docker 部署 Label Studio 時本地文件無法顯示的排查與解決

目錄 使用 Docker 部署 Label Studio 時本地文件無法顯示的排查與解決 1. 背景 2. 問題現象 3. 排查步驟 3.1 確認文件是否存在 3.2 檢查環境變量配置 4. 解決方案 方法一:修改 Sync Storage 路徑(相對路徑) 方法二:修改…

ElasticJob怎么使用?

我們使用ElasticJob需要以下步驟: 1. 添加依賴 2. 配置任務(可以使用Spring命名空間配置或Java配置) 3. 實現任務邏輯(實現SimpleJob、DataflowJob等接口) 4. 啟動任務 下面是一個詳細的示例,包括Spring Bo…

TCP協議的特點和首部格式

文章目錄TCP協議是什么?TCP協議的主要特點1. 面向連接2. 可靠傳輸3. 流量控制4. 擁塞控制TCP首部格式源端口和目標端口(各16位)序列號(32位)確認號(32位)數據偏移(4位)保…

IO流-文件的常用方法

1.關于java.io.File類- File類只能表示計算機中的文件或目錄而不能獲取或操作文件- 通過File類獲得到文件的基本信息,如文件名、大小等,但不能獲取文件內容- java中表示文件路徑分隔符使用"/"或"\\"- File類中的構造方法- File(&quo…

AUTOSAR進階圖解==>AUTOSAR_SRS_E2E

AUTOSAR E2E通信保護解析 AUTOSAR End-to-End通信保護機制詳解與應用目錄 概述 1.1. AUTOSAR E2E通信保護的作用 1.2. E2E通信保護的應用場景AUTOSAR E2E架構 2.1. E2E組件層次結構 2.2. E2E庫和E2E轉換器E2E監控狀態機 3.1. 狀態定義與轉換 3.2. 狀態機實現E2E保護數據交換流…

鏡像快速部署ollama+python+ai

算力租賃入口:https://www.jygpu.com為大家提供以上鏡像快速部署方式,節約大家環境部署時間一鍵部署的便捷性傳統自建GPU服務器需要經歷復雜的硬件采購、驅動安裝、環境配置等繁瑣步驟,而現代??GPU租賃價格對比??顯示,容器化平…

使用Gemini API開發領域智能聊天機器人的思路

以下是使用 Gemini API 開發軟件自動化測試專家領域專屬智能聊天機器人的詳細思路及具體實現過程: 階段一:基礎準備與規劃 (Foundation & Planning) 這個階段的目標是明確方向、準備好所有必要的工具和憑證。 步驟 1:明確聊天機器人的目…

第13屆藍橋杯Python青少組_省賽_中/高級組_2022年4月17日真題

更多內容請查看網站:【試卷中心 -----> 藍橋杯----> Python----> 省賽】 網站鏈接 青少年軟件編程歷年真題模擬題實時更新 第13屆藍橋杯Python青少組_省賽_中/高級組_2022年4月17日真題 一、選擇題 第 1 題 下列二進制數中最大的是( &a…

sqli-labs:Less-17關卡詳細解析

1. 思路🚀 本關的SQL語句為: $sql"SELECT username, password FROM users WHERE username $uname LIMIT 0,1"; $update"UPDATE users SET password $passwd WHERE username$row1";注入類型:字符串型(單引號…

文心一言:推動 AIGC 領域進步

文心一言:推動AIGC領域進步 關鍵詞:文心一言、AIGC、自然語言處理、多模態生成、大模型、技術架構、應用場景 摘要:本文深入剖析百度文心一言在AIGC(人工智能生成內容)領域的技術創新與實踐成果。通過解析其核心技術架構、多模態生成原理、工程化落地策略及行業應用案例,…

第15講——微分方程

文章目錄思維導圖基本概念微分方程及其階思維導圖 基本概念 微分方程及其階

RAGFlow Agent 知識檢索節點源碼解析:從粗排到精排的完整流程

RAGFlow Agent 知識檢索節點深度解析:從查詢到重排序的完整流程 1. 總體架構概覽 RAGFlow Agent 中的知識檢索(Retrieval)節點是整個RAG系統的核心組件,負責從知識庫中找到與用戶查詢最相關的文檔片段。檢索流程可以分為以下幾個…

Python算法實戰:從排序到B+樹全解析

Python中常見的算法示例 以下是Python中常見的算法示例,涵蓋基礎算法和經典問題解決方案,代碼可直接運行: 排序算法 冒泡排序 def bubble_sort(arr):n = len(arr)for i in range(n):for j in range(0, n-i-1):if arr[j] > arr[j+1]:arr[j], arr[j+1] = arr[j+1], arr…

【C++算法】85.BFS解決最短路徑問題_最小基因變化

文章目錄題目鏈接:題目描述:解法C 算法代碼:題目鏈接: 433. 最小基因變化 題目描述: 解法 先看懂題目 先把這個問題轉化:圖論問題 邊權為1的最短路問題。 為什么可以這么想?! 因為每…

基于單片機汽車少兒安全預警系統

文章目錄一、前言1.1 項目介紹【1】項目開發背景【2】設計實現的功能【3】項目硬件模塊組成【4】設計意義【5】市面上同類產品研究現狀【6】摘要1.2 設計思路1.3 系統功能總結1.4 開發工具的選擇【1】設備端開發【2】上位機開發1.5 模塊的技術詳情介紹1.6 框架圖框架圖說明&…

Mac 上配置jdk 環境變量

核心步驟是設置 JAVA_HOME 變量,并將其 bin 目錄添加到系統的 PATH 變量中。 macOS 從 Catalina (10.15) 版本開始,默認的終端 Shell 從 bash 切換到了 zsh。因此,你需要先確定你正在使用的 Shell,然后編輯對應的配置文件。步驟一…

硬件-音頻學習DAY1——音箱材料選擇:密度板為何完勝實木

每日更新教程,評論區答疑解惑,小白也能變大神!" 目錄 一.音箱材料選擇的關鍵因素 二.密度板的聲學優勢 三.材料穩定性的對比 四.生產工藝的適應性 五.成本與環保的平衡 六.特殊場景的例外情況 七.消費者選購指南 八.行業發展趨勢…

微波(Microwave)與毫米波(Millimeter wave)簡介

一、電磁波頻段劃分,微波與毫米波所屬 二、微波 可以看出UHF及以上的頻段都可以統稱為微波。記得之前上微波技術實驗課的時候會接觸比巴掌還大的金屬波導,后來每次看到微波技術的時候都還是感到陌生。今天突然想到,不像在手機里就能完成的5G頻…

ObjectMapper教程

ObjectMapper 簡介ObjectMapper 是 Jackson 庫的核心類,用于 Java 對象與 JSON 數據之間的相互轉換。它支持序列化(對象轉 JSON)和反序列化(JSON 轉對象),廣泛應用于 REST API、數據存儲和配置處理等場景。…