前言：时间线在js中占很重要的地位：优化DOM、逻辑正确时输出的为什么是undefind，很有可能都是时间线在作祟 （ps：对象调用错时也会是undefind
（1）先加载loading事件，再解析页面
<div class="demo" style="width:100px;height: 100px;background: red;"></div>
<script>
console.log(document.readyState)
</script>
（2）以下输出的是undefind，为什么是这样？因为等全部加载完再执行。它们之间有个时间差。所以
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div);
</script>
<div class="demo" style="width:100px;height: 100px;background: red;"></div>
（3）以下输出DOM，解析完立马加载dom，不用等它全部加载完 只有DOMContentLoaded才能写在上面
<script>
document.addEventListener('DOMContentLoaded',function(){
var div = document.getElementsByTagName('div')[0];
console.log(div);
},false)
</script>
<div class="demo" style="width:100px;height: 100px;background: red;"></div>
（4）最快的解析的方式是把script写在下面，效率最高的方法
<div class="demo" style="width:100px;height: 100px;background: red;"></div>
<script>
document.addEventListener('DOMContentLoaded',function(){
var div = document.getElementsByTagName('div')[0];
console.log(div);
},false)
</script>
2.遇到link外部css，创建线程加载，并继续解析文档。
3.遇到script外部js，并且没有设置async、defer,浏览器加载并阻塞，等待js加载完成并执行该脚本，然后解析解析文档
4.遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。异步必须禁止使用document.write。
对于async属性的脚本，脚本加载完成后立即执行。
<div class="demo" style="width:100px;height: 100px;background: red;"></div>
<script>
window.onload = function (){
document.write('a')
}
</script>
onload方法是在一定清空下有消除文档流的功能，看以下是不是没有执行div方块，把div方块在标签里删了，只有一个a
5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6.当文档解析完成，document.readyState = 'interactive'。解析完不代表加载完成。
7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）; defer：推迟 ps:和第六步同时发生，当defer执行完会执行第六步
8.
document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。 ps：当浏览器解析完之后就会执行事件，
9.
当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。 complete：完成 ps:等所有加载完在加载一次，改成完成状态，window触发load对象。
例：
<div class="demo" style="width:100px;height: 100px;background: red;"></div>
<script>
window.onload = function (){ //触发load事件
console.log(document.readyState);
}
console.log(document.readyState);
运行：从下图可以看出，先执行的是loading事件
10.
从此，以异步响应方式处理用户输入、网络事件等。
大致 步骤:创建document对象(加载loading) -- 文档解析完 --- 文档解析完并加载、执行完。
<div class="demo" style="width:100px;height: 100px;background: red;"></div>
<script>
console.log(document.readyState);
document.onreadystatechange = function (){
console.log(document.readyState);
}
</script>
有一个DOMContentLoaded事件是等解析完就执行的事件。
例：
<div class="demo" style="width:100px;height: 100px;background: red;"></div>
<script>
console.log(document.readyState);
document.onreadystatechange = function (){
console.log(document.readyState);
}
document.addEventListener('DOMContentLoaded',function(){
console.log('123')
},false)
运行结果：
从上图可以看出，在解析之后立马输出123。解析完才执行主函数（函数体）函数体如下：
$(document).ready(function (){
})
window等加载完再触发之后的事件，有点慢，可以使用DOMContentLoaded写，因为它是解析完就加载