浏览器 DOMContentLoaded 事件的监听触发

开发 JSSDK 后， SDK 使用者会将 script 插入到各个位置，所以，在 SDK 里把入口方法放到 DOMContentLoaded 事件回调里是很有必要，以免遇到 DOM 没有准备好就操作的报错

document.addEventListener('DOMContentLoaded', () => main())

function main() {
    ...
}

当一切搞定后，发给同事接入测试时，发现无法运行，看了现场之后发现同事居然是用异步插入 script 的方式来引入，DOMContentLoaded 事件直接罢工，没有被触发

const script = document.createElement('script')
script.src = 'https://sdk.min.js'
document.querySelector("body").append(script)

document 有一个属性 document.readyState，表示 document 目前的加载状态，他有三个值：loading，interactive，complete。分别是加载中，文档已完成解析（可能脚本之类的资源还在加载），实际开发中发现，IE 只支持 complete，必要时需要做兼容，文档和所有资源都加载完成。

上面同事动态插入 SDK 时，document 是处于 interactive 状态的，此时监听 DOMContentLoaded，无法被触发，因此，SDK 运行时，需要判断状态，当 loading 时监听 DOMContentLoaded，其余状态直接执行入口方法

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => main())
} else {	
    main()
}

归纳一下

• document.readyState 有 3 个值：loading，interactive，complete。但是 IE 只有 complete
• DOMContentLoaded 只有在 loading 状态时监听才可以正常被触发