摘要:而且默认带有执行的顺序是,,即便是内联的,依然具有属性。模块脚本只会执行一次必须符合同源策略模块脚本在跨域的时候默认是不带的。通常被用作脚本被禁用的回退方案。最后标签真的令人感到兴奋。
窥探 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,就称这段脚本是内联的,内联脚本受到脚本内容限制。
什么是脚本内容限制?
所以看得出来,如果你使用打包工具,为了减少 CRP 而将脚本内联到文档里,代码要注意是否符合脚本内容限制;如果你还压缩了代码,更需要注意这一点。
0x03 defer 和 async 属性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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/84289.html
摘要:而且默认带有执行的顺序是,,即便是内联的,依然具有属性。模块脚本只会执行一次必须符合同源策略模块脚本在跨域的时候默认是不带的。通常被用作脚本被禁用的回退方案。最后标签真的令人感到兴奋。 窥探 Script 标签 0x01 什么是 script 标签? script 标签允许你包含一些动态脚本或数据块到文档中,script 标签是非闭合的,你也可以将动态脚本或数据块当做 script 的...
摘要:主要兼容的微信的浏览器,因为要在朋友圈来营销,总体来说,会偏设计以及动画些。 有一天,我们组内的一个小伙伴突然问我,你知道有一个叫重构工程师的岗位?这是干什么的?重构工程师 这个问题引发了我对前端领域发展的思考,所以我来梳理下前端领域的发展过程,顺便小小的预测下2017年的趋势。不想看回忆的,可以直接跳到后面看展望。 神说,要有光,就有了光 自1991年蒂姆·伯纳斯-李公开提及HTML...
摘要:主要兼容的微信的浏览器,因为要在朋友圈来营销,总体来说,会偏设计以及动画些。 有一天,我们组内的一个小伙伴突然问我,你知道有一个叫重构工程师的岗位?这是干什么的?重构工程师 这个问题引发了我对前端领域发展的思考,所以我来梳理下前端领域的发展过程,顺便小小的预测下2017年的趋势。不想看回忆的,可以直接跳到后面看展望。 神说,要有光,就有了光 自1991年蒂姆·伯纳斯-李公开提及HTML...
阅读 1376·2021-11-15 18:11
阅读 2508·2021-08-19 10:56
阅读 669·2021-08-09 13:42
阅读 785·2019-08-30 15:53
阅读 2078·2019-08-30 10:55
阅读 3136·2019-08-29 17:18
阅读 1426·2019-08-29 13:45
阅读 537·2019-08-29 13:15