1：页面加载的同步与异步(白屏与不刷新)

a:普通的页面效果：w3school.org
b:页面不刷新效果：评论加载

2：描述两者的行为方式

a:同步 彼此等待-----阻塞（白屏）
b:异步 各做各的--------非阻塞（保持原有页面）

3对异步的通俗理解

4异步效果与js事件处理的机制

js事件处理机制：单线程+事件队列
事件队列：
a:定时函数 setTimeout() 和setInterval()

<script>
        console.log(1);
        setTimeout(function(){
            console.log(2);
        },1000);
        var sum=0;
        for(let i=0;i<1000000;i++){
            sum+=i;
        }
        console.log(sum);
        console.log(3); 
    </script>
输出顺序1 sum 3 2

b:事件函数 btn.onclick=function(){}

window.onload=function(){
            var btn=document.querySelector('#btn');
            console.log(1)
            btn.onclick=function(){
                console.log(this.value);
            }
            console.log(2);
        }
<input type="button" value="点击" id="btn">
输出顺序：1  2   点击（点击按钮时触发）

c:ajax回调函数 xhr.onreadystatechange=function(){}

window.onload=function(){
        var btn=document.querySelector('#btn');
        btn.onclick=function(){
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest(); 
            }else{
                xhr=new ActiveXObject('Microsoft.XMLHTTP');
            }
            xhr.open('get','',true);
            xhr.send(null);
            console.log(1);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var data=xhr.responseText;
                        var obj=JSON.parse(data);
                        var tag='<div><span>'+obj.info+'</span>----------<span></span><span>'+obj.message+'</span></div>';
                        var info=document.querySelector("#info");
                        info.innerHTML=tag;
                        console.log(2);
                    }
                }
            }
            console.log(3);
        }
     }
输出顺序：1    3     2

事件队列中的任务执行的条件：
a:主线程已经空闲
b:任务满足触发条件：
(1)定时函数（延迟时间已经达到）
(2)事件函数（特定事件被触发。譬如：点击）
(3)ajax回调函数（服务器端有数据响应）