html js不触发_HTML页面生命周期

这是前端网络填坑的一篇，主要介绍三个事件DOMContentLoaded，load，beforeunload/unload以及相应的用法。

• load— 浏览器已经加载了所有的资源（图像，样式表等）。可以在此事件触发时获得图像的大小（如果没有被在HTML/CSS中指定）
• DOMContentLoaded— 浏览器已经完全加载了HTML，DOM树已经构建完毕之后会运行该事件，但是像是<img>和样式表等外部资源可能并没有下载完毕。所以js可以访问所有DOM节点，初始化界面。

  document.addEventListener('DOMContentLoaded', () => console.log('haahhaha'))

• beforeunload/unload-- 当用户离开页面的时候触发 。可以询问用户是否保存了更改以及是否确定要离开页面。

DOMContentLoaded 与脚本

仅从定义上看DOMContentLoaded事件也是很简单，就是在dom树构建完毕触发，不过其实存在一些坑：

1。当浏览器在解析HTML页面时遇到了<script>...</script>标签，将无法继续构建DOM树（译注：UI渲染线程与JS引擎是互斥的，当JS引擎执行时UI线程会被挂起），必须立即执行脚本。所以DOMContentLoaded有可能在所有脚本执行完毕后触发。外部脚本（带src的）的加载和解析也会暂停DOM树构建，所以DOMContentLoaded也会等待外部脚本（图的第一种情况）。

2。async的脚本的下载和HTML的下载与解析是异步的，但js的执行一定和UI线程是互斥的。async在下载完毕后的执行会阻塞HTML的解析（情况2）。注意这个图说的不是太清晰，async的执行一定在load之前，但会在DOMContentLoaded的之前和之后都有可能

3。带有defer的脚本的下载是和HTML的下载与解析是异步的，但是js的执行会在HTML解析之后执行，执行完defer之后才会走到 DOMContentLoad

window.onload

window对象上的onload事件在所有文件包括样式表，图片和其他资源下载完毕后触发

window.onbeforeunload

window.onbeforeunload = function () {
    alert("There are unsaved changes. Leave now?")
};

window.unonload

用户离开页面的时候，window对象上的unload事件会被触发，我们可以做一些不存在延迟的事情，比如关闭弹出的窗口，可是我们无法阻止用户转移到另一个页面上