参考：document.readyState - Web API 接口参考 | MDN (mozilla.org)
**第一步，**JS生命周期第一步
文档加载中状态，document.readyState == loading
**第二步，**JS生命周期第二步
可交互状态，document.readyState == interactive
**第三步，**HTML生命周期的第一步
DOMContentLoaded，标识浏览已完全加载HTML并构建DOM树，但样式表之外的外部资源未加载完成。此时处理程序可以查找DOM节点，并初始化接口
**第四步，**JS生命周期第三步
加载完成，document.readyState == complete
**第五步，**HTML生命周期的第二步
window.onload被触发，标识加载完所有外部资源包括图片、样式
**第六步，**angular生命周期的第一步
constructor构造器，仅用来对局部变量进行简单值的初始化
**第七步，**angular生命周期的第二步
ngOnChanges，被绑定的输入值发生变化，出现在父子组件传值调用的情况，
**第八步，**angular生命周期的第三步
ngOnInit，一般在这里请求数据；ngDocheck，在每个变更检测周期中调用
**第九步，**angular生命周期的第四步
ngAfterContentInit，组件内容初始化后调用；ngAfterContentChecked，变更检测被调用
**第十步，**angular生命周期的第五步
ngAfterViewInit，初始化完成组件、视图后被调用，可进行DOM操作