浏览器环境的生命周期

除了我们所知道的 Vue 或者 React 有它们的生命周期函数以外，实质上我们最早接触到的 html 页面它也是有其生命周期函数的，虽然没有框架那么丰富。那么今天我就来总结一下众所周知的 html 页面中的生命周期。我们点一下我们最熟悉的一个吧： window.onload 事件，意思就是当页面所有内容加载完成时要触发的事件。

if (document.readyState === 'loading') {
	console.log('1、创建 Document 对象，开始解析 Web 页面。');
}

document.onreadystatechange = function () {
	if (document.readyState === 'interactive') {
		console.log('2、文档 Web 页面解析已经完成；');
	}
	if (document.readyState === 'complete') {
		console.log('4、所有异步加载完成并执行；');
	}
}

document.addEventListener('DOMContentLoaded', function () {
	console.log('3、页面解析完成后，触发 DOMContentLoaded 事件；');
}, false)


window.onload = function () {
	console.log('5、最后一步，触发了 window.onload 事件；');
}

window.onbeforeunload = function () {
	console.log('6、刷新、跳转、重载或关闭时触发，有兼容性问题；');
}

window.onunload = function () {
	console.log('7、刷新、跳转、重载或关闭时触发，有兼容性问题；');
}