JS的异步编程

JS为单线程，在当前事情没有完成时是不会做下一件事情

异步的四种情况：
1.定时器
2.事件绑定
3.ajax读取数据
4.回调函数

每一个浏览器对于定时器的等待时间都有一个最小等待时间；即使设置等待时间小于最小等待时间，也不起作用（谷歌等待时间约为5-6ms，IE等待时间约为10-13ms）

var n = 0;
setTimeout(function(){
  n++;
  console.log(n);
},0);
console.log(n);

定时器的等待时间不一定就是最后执行时间，如果定时器后还有其他事情要处理，不管定时器的时间有没有到达都不会执行

var n = 0;
setTimeout(function(){
  n++;
  console.log(n);
},1000);
console.log(n);
while(1){  //死循环
  n++;
}
console.log(n)

结果只输出一次，为“0”

1 图片延迟加载

作用：保证页面打开的速度
原理：首屏内容图片，先用默认图片占位（一般在5kb以内），当首屏内容加载完成后再加载首屏的图片；其他屏幕的图片，也是一张默认图片占位，当滚动条滚到对应区域后再加载图片

网站性能优化：尽量减少http请求

html,css,img,js文件都会向服务器发起请求,优化方法：

• css/js文件合并；
• icon使用css sprite；
• 图片延迟加载；
• 数据延迟加载；
• 移动端的话一个简单的宣传页可以把css和js写成内嵌式。

2 单张图片超过一屏后延迟加载

图片距离顶部的距离：图片距body的上偏移+图片高度
浏览器底部距离顶部：浏览器一屏高度+页面卷去的高度

当图片从下往上露出时开始延迟加载，即图片底部距离页面顶部的距离小于浏览器底部距离顶部的距离

var ban = document.querySelector('.banner');
var img = ban.getElementsByTagName('img')[0];
window.onscroll = function(){
    if(ban.loaded){
        return
    }
    var a = ban.offsetHeight + ban.offsetTop;
    var b = document.documentElement.clientHeight + document.body.scrollTop;
    console.log(a,b);
    if(a<b){
        var oImg = new Image;
        oImg.src = img.getAttribute("trueSrc");
        oImg.onload = function(){
            img.src = this.src;
            img.style.display = "block";
            oImg = null;
        }
        ban.loaded = true;
    }
}

• 图片是隐藏的时候不能获取到它的高度，这是只能获取它的父级高度
• 通过trueSrc属性存储图片路径可以延迟加载图片，减少请求
• new Image可通过onload事件判断图片加载是否成功，避免出现叉图
• 通过loaded自定义属性判断可避免重复加载