html元素及其屬性，相信大家都很熟悉，但是script的屬性，未必熟悉，故而整理總結，以待查閱。
前言
默認情況下，瀏覽器是同步加載 JavaScript 腳本，即渲染引擎遇到<script>標籤就會停下來，等到執行完腳本，再繼續向下渲染。如果是外部腳本，則先去下載腳本，再執行腳本，等到執行完腳本，再繼續向下渲染。
<script>標籤的屬性
1、src
定義引用外部腳本的URI，這可以用來代替直接在文檔中嵌入腳本。指定了 src 屬性的script元素標籤內不應該再有嵌入的腳本。
<script src="file.js"></script>2、type
該屬性定義script元素包含或src引用的腳本語言。屬性的值爲MIME類型;
只能是下面幾種方式:
- text/javascript（默認）
- text/ecmascript
- application/javascript
- application/ecmascript
<script src="demo.js" type="text/javascript"></script> 除了上面以上4中，還有一種
- module
即代碼會被當作JavaScript模塊處理。
<script type="module">
import {addTextToBody} from './utils.js';
addTextToBody('Modules are pretty cool.');
</script>type爲module時缺省爲defer方式。
3、async
該屬性指示瀏覽器是否在允許的情況下異步執行該腳本。該屬性對於沒有src屬性的腳本不起作用。
<script src="file.js" async></script>等同於下面
var script = document.createElement('script');
script.src = "file.js";
document.body.appendChild(script);
//從腳本中創建的腳本默認爲異步。瀏覽器支持： chrome，firfox，safari，IE10+都已經實現。
4、defer
這個屬性被設定用來通知瀏覽器“該腳本將在文檔完成解析後，觸發 DOMContentLoaded 事件前執行”。如果無src，則不起作用。
<script src="demo.js" defer></script>精髓就是一句話： 不管這段腳本放在html的何處(即使head中)，都會等待dom解析完成後再去加載。
如果將script標籤放在整個html文件的最後，那就不需要defer了，畫蛇添足。
瀏覽器支持： chrome，firfox，safari，IE10+都已經實現。
async和defer的區別:
defer要等到整個頁面正常渲染結束，纔會執行；
async是在渲染html時發現 腳本已經異步下載完，就去執行，執行完了，再繼續往下渲染html
5、crossorigin
使用本屬性來使那些將靜態資源放在另外一個域名的站點打印錯誤信息。
what??? 這個官方的解釋讓人很懵逼，別急。
由於使用普通的方式加載script，即下面這種
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>如果src中的跨站js文件，出現了錯誤。我們是無法通過監聽window.onerror來將錯誤準確的打印出來。只能打印出來"Script error"（當然瀏覽器控制檯可能會出來詳細錯誤，但我們無法在代碼中捕獲，並作出處理）
所以我們要添加crossorigin屬性來獲取跨站文件的錯誤信息。
首先，服務器要允許跨站獲取文件
access-control-allow-origin: *其次，在js中添加crossorigin
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"
crossorigin="anonymous">
</script>crossorigin的值爲:
anonymous 採用普通方式設置對此元素的CORS請求
use-credentials 採用憑證的方式設置對此元素的CORS請求
瀏覽器支持： 只有IE未實現，其他均實現。
6、integrity
提供hash值，來驗證覽器獲得的資源（例如從 CDN 獲得的）是否被篡改。
首先需要服務器開啓內容安全策略，即 Content-Security-Policy
Content-Security-Policy: require-sri-for script;
//加載script時需要進行校驗第二步，加入integrity值
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"
integrity="sha384-9u9lzb/hr8e14GLHe5TEOrTiH3Qtw5DX2Zw9X/g7cqj81W2McEMx5CKOszxdb8jg" crossorigin="anonymous"></script>integrity的值爲src文件進行base64編碼的值，可通過SRI在線生成工具生成。
如果integrity和src文件的hash值不匹配，則瀏覽器會報錯。
除了對script進行校驗外，同樣還可對style進行校驗
Content-Security-Policy: require-sri-for style;<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
integrity="sha384-xyZLiqnBEFn1hDkS8VeG/YHoqOjS/ucimT8TI6GDr9+ZP1UNbZr6d/q0ldMi/xvL" crossorigin="anonymous">瀏覽器支持： 只有chrome，firfox實現，safari，IE都未實現。