在html中使用javascript
1.內嵌式：
一般在<body>標簽的尾部添加<script>標簽，并且指定type="text/javascript"
比如這樣：
<html>
<head>
</head>
<body>
<!--內容-->
<script type="text/javascript">
console.log('Tag should be here');
</scipt>
<body>
</html>
這樣的好處是：
- 避免腳本加載阻塞文檔渲染
- 避免腳本操作DOM時文檔流未渲染完畢導致獲取DOM元素失敗。
看個例子：
<html>
<head>
<script type = "text/javascript">
let btn = document.getElementsByTagName('button')[0];
// do sth with btn
// error
</script>
</head>
<body>
<!-- content here -->
<button>按鈕</button>
</body>
</html>
報錯:
原因是先加載了腳本內的內容，而此時文檔流未渲染，并沒有<button>標簽存在，所以獲取button得到的結果為
undefined.
解決辦法
將script里的內容放置到window.onload{ }里，在文檔加載完成后會觸發load事件。此時，在文檔中的所有對象都在DOM中，所有圖片，腳本，鏈接以及子框都完成了加載。
2.外部引入
外部引入JS腳本文件作為最佳實踐，src作為外部引入資源的重要屬性，用來指定外部資源的引入路徑，可以是相對路徑，也可以是絕對路徑：
<html>
<head>
<script type = "text/javascript" src="js/相對路徑.js"></script>
<script type = "text/javascript" src="desktop/example/js/絕對路徑.js"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
同樣，如同嵌入式JS一樣，外部引入JS同樣也需要考慮使得文檔流優先加載的問題。
延遲腳本
使用defer表明外部引入的腳本將按照它們出現的順序先后執行，也就是說先出現的腳本會先執行，然后再到后者。但是在現實里，延遲腳本不一定會按照順序執行，也不一定會在DOMContentLoaded事件觸發前執行，因此最好只包含一個延遲腳本。（順序得不到保障，無法保證預期效果，容易出錯）
<html>
<head>
<script type="text/javascript" defer="defer" src="我會先執行.js"></script>
<script type="text/javascript" defer="defer" src="我會后執行.js"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
異步腳本
async表示瀏覽器立即下載物件，但是不保證執行先后順序，指定為async的目的是不讓頁面等待兩個腳本的下載和執行，從而可以異步加載頁面其他內容。所以設為async的腳本最好不要進行dom操作，否則有可能出現加載頁面時出現錯誤。
<html>
<head>
<script type="text/javascript" defer="defer" src="我不一定第二個執行.js"></script>
<script type="text/javascript" defer="defer" src="我不一定第二個執行.js"></script>
</head>
<body>
<!-- 我不會等待兩個腳本文件的加載，我會直接進行頁面渲染 -->
</body>
</html>
