1. 时间线
CSSOM + DOM => render tree
CSSOM 和 DOM 均是异步加载
script标签也是DOM元素
window.onload =>
document -> css + dom（包括script） + 资源加载完 -> onload
定义：从浏览器加载页面开始，到页面加载完全结束的过程中，按时间顺序发生的所有事情
1. 生成document对象，开始解析web页面 #document -> JS从现在就开始生成了 DOM
2. 解析文档 从文档的第一行浏览到最后一行 构建DOM树
document.readyState = 'loading' --->加载中,初始化的状态
3. 遇到link标签 开新的线程 -> 异步加载css外部文件 style -> 构建CSSOM
（2，3）同时做
4. 没有设置异步加载的SCRIPT，会阻塞文档解析， 等待JS脚本加载并且执行完之后继续解析文档
5. 有设置异步加载的SCRIPT， 不会阻塞文档解析（异步的script中不能用document.write， 包括async, defer）
<script type="text/javascript" scr="aa.js" async="async"></script> 异步脚本必须是没有其他脚本依赖的
<script type="text/javascript" scr="aa.js" defer="defer"></script>
6. 解析文档遇到img，先解析这个节点
src="" 创建加载线程， 异步加载图片资源， 不阻塞解析文档
7. 文档解析完成
document.readyState = 'interactive' 解析完成
8. defer script在文档解析完成之后才开始执行JS脚本, 而 async只要JS脚本加载完成之后立刻执行
9. 文档解析完成之后：DOMContentLoaded事件
程序：同步的脚本执行阶段 -> 事件驱动阶段（用户可以与页面交互）
10. async script加载并执行完毕 ， img等资源加载完毕， window对象中的onload事件才触发
document.readyState = 'complete' 加载完成
document.onreadystatechange = function() {}// 这是js引擎的事件，state改变的时候会触发
<script type="text/javascript">
console.log(document.readyState); // Loading
document.onreadystatechange = function() {
console.log(document.readyState); // interactive & complete
}
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded') // 文档解析完成之后触发
}, false)
window.onload = function() {
console.log('window onload') // 文档以及资源加载完毕后触发
}
defer/async
1. defer IE8以及以下都支持
2. async W3C标准 html5的属性 IE9以及以上支持