js时间线

相关概念

进程：当一个软件打开的时候最少有一个进程（比如：打开Chrome浏览器，至少对应一个进程）
线程：

1. 一个进程至少有一个线程
2. 单线程（js就是一个单线程）
3. 多线程

生活中的例子：一个网站（单线程：从开始输入网址开始，这个线程只能服务一个客户；多线程：则服务多个客户）

---

异步加载js的三种方法：

1. defer 异步加载：加载后续文档元素的过程和JS的加载是并行进行（异步）的，但是JS的执行在所有元素解析完成之后进行，而且它是按照加载顺序执行脚本的

<script type="text/javascript" src="tool.js" defer="defer"></script>

2. aysnc ：加载和渲染后续文档的过程和当前JS的加载与执行并行进行（异步），它是乱序执行的，不管你声明的顺序如何，只要它加载完了就会执行

<script type="text/javascript" src="tool.js" async="async"></script>

3. 动态生成

<script>
    function loadScript(url,callback) {
        var script = document.createElement('script');
        if(script.readyState){
            script.onreadystatechange=function(){
                if(script.readyState=='complete'||script.readyState=='loaded'){
                    callback();
                }
            }
        }else{
            script.οnlοad=function(){
                callback();
            }
        }
        script.src=url;
        document.head.appendChild(script);
    }
    loadScript('00.js',function(){
        test();
    })

</script>

---

时间线
时间线：通俗来说就是当浏览器出生的那一刻开始所记录的一系列浏览器按顺序所做的事儿；浏览器在运行一个页面时，首先会初始化js的功能，当初始化初试完js这一个功能后，也就是js开始发挥作用那一刻，开始记载着这一系列浏览器要发生的过程；

1. 开始绘制DOM树

document.readyState = "loading"

2. 碰到外部的css的时候，DOM树继续绘制，就有其他的线路去下载此css文件
3. script中src外部脚本
   如果没有async或defer，DOM树停止绘制，脚本下载完成执行后，继续绘制DOM树（同步）
   如果有async或defer，DOM树继续绘制，就有其他的线路去下载此js文
4. img的src、iframe的src、a的href，DOM树继续绘制，就有其他的线路去下载这些文件
5. DOM树绘制完成，触发DOMContentLoaded事件

document.readyState = "interactive"

6. src、href中的全部文件下载完成后，触发window.onload事件

document.readyState = "complete" || "loaded"

readystatechange

用于监听readyState状态变化，会在readyState状态发生改变时触发

页面在加载过程中，readyState会经历3个状态：

1.loading      // 载入中~
2.interactive  // 已加载，文档与用户可以开始交互~
3.complete     // 载入完成~

3个状态之间会有两次状态的改变

document.addEventListener("readystatechange", function() {
  console.log(document.readyState);
})