问题：
- script标签中 integrity属性的作用
- crossorigin 属性如何携带凭据？
- defer属性的作用，defer属性加载的脚本执行顺序如何？
- async属性的作用，async属性加载的脚本执行顺序如何？
- JS动态加载脚本前，如何让浏览器预加载？
总结：
1.script标签用src引入了js文件后，不应该再在标签中再包含其他 JavaScript 代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。
2.可以引入外部域js文件，但恶意程序员会修改这个js文件，script的integrity 属性是防范这种问题的一个武器，但这个属性也不是所有 浏览器都支持。
3.推荐使用外部文件引入的方式，理由：
可维护性（单纯的js文件，不会和html代码混在一起）
缓存（如果多个html文件引入了同一个js文件，则该文件只需下载一次）
适应未来
4.在不使用 defer 和 async 属性的 情况下，包含在script元素的js代码必须严格按次序解释
5.通常应该把script元素放到页面末尾，介于主内容之后及标签 之前。
script标签中 integrity属性的作用？
当script标签引入外部的js文件资源时，如果接收的签名与这个属性指定的签名不匹配，则页面会报错， 脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提 供恶意内容。
src=”https://assets-cdn.github.com/assets/frameworks-3c926bc6b24bcd3e820b3d630df4174d158e3bdce67a60d06e62ed4a515096e7.js">
上面的代码来自github源码， integrity=”sha256-PJJrxrJLzT6CCz1jDfQXTRWOO9zmemDQbmLtSlFQluc=” 告诉浏览器，使用sha256签名算法对下载的js文件进行计算，并与intergrity提供的摘要签名对比，如果二者不一致，就不会执行这个资源。
intergrity 的作用有：
- 减少由【托管在CDN的资源被篡改】而引入的XSS 风险
- 减少通信过程资源被篡改而引入的XSS风险（同时使用https会更保险）
- 可以通过一些技术手段，不执行有脏数据的CDN资源，同时去源站下载对应资源
crossorigin 属性如何携带凭据？
crossorigin= “anonymous”配置文件请求不必设置凭据标志。crossorigin=”use-credentials”设置凭据 标志，意味着出站请求会包含凭据。
crossorigin 的作用有三个：
- crossorigin 会让浏览器启用CORS访问检查，检查http相应头的 Access-Control-Allow-Origin
- 对于传统 script 需要跨域获取的js资源，控制暴露出其报错的详细信息
- 对于 module script ，控制用于跨域请求的凭据模式
defer属性的作用，defer属性加载的脚本执行顺序如何？
作用：脚本可以延迟到文档完全被解析和显示之后再执行；只对外部脚本文件才有效
执行顺序：脚本会被延迟到整个页面都解析完毕后再运行，脚本之间会按顺序执行，在DOMContentLoaded 事件之前执行
async属性的作用，async属性加载的脚本执行顺序如何？
作用：表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其 他脚本加载。只对外部脚本文件有效。（用于脚本之间没有加载顺序的依赖）
执行顺序：不必等脚本下载和执行完后再加载页面，同样也不必等到 该异步脚本下载和执行后再加载其他脚本。脚本和脚本之间不一定会按顺序加载，也不会阻塞页面的加载；脚本的加载完成后就马上执行，脚本执行时会阻塞 HTML 解析。
JS动态加载脚本前，如何让浏览器预加载？
动态加载脚本：就是动态添加script元素，只要创建一个 script 元素并将其添加到 DOM 即可。
let script = document.createElement(‘script’);
script.src = ‘gibberish.js’;
document.head.appendChild(script);
以这种方式创建的
让浏览器预加载：要想让预加载器知道这些 动态请求文件的存在，可以在文档头部显式声明它们
若有收获，就点个赞吧
0 人点赞
