同步加载、异步加、时间线

什么是同步加载

加载到js文件时会等js文件加载完成并且执行完成再继续执行后面的代码，因此，在加载数据时仍然执行其他程序，一般加载时是不执行程序的，不得不等进度条，因为很多程序在没有加载数据时，可能是无法运行的，所以通常会加载完之后才运行。
同步模式，又称”阻塞模式“，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载图像、渲染、代码执行。

什么是异步加载

异步加载，又称“非阻塞”，按需加载，用到的时候再加载，不用到不加载

同步加载与异步加载得区别

优点：
同步：管理起来方便，调用比较简单
异步：速度快，与主线程无关，
缺点：
同步：没有异步快
异步：调用比较麻烦

异步加载得三种方案

1. defer异步加载，IE专用（IE9以下）
2. async 异步加载， 加载完就执行，只能加载外部脚本
3. 创建一个script标签，插入到DOM中，加载完毕后callback 兼容性最好

1：defer异步加载

<script src="lndex.js" defer></script>
        <script defer>
            var wxw = 10;
        </script>

2:async 异步加载

 <script async> 
            // 高版本的浏览器中可以这么些，但是标准中不不允许的
            var a = 12;
        </script>

3. 创建script,插入到DOM中，加载完毕后callBack

<script>
//callback名字叫做回调函数，在事件里面的绑定的事件处理函数就是回调函数，回调函数其实就是当满足一定条件才调用的函数。
       function loadScript (url, callback){
           // url是异步下载的js文件
           //callback是异步下载的js文件中的某一个函数
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.src = url;//异步下载的js文件
        if(script.readyState){
            script.onreadystatechange = function(){
                if(script.readyState == "complete" || script.readyState == "loaded"){
                    callback();
                }
           }
        }else{
            script.onload = function(){
                callback();
            }
        }
        
        document.head.appendChild(script);
       }
</script>

js时间线

1、创建document对象，开始解析web页面。创建HTMLHtmlElement对象，添加到document中。这个阶段document.readyState = ‘loading’。
2、遇到link外部css，创建线程加载，继续解析文档。
3、遇到script外部js时，且没有设置async、defer，浏览器创建线程加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。js拥有修改dom的能力–>domcument.write此时是禁止使用得。
4、遇到script外部js，并且设置有async、defter，浏览器创建线程加载，并继续解析文档。
async属性的脚本，脚本加载完成后立即执行。domcument.write此时是禁止使用得。
defter==丢置尾部。
document.createElement(‘script’)的方式动态插入script元素来模拟async属性，实现脚本异步加载和执行。
5、遇到img等，浏览器创建线程加载，并继续解析文档。
6、当文档解析完成，document.readyState = ‘interactive’ 活跃。
7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同）
8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件。
10、从此，以异步响应方式处理用户输入、网络事件等。