窺探 Script 標簽（步入現代 Web 開發的魔法世界）

gaosboy 發布于2019-08-01 17:13 / 3182人閱讀

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

窺探 Script 標簽 0x01 什么是 script 標簽？

script 標簽允許你包含一些動態腳本或數據塊到文檔中，script 標簽是非閉合的，你也可以將動態腳本或數據塊當做 script 的文本節點。就是內聯腳本。

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

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

0x02 src 屬性

當你指定了 src 屬性時，外部腳本的內容是不受腳本內容限制的；同時你的 script 標簽內必須是空的。如果沒有指定 src，就稱這段腳本是內聯的，內聯腳本受到腳本內容限制。

什么是腳本內容限制？

0x04 type=module和 nomodule 屬性

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

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

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

僅僅支持“裸導入”

// 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 標簽。方便你回退到不支持 module 的老式的用戶代理。

而且 type=module 默認帶有 defer

執行的順序是 2.js，1.js，3.js

即便是內聯的 module，依然具有 defer 屬性。

模塊腳本只會執行一次

必須符合同源策略

模塊腳本在跨域的時候默認是不帶 credentials 的。

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

模塊腳本的依賴層級的增加會不會導致 CRP 長度的增加？

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

0x05 charset 屬性

給出腳本內容的編碼方式；沒有 src 的 script 不能設置該屬性，模塊腳本強行按 utf8 來解析。

0x06 noscript 標簽

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

0x07 最后

script 標簽真的令人感到興奮。

如果你覺得我的文章不錯，可以關注我的

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

Segmentfault：mrcode的文章

技術博客：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云服務器簡單的web開發問題 web前端開發師的前景打造現代 Web 工程體系改變script的js文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51025.html

窺探 Script 標簽（步入現代 Web 開發的魔法世界）

摘要：而且默認帶有執行的順序是，，即便是內聯的，依然具有屬性。模塊腳本只會執行一次必須符合同源策略模塊腳本在跨域的時候默認是不帶的。通常被用作腳本被禁用的回退方案。最后標簽真的令人感到興奮。窺探 Script 標簽 0x01 什么是 script 標簽？ script 標簽允許你包含一些動態腳本或數據塊到文檔中，script 標簽是非閉合的，你也可以將動態腳本或數據塊當做 script 的...

Terry_Tai 2019-08-20 18:17 評論0 收藏0
優化關鍵渲染路徑

摘要：三種渲染流程實際場景下，大概會有三種常見的渲染流程注意和步驟是可避免的優化瀏覽器會在和加載完開始渲染頁面。優化避免阻塞解析器通過以上兩種方式引入均會阻塞，因而會阻塞出現在腳本后面的標記的渲染。瀏覽器渲染原理 showImg(https://segmentfault.com/img/remote/1460000009159494?w=538&h=507);showImg(https:/...

Integ 2019-08-20 17:43 評論0 收藏0
割裂的前端工程師--- 2017年前端生態窺探

摘要：主要兼容的微信的瀏覽器，因為要在朋友圈來營銷，總體來說，會偏設計以及動畫些。有一天，我們組內的一個小伙伴突然問我，你知道有一個叫重構工程師的崗位？這是干什么的？重構工程師這個問題引發了我對前端領域發展的思考，所以我來梳理下前端領域的發展過程，順便小小的預測下2017年的趨勢。不想看回憶的，可以直接跳到后面看展望。神說，要有光，就有了光自1991年蒂姆·伯納斯-李公開提及HTML...

duan199226 2019-08-30 13:15 評論0 收藏0
割裂的前端工程師--- 2017年前端生態窺探

摘要：主要兼容的微信的瀏覽器，因為要在朋友圈來營銷，總體來說，會偏設計以及動畫些。有一天，我們組內的一個小伙伴突然問我，你知道有一個叫重構工程師的崗位？這是干什么的？重構工程師這個問題引發了我對前端領域發展的思考，所以我來梳理下前端領域的發展過程，順便小小的預測下2017年的趨勢。不想看回憶的，可以直接跳到后面看展望。神說，要有光，就有了光自1991年蒂姆·伯納斯-李公開提及HTML...

miguel.jiang 2019-08-22 10:50 評論0 收藏0