JS异步加载和时间线

1、json对象

json是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的）

json和普通对象的区别在于 json对象中的属性名必须加引号

1.1、json对象的方法

1、JSON.stringify(obj)

作用：能够使一个常规对象转化为json格式的字符串

2、JSON.parse(str)

作用：能够使一个json格式的字符串转化为常规对象

2、异步加载

2.1、异步加载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.onload=function(){
                callback();
            }
        }
        script.src=url;
        document.head.appendChild(script);
    }

    loadScript('00.js',function(){
        test();
    })


</script>

3、js加载时间线

1、创建Document对象，开始解析web页面。这个阶段document.readyState=‘loading’;

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

3、遇到script外部js，并且没有设置async，defer，浏览器加载，并阻塞，等待js加载完成并执行完该脚本，然后继续解析文档

4、遇到script外部js，并且设置有async，defer，浏览器创建线程加载，并继续解析文档；对于async属性的脚本，脚本加载完后立即执行（异步禁止使用documen.write()）

5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档

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

7、文档解析完成后，所有设置defer的脚本会被按照顺序执行。（注意与async的不同，但同样禁止使用document.write()）

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

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

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