細談在HTML中使用JavaScript

前言

JavaScript是瀏覽器的內置腳本語言。當網頁中嵌入了JavaScript腳本，瀏覽器加載網頁時，就會執行腳本，從而操做瀏覽器，實現各類動態效果

JavaScript代碼嵌入網頁的方法

一、<script>元素直接嵌入代碼

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

二、<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>放在底部的緣由一、避免「阻塞效應」。二、避免，在DOM結構生成以前調用DOM節點，而產生錯誤