Html页面的生命周期

主要包含四个事件：

DOMContentLoaded 浏览器完全加载Html，并生成DOM树。但<img>和样式表等外部资源可能尚未加载完成
load 浏览器加载完HTML以及外部资源。
beforeunload 用户正在离开页面，可以用来询问用户是否保存等操作。
unload 用户几乎已经离开页面，可以用来发送一些页面监控数据。

详解Html页面生命周期

DOMContentLoaded 事件

// DOMContentLoaded事件发生在document上。
document.addEventListener("DOMContentLoaded", ready);

// dom树已经加载完成，但是图片等外部资源可能并未加载完成。
<body>
    <img id="img" src="https://cn.bing.com/th?id=OHR.ChalkRock_ZH-CN2893565655_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&qlt=50">

    <script>
        const ready = () => {
            console.log('dom已经加载完成')

            const img = document.querySelector('#img')

            console.log(img.offsetWidth) // 0
        }

        document.addEventListener('DOMContentLoaded', ready)
    </script>
    
    // 其他的脚步会阻塞DOMContentLoaded事件的执行，
    // 因为脚步可能修改Dom，所以需要等脚步执行结束。
    <script>
        console.log('会在DOMContentLoaded之前执行，阻塞DOMContentLoaded事件')
    </script>
</body>

现代浏览器的自动填充是在DOMContentLoaded事件处理的。

window.onload

当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。

<script>
    const ready = () => {
        console.log('dom已经加载完成')

        const img = document.querySelector('#img')

        console.log(img.offsetWidth) // 0
    }

    document.addEventListener('DOMContentLoaded', ready)
    
    window.onload = () => {
        ready() // 可以获取到img.offsetWidth
    }
</script>

window.onbeforeunload

如果访问者触发了离开页面的导航（navigation）或试图关闭窗口，beforeunload 处理程序将要求进行更多确认。
如果我们要取消事件，浏览器会询问用户是否确定。

window.onbeforeunload = () => {
    return false
}

window.onunload

当访问者离开页面时，window 对象上的 unload 事件就会被触发。我们可以在那里做一些不涉及延迟的操作，例如关闭相关的弹出窗口。
有一个值得注意的特殊情况是发送分析数据。

readyState

document.readyState属性为我们提供了当前加载状态信息，有3个值。

loading 文档正在被加载
interactive 文档全部读取
complete 文档全部读取，资源也加载完成

// readystatechange事件可以监听readyState到改变情况。
document.addEventListener('readystatechange', () => console.log(document.readyState));

前端笔记——页面生命周期