這一次，不再為web頁面生命周期煩惱

這是我參與8月更文挑戰的第11天，活動詳情檢視： 8月更文挑戰

什麼是Web頁面生命周期？

我們每天在浏覽器中通過一個又一個的标簽頁來浏覽相關的資訊，當我們在浏覽器打開很多個标簽頁的時候，浏覽器在資源緊張的時候，并不會為每一個網頁儲存資源，浏覽器會在标簽頁不活動的時候，重新配置設定資源。浏覽器對這些頁面的幹預會通過頁面生命周期API暴露出來。這個生命周期就是本次我們讨論的主要話題。

頁面生命周期的主要事件

1. DOMContentLoaded

該API表示浏覽器已經完全加載了HTML，并建構好了DOM樹，但是css和img等外部資源尚未加載完成。注意：這裡的外部資源指的是需要發送http請求獲得的資源，而不是自己檔案中的資源，我們看下面的例子，下面的這個例子中的img是來自cdn的資源，而不是本地資源，如果是請求的本地資源是能夠擷取到圖檔的尺寸的。

<h1>Hello, DOMContentLoaded!</h1>
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
<script>
    function testReady() {
        alert('DOM樹已經建構完畢！')
        alert(`此時圖檔的大小為${img.offsetWidth}*${img.offsetHeight}`)
    }
    document.addEventListener('DOMContentLoaded',testReady);
</script>
複制代碼      

CodeSandBox線上示範

• DOMContentLoaded會等待所有script标簽執行完畢之後再執行。

<script>
    document.addEventListener("DOMContentLoaded", () => {
        alert("DOM ready!");
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
<script>
    alert("Library loaded, inline script executed");
</script>
複制代碼      

上面的代碼會先輸出 Library...，然後才輸出DOM ready!

• 如果一個樣式資源後面跟着一個script标簽，必須執行完樣式和這個script标簽才會調用DOMContentLoaded。

<script>
    document.addEventListener("DOMContentLoaded", () => {
        alert("DOM ready!");
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
<script>
    alert("Library loaded, inline script executed");
</script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap-grid.css" rel="stylesheet">
<script>
  // 在樣式表加載完成之前，腳本都不會執行
  alert(getComputedStyle(document.body).marginTop);
</script>
複制代碼      

2. window.onload

這個事件表示，頁面已經加載完了所有的HTML、DOM樹和樣式圖檔等資源。

<script>
    window.onload = function test() {
        alert('HTML、圖檔、樣式等資源均加載完畢');
        alert(`圖檔的大小是${img.offsetWidth}*${img.offsetHeight}`);
    }
</script>
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
複制代碼      

3. window.unload

這個事件在通路者離開頁面的時候觸發，在這裡可以做一些不涉及延遲操作的事。

let analyticsData = { /* 帶有收集的資料的對象 */ };
window.addEventListener("unload", function() {
  navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
});
複制代碼      

4. window.beforeunload

這個事件會在葉面即将關閉或者跳轉的時候提醒使用者是否确認。

<h1>Hello, DOMContentLoaded!</h1>
<a href="http://www.baidu.com">點選跳轉到百度</a>
<script>
    window.addEventListener('beforeunload', (event) => {
        // Cancel the event as stated by the standard.
        event.preventDefault();
        // Chrome requires returnValue to be set.
        event.returnValue = 'Write something clever here..';
    });
</script>
複制代碼      

判斷文檔是否加載完畢：readyState

該API共包含以下三個狀态。

1. loading(文檔正在加載)

2. interactive(可互動，但是一些圖檔資源和樣式仍在加載中)

3. complete(文檔全部加載完成)

console.log('初始化狀态是：',document.readyState);
img.onload = () => console.log('圖檔被加載完畢');
document.addEventListener('DOMContentLoaded',() => console.log('DOMContentLoaded'))
document.addEventListener('readystatechange',() => console.log('狀态變為：',document.readyState))
window.onload = () => console.log('window onload');
複制代碼      

參考資料

• 頁面生命周期
• MDN---document.readyState