script 標(biāo)簽上有那些屬性

2025-07-16 10:37| 來(lái)源: 網(wǎng)絡(luò)整理| 查看: 265

以下是對(duì)標(biāo)簽上各個(gè)屬性的詳細(xì)解釋：

1. src 屬性定義： src 屬性用于指定要加載的外部腳本文件的 URL 地址。這個(gè) URL 可以是相對(duì)路徑（相對(duì)于當(dāng)前 HTML 文件所在的目錄），也可以是絕對(duì)路徑。示例：作用：允許將 JavaScript 代碼存儲(chǔ)在獨(dú)立的文件中，這樣可以實(shí)現(xiàn)代碼的模塊化和復(fù)用。通過(guò)將代碼存儲(chǔ)在外部文件中，不僅可以使 HTML 文件更簡(jiǎn)潔，還能在多個(gè) HTML 文件中共享相同的腳本，提高代碼的可維護(hù)性和組織性。同時(shí)，將腳本代碼與 HTML 分離，有助于更好地管理代碼版本和進(jìn)行代碼更新。 2. type 屬性定義：該屬性用于指定腳本的 MIME 類型。在 HTML5 及以后的標(biāo)準(zhǔn)中，JavaScript 腳本的默認(rèn) type 屬性值是 text/javascript，因此在很多情況下可以省略該屬性。示例： // JavaScript 代碼或在 HTML5 中更簡(jiǎn)潔的形式： // JavaScript 代碼作用：從理論上講，它允許引入不同類型的腳本語(yǔ)言，但在實(shí)際應(yīng)用中，幾乎總是用于引入 JavaScript 代碼。在早期的網(wǎng)頁(yè)開發(fā)中，一些瀏覽器可能支持多種腳本語(yǔ)言（如 VBScript），通過(guò) type 屬性可以明確指定所使用的腳本語(yǔ)言類型。不過(guò)，隨著 JavaScript 的廣泛使用，現(xiàn)在該屬性主要是為了向后兼容或在某些特定的場(chǎng)景下使用，一般默認(rèn)為 JavaScript 類型。 3. async 屬性定義：這是一個(gè)布爾屬性，當(dāng)存在時(shí)，表示腳本以異步方式加載和執(zhí)行。示例：作用：當(dāng)瀏覽器遇到帶有 async 屬性的標(biāo)簽時(shí)，會(huì)在后臺(tái)開始下載腳本文件，同時(shí)繼續(xù)解析 HTML 文檔。一旦腳本下載完成，會(huì)立即暫停文檔的解析，開始執(zhí)行該腳本。這種特性在提高頁(yè)面加載速度方面非常有用，尤其是對(duì)于一些不依賴于頁(yè)面 DOM 結(jié)構(gòu)的腳本，例如一些統(tǒng)計(jì)分析腳本、廣告腳本等。它可以讓頁(yè)面在腳本下載的同時(shí)繼續(xù)加載其他內(nèi)容，避免了對(duì)整個(gè)頁(yè)面解析和渲染過(guò)程的阻塞。但需要注意的是，多個(gè) async 腳本的執(zhí)行順序是不確定的，因?yàn)樗鼈兪悄膫€(gè)先下載完成哪個(gè)就先執(zhí)行，可能會(huì)導(dǎo)致腳本之間的依賴問(wèn)題，因此對(duì)于有依賴關(guān)系的腳本需要謹(jǐn)慎使用。 4. defer 屬性定義：同樣是一個(gè)布爾屬性，它會(huì)使腳本在后臺(tái)下載，但會(huì)延遲到整個(gè) HTML 文檔解析完成后，在 DOMContentLoaded 事件觸發(fā)之前執(zhí)行。示例：作用：與 async 屬性類似，旨在優(yōu)化頁(yè)面的加載性能。不過(guò)，defer 屬性確保了腳本會(huì)在 DOM 解析完成后，按照標(biāo)簽在 HTML 文檔中的順序依次執(zhí)行。對(duì)于那些需要作 DOM 元素但又不希望阻塞頁(yè)面解析的腳本，使用 defer 屬性可以保證腳本執(zhí)行時(shí) DOM 元素已經(jīng)準(zhǔn)備好，并且能按照代碼中標(biāo)簽的先后順序執(zhí)行，避免了 async 屬性可能導(dǎo)致的執(zhí)行順序混亂問(wèn)題，非常適合那些需要在 DOM 準(zhǔn)備好之后才可以安全執(zhí)行的腳本。 5. charset 屬性定義：用于指定外部腳本文件的字符編碼。在現(xiàn)代網(wǎng)絡(luò)開發(fā)中，通常默認(rèn)使用 UTF-8 編碼，并且大多數(shù)服務(wù)器會(huì)在響應(yīng)頭中正確設(shè)置字符編碼。示例：作用：在某些特殊情況下，當(dāng)服務(wù)器沒(méi)有正確設(shè)置腳本文件的字符編碼，或者需要使用除 UTF-8 之外的字符編碼時(shí)，charset 屬性可以確保瀏覽器能夠正確解析腳本文件。但在一般情況下，這個(gè)屬性使用較少，因?yàn)?UTF-8 編碼已成為網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)，并且服務(wù)器通常會(huì)正確處理字符編碼問(wèn)題。 6. crossorigin 屬性定義：該屬性用于配置跨域請(qǐng)求腳本的 CORS（跨域資源共享）設(shè)置，其值可以是 anonymous（默認(rèn)）、use-credentials 等。示例：作用：當(dāng)從不同的源（域名、協(xié)議或端口）加載腳本時(shí)，使用 crossorigin 屬性可以控制如何進(jìn)行跨域請(qǐng)求。anonymous 表示在跨域請(qǐng)求時(shí)不發(fā)送憑據(jù)（如 cookie 或 HTTP 認(rèn)證信息），而 use-credentials 表示在跨域請(qǐng)求時(shí)會(huì)發(fā)送憑據(jù)。這對(duì)于需要獲取腳本文件的錯(cuò)誤信息或?qū)缬蛘?qǐng)求進(jìn)行更高級(jí)別的安全和權(quán)限設(shè)置時(shí)非常重要，有助于防止跨域腳本加載時(shí)的安全問(wèn)題，確保跨域腳本加載符合 CORS 策略。 7. integrity 屬性定義：包含一個(gè)加密哈希值，基于 Subresource Integrity（SRI）機(jī)制，用于驗(yàn)證腳本文件在傳輸過(guò)程中是否被篡改。示例：作用：在從外部源（如 CDN）加載腳本時(shí)，通過(guò) integrity 屬性可以確保所加載的腳本的完整性和安全性。瀏覽器會(huì)根據(jù)該屬性中的哈希值對(duì)下載的腳本文件進(jìn)行驗(yàn)證，如果驗(yàn)證失敗（即文件內(nèi)容與哈希值不匹配），將不會(huì)執(zhí)行該腳本，從而防止惡意篡改或注入惡意腳本，保障了網(wǎng)頁(yè)的安全，防止惡意代碼對(duì)網(wǎng)站的攻擊。

通過(guò)合理使用標(biāo)簽的這些屬性，可以更好地管理腳本的加載順序、執(zhí)行時(shí)間、跨域問(wèn)題和安全性，以實(shí)現(xiàn)更高效、更安全的網(wǎng)頁(yè)開發(fā)。

本文來(lái)自博客園，作者：jialiangzai，轉(zhuǎn)載請(qǐng)注明原文鏈接：https://www.cnblogs.com/zsnhweb/p/18646189

【本文地址】

公司簡(jiǎn)介

聯(lián)系我們

今日新聞

推薦新聞

專題文章