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

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

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

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

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

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

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

0x02 src 屬性

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

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

0x04 type=module和 nomodule 屬性

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

如果 type=module，則說明標(biāo)簽引用的是一個(gè) 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 的游覽器會(huì)自動(dòng)忽略帶有 nomodule 的 script 標(biāo)簽。方便你回退到不支持 module 的老式的用戶代理。

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

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

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

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

必須符合同源策略

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

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

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

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

0x05 charset 屬性

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

0x06 noscript 標(biāo)簽

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

0x07 最后

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

如果你覺得我的文章不錯(cuò)，可以關(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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51025.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

gaosboy

男|高級(jí)講師

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

TA的文章

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

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

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

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

閱讀 2289·2019-08-30 15:43
css animation 常用的動(dòng)畫效果

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

閱讀 1981·2019-08-26 13:28
前端面試知識(shí)點(diǎn)整理（附答案）

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章