节流   优化网络请求

预设一个函数只有大于等于执行周期时才会执行该函数， 周期内调用该函数不执行 如同水滴积累够一定重量后才会落下

应用场景

1 连续点击按钮 切 需求为 间隔请求   例如  页面的【刷新】按钮 

2 上拉加载获取数据 的【上拉加载】

节流技术的实现原理  获取new Date() 时间 求的时间差  来限制一定时间内 只允许执行一次指定函数  以此来达到限制网络请求的需求

骨架函数如下

        var ODiv = document.getElementsByTagName('div')[0]
        var obtn = document.getElementsByTagName('button')[0]
        function jieliu(handle,wait) {
            var lastTime = 0
            return function() {
                var nowTime = new Date().getTime()
                if(nowTime - lastTime > 2000) {
                    handle()
                    lastTime = nowTime
                }
            }
        }
        function buy() {
            ODiv.innerText = parseInt(ODiv.innerText) + 1
        }
        obtn.onclick = jieliu(buy,2000)

防抖技术   优化页面请求性能

在前端开发中有一部分用户频繁的触发事件执行、而对于dom操作  资源加载这一类消耗性能的操作 可能会造成页面卡顿，客户端奔溃现象。。。函数节流  函数防抖就是为解决这类问题而生的

防抖  ： 就像是公交司机等人全部上车才会触发    

使用场景    实时搜索   拖拽

函数骨架如下

// 防抖
    var inp = document.getElementsByTagName('input')[0]
    var timer = null
    //防抖主函数
    function fangdou(hand,laizy) {
        return function() {
            var _arg = arguments;
            var self = this
            clearTimeout(timer)
            timer = setTimeout(function() {   
                hand.apply(self,_arg)
            },laizy)
        }
    }
    function ajax(e) {
        console.log(this.value);
    }
    //input事件执行的是防抖延迟后的函数
    inp.oninput = fangdou(ajax,2000)

什么是图片的懒加载？

当图片进入浏览器的可视区域，才加载该图片。这样大大加快了对与图片较多的页面的加载熟虑。例如一些较大型网上商城，一个页面有很多的图片，如果不使用懒加载，用户进入网页的速度会相当慢，这样用户体验可能就没那么好了。

实现原理：页面的<img>标签中不设置src属性，将图片的链接写到data-XXX(XXX自定义)，当img标签中没有src属性，那么浏览器就不会去发请求加载图片。当目标img滑动到浏览器的可视区域时，通过js设置目标img的src属性，图片才会被加载出来。