窺探 Script 標(biāo)簽（步入現(xiàn)代 Web 開發(fā)的魔法世界）

gaosboy 發(fā)布于2019-08-01 17:13 / 3254人閱讀

摘要：而且默認(rèn)帶有執(zhí)行的順序是，，即便是內(nèi)聯(lián)的，依然具有屬性。模塊腳本只會執(zhí)行一次必須符合同源策略模塊腳本在跨域的時候默認(rèn)是不帶的。通常被用作腳本被禁用的回退方案。最后標(biāo)簽真的令人感到興奮。

窺探 Script 標(biāo)簽 0x01 什么是 script 標(biāo)簽？

script 標(biāo)簽允許你包含一些動態(tài)腳本或數(shù)據(jù)塊到文檔中，script 標(biāo)簽是非閉合的，你也可以將動態(tài)腳本或數(shù)據(jù)塊當(dāng)做 script 的文本節(jié)點。就是內(nèi)聯(lián)腳本。

一般我們最常用的就是寫一些 JavaScript 腳本在 script 標(biāo)簽里，但是 script 也可以用來存儲一些數(shù)據(jù)，比如當(dāng)你設(shè)置 type="text/react" 的 script 時就可以在里面放 react 代碼，但是游覽器是不會執(zhí)行它無法識別的 type 的，因此 script 還可以用來存放一些臨時 APP 數(shù)據(jù)。

也可以通過 documents.scripts[0].text 獲取到第一個腳本的內(nèi)容，可以修改它，但是不會有任何作用。

0x02 src 屬性

當(dāng)你指定了 src 屬性時，外部腳本的內(nèi)容是不受腳本內(nèi)容限制的；同時你的 script 標(biāo)簽內(nèi)必須是空的。如果沒有指定 src，就稱這段腳本是內(nèi)聯(lián)的，內(nèi)聯(lián)腳本受到腳本內(nèi)容限制。

什么是腳本內(nèi)容限制？

所以看得出來，如果你使用打包工具，為了減少 CRP 而將腳本內(nèi)聯(lián)到文檔里，代碼要注意是否符合腳本內(nèi)容限制；如果你還壓縮了代碼，更需要注意這一點。

0x03 defer 和 async 屬性

0x04 type=module和 nomodule 屬性

在 script 中，默認(rèn)的 type="text/javascript"，還可以是 JavaScript MIME 中的任意一種。如果 script 里寫的是 JavaScript，推薦省略 type 屬性。不指定 defer 和 async 下的經(jīng)典腳本的執(zhí)行會阻塞 DOM 解析。

如果 type=module，則說明標(biāo)簽引用的是一個 ES 模塊。

// utils.js
export function addTextToBody(text) {
  const div = document.createElement("div");
  div.textContent = text;
  document.body.appendChild(div);
}

僅僅支持“裸導(dǎo)入”

// Supported:
import {foo} from "https://jakearchibald.com/utils/bar.js";
import {foo} from "/utils/bar.js";
import {foo} from "./bar.js";
import {foo} from "../bar.js";

// Not supported:
import {foo} from "bar.js";
import {foo} from "utils/bar.js";

支持 type=module 的游覽器會自動忽略帶有 nomodule 的 script 標(biāo)簽。方便你回退到不支持 module 的老式的用戶代理。

而且 type=module 默認(rèn)帶有 defer

執(zhí)行的順序是 2.js，1.js，3.js

即便是內(nèi)聯(lián)的 module，依然具有 defer 屬性。

模塊腳本只會執(zhí)行一次

必須符合同源策略

模塊腳本在跨域的時候默認(rèn)是不帶 credentials 的。

下圖可以很好的詮釋經(jīng)典腳本和模塊腳本加載的不同

模塊腳本的依賴層級的增加會不會導(dǎo)致 CRP 長度的增加？

上圖可以看出，層級很深的時候，用戶代理會花費大量的時間在等待依賴文件的傳輸和解析上，因此這會導(dǎo)致 CRP 長度的增加；不過 http2 push 的魔法使得用戶代理下載依賴文件的時間會大幅減少，服務(wù)器會分析模塊的依賴樹，然后在一次請求里回傳所有依賴文件給用戶代理。具體的討論可以看 Are ES6 modules in brwosers going to get loaded level-by-level 詳細(xì)討論了這個問題。

0x05 charset 屬性

給出腳本內(nèi)容的編碼方式；沒有 src 的 script 不能設(shè)置該屬性，模塊腳本強(qiáng)行按 utf8 來解析。

0x06 noscript 標(biāo)簽

noscript 標(biāo)簽告訴游覽器，如果你不支持腳本或腳本被禁用，那就顯示我里面的內(nèi)容。通常被用作腳本被禁用的回退方案。

0x07 最后

script 標(biāo)簽真的令人感到興奮。

如果你覺得我的文章不錯，可以關(guān)注我的

知乎專欄：挽起袖子搞前端

Segmentfault：mrcode的文章

技術(shù)博客：blog.mrcodex.com

推特：mrcodehang

新浪微博：Mr云航

0x08 參考文章

html.spec.whatwg.org/dev/scripting.html#scriptingLanguages

es6-modules-in-browsers-going-to-get-loaded-level-by-level

GPU云服務(wù)器云服務(wù)器簡單的web開發(fā)問題 web前端開發(fā)師的前景打造現(xiàn)代 Web 工程體系改變script的js文件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/51025.html

發(fā)表評論

登陸后可評論

0條評論

gaosboy

男|高級講師

我要關(guān)注我要私信

TA的文章

子網(wǎng)劃分及計算

閱讀 1506·2021-11-25 09:43
騰訊云服務(wù)器2月10日推薦,2核4G6M低至1499元/3年,100%CPU性能

閱讀 2147·2021-07-26 23:38
jQuery.extend()詳解

閱讀 814·2019-08-30 15:53
為你的網(wǎng)頁添加深色模式

閱讀 2370·2019-08-30 15:43
css animation 常用的動畫效果

閱讀 1251·2019-08-29 18:40
requestAnimationFrame 兼容方案

閱讀 2022·2019-08-26 13:28
前端面試知識點整理（附答案）

閱讀 2045·2019-08-23 18:20
裝飾器與元數(shù)據(jù)反射（4）元數(shù)據(jù)反射

閱讀 609·2019-08-23 15:07

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

窺探 Script 標(biāo)簽（步入現(xiàn)代 Web 開發(fā)的魔法世界）

相關(guān)文章