JS中关于时间线的问题

在HTML和css中我们 有讲到 按照从上往下逐步执行！ 在同步异步中我们也了解到了 js 中的时间线问题！
注意：时间线在js中占很重要的地位：优化DOM、逻辑正确时输出的为什么是undefind，很有可能都是时间线在作祟 （ps：对象调用错时也会是undefind

1、创建document对象，开始解析web页面。创建HTMLHtmlElement对象，添加到document中。这个阶段document.readyState = ‘loading’；

2、遇到link外部css，创建线程加载，并继续解析文档。并发；

3、遇到script外部js，并且没有设置async、defer，浏览器创建线程加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。js拥有修改dom的能力–>domcument.write；
4、遇到script外部js，并且设置有async、defter，浏览器创建线程加载，并继续解析文档；

defer属性设置后，表示加载script外部js和解析html页面是异步，并且等到html解析完成再执行js解析后的代码；

async属性设置后，表示加载script外部js和解析html页面是异步，但是当js解析完成，立刻执行它，此时html解析是被阻塞的；

document.createElement(‘script’)的方式动态插入script元素来模拟async属性，实现脚本异步加载和执行；

5、遇到img等，浏览器创建线程加载，并继续解析文档。并发；

//（6）最快的解析的方式是把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>
    

在异步4 中 有要注意的

//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

6当文档解析完成，document.readyState = ‘interactive’。

7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。（禁止使用document.write()）;

8.document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

9当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件。

10.从此，以异步响应方式处理用户输入、网络事件等。