js的时间线及异步加载

js时间线
dom解析中
1.创建document对象 浏览器解析html。 document.readyState = “loading”;
2.当遇到外部资源(外部js文件,外部css文件，外部图片，a标签，iframe标签)的时候,除了script标签中的src（当没有设置async，defer）为同步的，其余的全部为异步
（主线程去调度子线程完成）,有且只有这一个script 标签中的src为同步

dom解析完成后 document,readyState = ‘interactive’ , 同时触发DOMContentLoaded(jQuery中ready方法的封装),这是唯一一个又大写字母的事件名称

下载中
除了script标签中的,其他的所有的外部资源下载完成

下载完成以后 document.raedyState = ‘complete’;
window 触发load事件

简化一下：
解析中 构建dom数 document.readyState = ‘loading’
解析完成 dom树构建完成 document,readyState = ‘interactive’
下载中 下载外部的资源
下载完成 所有的资源全部完成以后document.raedyState = ‘complete’ || ‘loaded’;

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState); // interactive,complete
}
document.addEventListener('DOMContentLoaded',function(){ // DOMContentLoaded事件只能绑定在addEvenListener上，模拟jquery方法，等DOM解析完之后再执行
            console.log("DOMContentLoaded");
});

输出的顺序为
loading
interactive
DOMContentLoaded
complete

异步加载
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
（1）defer只支持IE

（2）async (html5的属性)

（3）创建script，插入到DOM中 自己封装函数

function loadScript(url, callback) {
            var script = document.createElement('script');
            if (script.readyState) {//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)
        }