JS中的script標(biāo)簽

瀏覽器在解析這個(gè)資源時(shí)，會(huì)向 src 屬性指定的路徑發(fā)送一個(gè) GET 請求，以取得相應(yīng)資源，假定

是一個(gè) JavaScript 文件。這個(gè)初始的請求不受瀏覽器同源策略限制，但返回并被執(zhí)行的 JavaScript 則受限制。

當(dāng)然，這個(gè)請求仍然受父頁面 HTTP/HTTPS 協(xié)議的限制。

這段話主要涉及到同源策略（Same-Origin Policy）和跨源資源共享（CORS）在瀏覽器中的應(yīng)用。以下是對這段話的逐步解釋：

同源策略是一種安全機(jī)制，旨在防止一個(gè)網(wǎng)站的腳本與另一個(gè)網(wǎng)站的內(nèi)容進(jìn)行交互

同源（Same-Origin）是指兩個(gè) URL 具有相同的協(xié)議、域名和端口。只有在以下這三個(gè)條件都相同的情況下，瀏覽器才會(huì)認(rèn)為這兩個(gè) URL 是同源的。這是為了確保安全性，防止惡意網(wǎng)站通過腳本訪問另一個(gè)網(wǎng)站的內(nèi)容。

1.協(xié)議（如 HTTP 或 HTTPS）

2.域名（如?example.com）

3.端口（如?:80?或?:443）

--------------------------------------------------------------------------------

這意味著某些請求（例如，向第三方 API 發(fā)送請求）可以成功發(fā)送，即使它們不符合同源策略。這通常適用于以下情況：

- JSONP: 通過??標(biāo)簽請求數(shù)據(jù)，通常不受同源策略限制。

- 某些類型的請求: 比如使用?iframe?等方式加載外部內(nèi)容。

一旦請求的響應(yīng)是 JavaScript 代碼并被執(zhí)行，瀏覽器會(huì)檢查該 JavaScript 是否符合同源策略。如果不符合，則會(huì)限制該腳本的執(zhí)行，確保防止?jié)撛诘陌踩L(fēng)險(xiǎn)。

瀏覽器如何檢查 JavaScript 是否符合同源策略主要依賴于以下幾個(gè)方面：

當(dāng)網(wǎng)頁發(fā)送請求（如通過??標(biāo)簽、AJAX 或 Fetch API）時(shí)，瀏覽器會(huì)記錄該請求的來源（即發(fā)起請求的頁面的協(xié)議、域名和端口）。

當(dāng)接收到響應(yīng)（例如，一個(gè) JavaScript 文件）時(shí)，瀏覽器會(huì)檢查響應(yīng)中包含的內(nèi)容是否來自同源。如果響應(yīng)是一個(gè)腳本，瀏覽器會(huì)比較該腳本的來源與請求頁面的來源。

- 腳本標(biāo)簽: 當(dāng)使用??標(biāo)簽加載外部 JavaScript 文件時(shí)，瀏覽器會(huì)在加載該文件前檢查其來源。如果文件的 URL 不符合同源策略，瀏覽器會(huì)阻止該腳本的執(zhí)行。

- CORS

- : 對于通過 XMLHttpRequest 或 Fetch API 進(jìn)行的請求，允許跨源請求的方式是通過設(shè)置 CORS（跨源資源共享）頭來實(shí)現(xiàn)的。服務(wù)器需要在響應(yīng)中包含特定的 CORS 頭（如?Access-Control-Allow-Origin）來指示哪些源可以訪問其資源。

- Content Security Policy (CSP): CSP 是一種額外的安全層，可以幫助防止跨站腳本（XSS）攻擊。如果網(wǎng)站設(shè)置了 CSP，瀏覽器會(huì)根據(jù)策略限制哪些源的腳本可以執(zhí)行。

如果腳本的來源不符合同源策略，瀏覽器通常會(huì)在控制臺(tái)提供錯(cuò)誤信息，指示腳本無法被執(zhí)行。例如，可能會(huì)出現(xiàn)類似“跨源訪問被阻止”的錯(cuò)誤。

瀏覽器通過記錄請求和響應(yīng)的來源、比較它們的協(xié)議、域名和端口來檢查 JavaScript 是否符合同源策略。如果不符，瀏覽器將限制該腳本的執(zhí)行，從而保護(hù)用戶的安全。

HTTP/HTTPS 協(xié)議的限制

即使請求本身不受同源策略的限制，仍然需要遵循原頁面的 HTTP 或 HTTPS 協(xié)議。例如：

- 如果父頁面使用 HTTPS，嘗試通過 HTTP 加載資源可能會(huì)被瀏覽器阻止。為了安全，混合內(nèi)容（HTTP 和 HTTPS 的結(jié)合）通常是被禁用的。

注意:

1.defer 屬性只對外部腳本文件才有效。

2.對于 XHTML 文檔，指定 defer 屬性時(shí)應(yīng)該寫成 defer="defer"。

3.順序執(zhí)行: 如果在頁面中有多個(gè)帶有?defer?屬性的??標(biāo)簽，瀏覽器會(huì)按照它們在文檔中出現(xiàn)的順序依次執(zhí)行這些腳本。

這個(gè)屬性表示腳本在執(zhí)行的時(shí)候不會(huì)改變頁面的結(jié)構(gòu)。也就是說，腳本會(huì)被延遲到整個(gè)頁面都解析完畢后再運(yùn)行。因此，在script標(biāo)簽上設(shè)置 defer 屬性相當(dāng)于告訴瀏覽器立即下載，但延遲執(zhí)行。

所以,假設(shè)有兩個(gè)推遲腳本,第一個(gè)推遲的腳本會(huì)在第二個(gè)推遲的腳本之前執(zhí)行，而且兩者都會(huì)在 DOMContentLoaded 事件之前執(zhí)行

模塊化是將代碼分割成小的、獨(dú)立的、可重用的部分（模塊），每個(gè)模塊可以單獨(dú)開發(fā)、測試和維護(hù)。JavaScript 的模塊化使得代碼組織更加清晰，提高了可維護(hù)性。

當(dāng)使用??標(biāo)簽并指定?type="module"?時(shí)，瀏覽器會(huì)將該腳本視為模塊。這意味著：

示例:

module.js:

在普通的??標(biāo)簽中定義的變量和函數(shù)會(huì)被添加到全局作用域，意味著它們可以在任何地方被訪問。

使用?let?和?const?定義的變量具有塊級(jí)作用域。它們只在定義它們的代碼塊（如函數(shù)、if 語句或循環(huán)）內(nèi)可用。