前端基础知识整理汇总（上）

前端基础知识整理汇总（上）

HTML页面的生命周期

HTML页面的生命周期有以下三个重要事件：

1、DOMContentLoaded —— 浏览器已经完全加载了 HTML，DOM 树已经构建完毕，但是像是 和样式表等外部资源可能并没有下载完毕。
2、load —— 浏览器已经加载了所有的资源（图像，样式表等）。
3、beforeunload —— 当用户即将离开当前页面（刷新或关闭）时触发。正要去服务器读取新的页面时调用，此时还没开始读取；
4、unload —— 在用户离开页面后触发。从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。

每个事件都有特定的用途:

1、DOMContentLoaded —— DOM 加载完毕，所以 JS 可以访问所有 DOM 节点，初始化界面。
2、load —— 附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在 HTML/CSS 中指定）
3、beforeunload —— 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
4、unload —— 删除本地数据localstorage等

DOMContentLoaded

DOMContentLoaded 由 document 对象触发。使用 addEventListener 来监听它：

document.