时间线

1.在了解时间线之前我们先了解一下我们可以看一下线程：

线程分两种（1）.单线程：一段时间只能做一件事

                  （2）多线程：一段事件可以做多见事

2.时间线就是解析页面的顺序

它分为同步和异步

同步：（单线程）

异步：（底层就是多线程）一般是基于单线程的基础上

js的表面体现出来的是单线程，实际底层就是多线程，只不过说我们把这种多线程为异步（主线程去调度子线程）

总共分几步：一般网上都是10步；

我个人总结的就只有四步：

（1）绘制dom树

（2）碰到script中的src，阻塞dom树的绘制，其他的dom树正常绘制（这里特别注意是script标签中的src是同步的，其他的都是异步）

（3）绘制dom树完成，触发DOmcontentloaded事件（这是一个比较特别的事件，唯一大写字母的名称）

（4）dom树中的img，a，iframe，link等下载完成，触发window.onload事件

3.几个状态（也就是绘制dom树的顺序）

（1）解析中   构建dom树      documnent.readyState = loading

  (2)  解析完成   dom树已经构建完成        documnent.readyState =interactive；

（3）下载中    下载外部的代码（如：img，a，iframe，link）

（4）下载完成  所有的资源全部完成以后，图片。文件等         documnent.readyState =complete||loaded；

   这个顺序是不能改变的

 

大致   步骤:创建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 (){

   

})

javascript的异步加载方案：有三种

我们前面提到<script></script>标签中src是同步我们怎样把他变成异步

（1）<script  src="" defer></script>异步加载  IE才能使用

（2）<script  src="" async></script>html5中的新属性

（3）创建script标签，设置src属性，变成了异步，并插入到dom中（按需加载）

function loadyScript(url,callback){
var script = document.createElement("script")
if(script.readyState){
script.onreadystatechange=function(){
if(script.readystate=="complete"||script.readystate==loaded){
callback()
}
}
}else{
script.onload = function(){
callback()
}
}
script.src = url;
document.head.appendChild(script);
}
loadyScript("01.js",function(){
text()
})
loadyScript("01.js",function(){
fun()
})