关于script标签
本文最后更新于:2020年11月1日 凌晨
<Script>标签
如下列举出script标签中的属性以及对应的值:
- src: 可选, 表示要执行的代码的外部文件地址;
- type:可选,代替了language,表示了脚本语言中的内容类型(也叫做MIME类型),按照惯例这个值始终都是“text/javascript”;如果这个值是“module”,则代表了代码会当成ES6模块,可以使用 import,export等关键字;
- XHTML中必须指定 type 属性, 并且只能是 text/javascript,
- async(翻译: 异步):可选,只对外部脚本有效(src),表示立即开始下载脚本,但是不阻止页面其他动作,比如下载资源或者等其他脚本加载;
- defer(翻译: 推迟): 可选,只对外部脚本有效(src),表示脚本可以延迟到文档背完全解析完成之后再执行;
- crossorigin:可选, 配置相关的CROS(跨资源共享),默认不设置CORS,
- crossorigin = “anonymous”,配置文件请求不必设置凭据标志;
- crossorigin = “use-credentials”, 设置凭据标志,意味着出站请求会包含凭据;
- integrity(翻译: 完整): 可选, 允许比对接收到资源和指定的加密签名以及验证子资源的完整性;如果不匹配那么页面要报错,脚本也不会执行;可以确保网页不会提供恶意内容;
执行方式
通过页面内部嵌入的javascript代码;
通过网页中包含的外部javascript代码;
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 如果在外部引入代码中间还写入了行内代码,那么会忽略其中的代码,只使用外部代码
// 当使用完整的URL指向外部代码,浏览器解析会使用 GET 请求获取资源
// 在不使用 defer 或者 async 属性时候,代码会从上向下一次解释,上一个解释完才会解释下一个
// 内部的代码
<script>
function sayHi() {
console.log("HI!")
}
</script>
// 引用外部代码, 使用外部代码也会阻塞
<script src="./index.js"></script>
包含在script中的代码会从上倒下依次解释,在script中的代码背解释完成之前,页面的其他内容不会被加载也不会被显示;
Script标签的位置
可以放在 head 标签内部,但是这样子,会等下载完成所有的资源才开始加载页面;
现代一般会把script标签放在body标签的内容后面:
1
2
3
4
5
6
7
8
9
10
11
12<body>
<div>
...内容
</div>
<script>
function sayHi() {
console.log("HI!")
}
</script>
<script src="./index.js"></script>
</body>
延迟执行脚本
defer属性:
- 脚本会延迟到等页面解析完成后再执行;可写在head中;最好还是写在页面底部;
- 虽然按照规定,多个defer脚本也要按照顺序执行,但是并不总是这样子的,因此最好只有一个这样的脚本;
- defer属性只对外部文件生效;
异步执行脚本
async属性:
- async属性只对外部文件生效;告诉浏览器立即执行;
- async属性的脚本一样不能按照他们出现的次序执行;
- 告诉浏览器不必等待脚本下载完成再加载页面;
- 同样也不用等待上一个脚本下载完成和执行之后再加载其他脚本;
- 异步脚本会保证再页面Load事件之前执行;
动态加载脚本
1 |
|
如果在代码中直接添加以上代码,那么会直接影响到脚本加载的顺序,我们最好应该先告诉浏览器的预加载器我们有一个动态脚本
1 |
|
行内代码与外部代码
尽可能的使用外部代码:
- 可维护性;
- 缓存:两个页面使用同一个外部脚本文件,只需要下载一次;
- 适应未来;如果未来不适应了,也不用注释过多的内容;
noscript元素
使用方式:
- 浏览器不支持脚本;
- 浏览器对脚本的支持关闭;
当出现上述两种情况的时候,那么noscript中的内容就会出现;同样写在了body标签内容的最后;
关于script标签
http://www.clearluv.com/2020/11/01/关于script标签/