HTML5 之 Script 标签_html5 script-CSDN博客

本文链接：https://blog.csdn.net/Don_GW/article/details/109066996

在这里插入图片描述

概述

script 用于嵌入或者引用可执行脚本。

其中可选属性如下。

type：用于定义脚本语言的 MIME 类型，包括text/javascript、text/ecmascript、application/javascript、application/ecmascript，注意HTML5中可以省略掉type，其默认值为text/javascript
src：指定引用的外部脚本的URL
defer：仅适用于外链，规定脚本延迟执行
async：仅适用于外链，规定脚本异步执行
integrity：用于验证获取的资源是否被篡改，若接收的资源的签名和integrity指定的签名不匹配，页面会报错，脚本也不会执行
crossorigin：浏览器启用CROS访问检查，属性值包括anonymous、use-credentials，若未指定属性值或非法属性值，浏览器默认采用anonymous

defer/async

一般的script标签都是会阻塞页面的解析，为了避免DOM的解析被阻塞，通常是将script标签放在html页面的底部。

defer在页面完成解析才执行代码（即DOM加载完毕，图片资源等还未下载），带有defer属性的script，其下载会与后续的文档元素的解析并行加载，而脚本会延迟到DOM解析完成，而在DOMContentLoaded之前执行。

带有async属性的script，其下载会与后续的文档元素的解析并行加载，但是只要script下载完成，那么就会立即执行，若此时DOM未加载完毕，则会阻塞DOM解析。

两者都是后续的文档元素的解析与脚本的下载并行执行，唯一不同在于脚本执行的时机，defer是延迟到DOM解析完成且DOMContentLoaded之前执行，而async则是在下载完立即执行，若DOM未加载完毕，则其解析会被阻塞。

更多阻塞问题参考关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析。

integrity

如下告知浏览器使用sha256签名算法对下载的js文件进行计算，并且与integrity提供的签名进行对比，若二者不一致，就不会执行此脚本。

integrity一般是是对 CDN 上的静态文件使用。CDN虽然好用但是 CDN有可能被劫持，导致下载的文件是被篡改过的，有了integrity就可以检查文件是否是原版。而本地文件用的域名跟网页是同一个域名，不存在劫持的问题，所以本地静态文件没有必要用此属性。

<script integrity="sha256-PJJrxrJLzT6CCz1jDfQXTRWOO9zmemDQbmLtSlFQluc=" src="https://xxx.xxx.js"></script>

crossorigin

当网页引入跨域的脚本时，若此脚本有错误，由于浏览器的限制（根本原因是协议的规定），是获取不到错误信息的。在本地尝试window.onerror去捕获脚本的错误时，跨域脚本的错误只会返回Script error。

而HTML5规定是可以允许本地获取到跨域脚本的错误信息的，但是要满足两个条件，一是跨域脚本的服务器必须通过Access-Control-Allow-Origin头信息允许当前域名可以获取错误信息，二是script标签必须指明src属性指定的地址是支持跨域的地址，即crossorigin属性，详细参考 MDN。