Angular+html+js前端加载生命周期

参考：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操作