json 异步加载 时间线

1.json

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

var obj = {
    "name" : "myname",      //属性名要加双引号
    "age" :49
}

 

1. JSON.parse()

   string ---> json

2. JSON.stringify()

   json ---> string

2.异步加载js

js加载的缺点：加载工具方法没必要阻塞文档，过多js加载会影响页面效率，一旦网速不好，

那么整个网站将等待js加载而不进行后续渲染等工作。

注意： 有些工具方法需要按需加载，用到再加载，不用不加载，

domTree  +   cssTree  =  randerTree
​
//当执行dom结点的删除等操作，会产生reflow
reflow  --  重排/重构      //浪费资源，效率低
         dom结点的删除 添加
         dom结点的宽高变化，位置变化，display  none--block
         offserWidth ,  offsetHeight
repaint  --  重绘   颜色变化   //效率降低一点

 

1.JavaScript异步加载的三种方案

1. defer 异步加载，但要等到dom文档全部解析完才能被执行。只有IE能用，可以把代码写在script标签里

2. async异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里

   1.2执行时不阻塞页面

3. 创建<script> 标签，插入到dom中，加载完毕执行回调函数callback;

function loadScript(url, callback){
    var script = document.createElement('script');
    script.type = "text/javascript";
    if(script.readyState){  //IE9以下
        script.onreadystatechange = function(){
            if(script.readyState=='complete'||script.readyState=='loaded'){
                callback();
            }
        }
    }else{
        script.onload = function () {
            //firefox chrome safair opera
            callback();
        }
    }
    script.src = url;
    document.head.appendChild(script);
}

 

3.js加载时间线

　　1.创建document对象，开始解析web页面。这个阶段document.readyState = 'loading'

　　2.遇到<link> 标签，创建线程加载，并继续解析文档

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

　　4.遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.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.从此，以异步响应方式处理用户输入、网络事件等。

　　document.readyState 三个阶段

​ 　　　　　　'loading' ---> 'interactive' ---> 'complete'

​ 　　　　　　　1-5 　　　　 6-8　　　　　　 9-10

​ 　　解析中 DOM解析完 执行完加载完