在html中使用javascript
1.內(nèi)嵌式：
一般在<body>標(biāo)簽的尾部添加<script>標(biāo)簽，并且指定type="text/javascript"
比如這樣：
<html>
<head>
</head>
<body>
<!--內(nèi)容-->
<script type="text/javascript">
console.log('Tag should be here');
</scipt>
<body>
</html>
這樣的好處是：
- 避免腳本加載阻塞文檔渲染
- 避免腳本操作DOM時(shí)文檔流未渲染完畢導(dǎo)致獲取DOM元素失敗船殉。
看個(gè)例子：
<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>
報(bào)錯(cuò):
原因是先加載了腳本內(nèi)的內(nèi)容览绿，而此時(shí)文檔流未渲染胸囱，并沒有<button>標(biāo)簽存在，所以獲取button得到的結(jié)果為
undefined.
解決辦法
將script里的內(nèi)容放置到window.onload{ }里，在文檔加載完成后會(huì)觸發(fā)load事件公黑。此時(shí)哆致，在文檔中的所有對(duì)象都在DOM中绕德，所有圖片，腳本摊阀，鏈接以及子框都完成了加載耻蛇。
2.外部引入
外部引入JS腳本文件作為最佳實(shí)踐，src作為外部引入資源的重要屬性胞此，用來指定外部資源的引入路徑臣咖，可以是相對(duì)路徑，也可以是絕對(duì)路徑：
<html>
<head>
<script type = "text/javascript" src="js/相對(duì)路徑.js"></script>
<script type = "text/javascript" src="desktop/example/js/絕對(duì)路徑.js"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
同樣漱牵，如同嵌入式JS一樣夺蛇，外部引入JS同樣也需要考慮使得文檔流優(yōu)先加載的問題。
延遲腳本
使用defer表明外部引入的腳本將按照它們出現(xiàn)的順序先后執(zhí)行酣胀，也就是說先出現(xiàn)的腳本會(huì)先執(zhí)行刁赦，然后再到后者。但是在現(xiàn)實(shí)里闻镶，延遲腳本不一定會(huì)按照順序執(zhí)行甚脉，也不一定會(huì)在DOMContentLoaded事件觸發(fā)前執(zhí)行，因此最好只包含一個(gè)延遲腳本铆农。（順序得不到保障牺氨，無法保證預(yù)期效果，容易出錯(cuò)）
<html>
<head>
<script type="text/javascript" defer="defer" src="我會(huì)先執(zhí)行.js"></script>
<script type="text/javascript" defer="defer" src="我會(huì)后執(zhí)行.js"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
異步腳本
async表示瀏覽器立即下載物件顿涣，但是不保證執(zhí)行先后順序波闹，指定為async的目的是不讓頁面等待兩個(gè)腳本的下載和執(zhí)行，從而可以異步加載頁面其他內(nèi)容涛碑。所以設(shè)為async的腳本最好不要進(jìn)行dom操作精堕，否則有可能出現(xiàn)加載頁面時(shí)出現(xiàn)錯(cuò)誤。
<html>
<head>
<script type="text/javascript" defer="defer" src="我不一定第二個(gè)執(zhí)行.js"></script>
<script type="text/javascript" defer="defer" src="我不一定第二個(gè)執(zhí)行.js"></script>
</head>
<body>
<!-- 我不會(huì)等待兩個(gè)腳本文件的加載蒲障，我會(huì)直接進(jìn)行頁面渲染 -->
</body>
</html>
