細談在HTML中使用JavaScript

前言

JavaScript是瀏覽器的內建指令碼語言。當網頁中嵌入了JavaScript指令碼，瀏覽器載入網頁時，就會執行指令碼，從而操作瀏覽器，實現各種動態效果

JavaScript程式碼嵌入網頁的方法

1、<script>元素直接嵌入程式碼

<script type="text/javascript">
    function sayHello() {
        alert("hello!");
    }
</script>

2、<script>元素載入外部指令碼

<script type="text/javascript" src="example.js"></script>

<script>標籤相關屬性

type屬性

• <script>標籤預設就是JavaScript程式碼，嵌入javascript指令碼時，type屬性可以省略
• 如果type屬性的值，瀏覽器不認識，就不會執行其中的程式碼，所以可以在<script>標籤中嵌入任意的文字內容，只要加上一個瀏覽器不認識的type屬性就行，瀏覽器不會執行也不會顯示它的內容，但是這個<script>節點依然存在於DOM之中，可以使用<script>節點的text屬性讀取它的內容

defer屬性

<script src="a.js" defer></script>
<script src="b.js" defer></script>

defer屬性的執行流程：

1. 瀏覽器開始解析HTML網頁
2. 解析過程中，發現帶有defer屬性的<script>元素
3. 瀏覽器繼續往下解析HTML網頁，同時並行下載<script>元素載入的外部指令碼
4. 瀏覽器完成解析HTML網頁，此時再回過頭執行已經下載完成的指令碼

需要注意：

• 非同步載入資源
• 按照順序執行指令碼
• 使用defer載入的外部指令碼不應該使用document.write方法

async屬性

<script src="a.js" async></script>
<script src="b.js" async></script>

async屬性的執行流程：

1. 瀏覽器開始解析HTML網頁
2. 解析過程中，發現帶有async屬性的<script>標籤
3. 瀏覽器繼續往下解析HTML網頁，同時並行下載<script>標籤中的外部指令碼
4. 指令碼下載完成，瀏覽器暫停解析HTML網頁，開始執行下載的指令碼
5. 指令碼執行完畢，瀏覽器恢復解析HTML網頁

需要注意：

• 非同步載入資源
• 並不會按照順序執行JS，誰先下載完，誰就先執行
• 使用async載入的外部指令碼不應該使用document.write方法

async和defer屬性歸納

• 都能解決“阻塞效應”
• 都是非同步載入資源，但執行順序不一樣
• 如果指令碼之間沒有依賴關係，就使用async屬性，如果指令碼之間有依賴關係，就使用defer屬性

---

Load事件

• 瀏覽器已經載入了所有依賴的資源，包括圖片樣式表等
• 可以在load事件觸發時獲得圖片的大小
• 繫結到window，window.addEventListener("load",ready);

DOMContentLoaded事件

• 瀏覽器已經完全載入了HTML，DOM樹已經構建完畢
• JS可以訪問所有DOM節點，但是圖片和樣式表等外部資源可能沒有下載完畢
• 繫結到document：document.addEventListener("DOMContentLoaded",ready);

涉及到async的知識點

• 非同步async指令碼一定會在頁面load事件之前執行
• 非同步async指令碼可能會在DOMContentLoaded事件觸發之前或者之後執行

動態生成指令碼

[`a.js`, `b.js`].forEach(src => {
    const script = document.createElement(`script`);
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

• 不會阻塞頁面渲染
• async設定為false可以保證b.js在a.js後面執行
• 在這段程式碼後面載入的指令碼檔案，會等在b.ja執行完成後再執行

相關知識點總結

1. 包含在<script>標籤內部的JavaScript程式碼，將被從上到下一次解析
2. 無論以哪種方式嵌入程式碼，只要不存在defer和async屬性，瀏覽器都會按照<Script>標籤在頁面中出現的先後順序對它們進行解析
3. 載入外部指令碼的優點：可維護性、可快取、適應未來
4. <script>放在底部的原因1、避免“阻塞效應”。2、避免，在DOM結構生成之前呼叫DOM節點，而產生錯誤