精通HTML页面的生命周期

HTML有四个重要的生命周期事件：

DOMContentLoaded：DOM 完全加载以及解析时触发，而无需等  /样式表/子框架里外部资源加载完成。此时可以查找DOM 节点，并初始化接口。在用户允许的前提下，Firefox，Chrome 和 Opera 都会在 DOMContentLoaded 触发时自动填充表单。

DOMContentLoaded和脚本的关系：

DOMContentLoaded和样式关系：

load：整个页面及所有依赖资源如样式表和图片都已完成加载时触发，此时才可以正确获取图片大小。可以通过onload或事件字符串load监听事件。该事件不可取消，同时所有以load 命名的事件都不会传递到 Window 上即load事件不会冒泡。

beforeunload：当用户离开页面的导航（navigation）或试图关闭窗口或刷新时存触发（弹出一个确认对话框），询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消，也就不会出发pagehide和unload事件。此事件中可以检查用户是否保存了更改，并询问是否真的要离开，beforeunload目前已经不支持自定义显示给用户的消息。

unload：当页面或一个子框架正在被卸载时，触发 unload事件，此时页面处于以下状态：所有资源仍存在 (图片，iframe等)，对于终端用户所有资源均不可见，界面交互无效 (window.open, alert, confirm 等)，错误不会停止卸载页面的过程。该事件不可取消，不可冒泡，且在 beforeunload和pagehide事件之后执行，且父框架在子框架卸载前卸载。在该事件中建议可以使用navigator.sendBeacon(url, data)将和用户相关的分析统计数据发送到服务器保存：

Document.readystate：描述了 document 的加载状态，状态改变的时触发readystatechange 事件。存在三种状态：loading（加载中）--正在加载中；interactive（可交互）-- document加载状态结束，但图像，样式表和框架之类的子资源仍在加载，DOMContentLoaded事件即将触发；complete（已完成）--document 和所有子资源已完成加载，window.onload事件即将触发。