窥探 Script 标签（步入现代 Web 开发的魔法世界）

gaosboy 发布于2019-08-01 17:13 / 3024人阅读

摘要：而且默认带有执行的顺序是，，即便是内联的，依然具有属性。模块脚本只会执行一次必须符合同源策略模块脚本在跨域的时候默认是不带的。通常被用作脚本被禁用的回退方案。最后标签真的令人感到兴奋。

窥探 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

私有云超融合服务器简单的web开发问题 web前端开发师的前景打造现代 Web 工程体系改变script的js文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
割裂的前端工程师--- 2017年前端生态窥探

摘要：主要兼容的微信的浏览器，因为要在朋友圈来营销，总体来说，会偏设计以及动画些。有一天，我们组内的一个小伙伴突然问我，你知道有一个叫重构工程师的岗位？这是干什么的？重构工程师这个问题引发了我对前端领域发展的思考，所以我来梳理下前端领域的发展过程，顺便小小的预测下2017年的趋势。不想看回忆的，可以直接跳到后面看展望。神说，要有光，就有了光自1991年蒂姆·伯纳斯-李公开提及HTML...

h9911 2019-08-05 10:31 评论0 收藏0