（一）防抖节流

1. 防抖

对于短时间内连续触发的事件（如滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

防抖实现思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：

如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

效果：如果短时间内大量触发同一事件，只会执行一次函数。

实现：既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn, delay) {
    let timer = null;
	return function() {
        if (timer) {
            claerTimeout(timer)
        }
        timer = setTimeout(fn, delay)
    }
}

2. 节流

效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效

function throttle(fn, delay) {
    let valid = true;
    return function() {
        if (!valid) { //valid = false,休息时间，不执行
            return false
        }
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

（二）预加载

1. 什么是预加载？

图片等静态资源在使用前提前请求，资源后续使用可以直接从缓存中加载。

2. 为什么使用预加载？

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。但预加载会增加服务器的负担。

3. 实现预加载的方法

单纯的js预加载图片

            var images = new Array()  
            function preload() {  
                for (let i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            preload(  
                "http://domain.tld/gallery/image-001.jpg",  
                "http://domain.tld/gallery/image-002.jpg",  
                "http://domain.tld/gallery/image-003.jpg"  
            )

使用ajax实现预加载

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

（三）懒加载

1. 什么是懒加载？

懒加载也就是延迟加载。简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。

2. 为什么使用懒加载?

对于图片过多的场景，为了提高页面的加载速度，很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

懒加载的主要目的是作为服务器前端的优化，降低服务器的负载，减少请求数或延迟请求数。

3. 懒加载原理

将页面中的img标签src指向一张小图片或者src为空，然后自定义data-src属性指向真实的图片。当载入页面时，先把可视区域内的img标签的data-src属性值赋给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

加载条件：

img.offsetTop < window.innerHeight + document.body.scrollTop;

关于页面宽高的资料：

页面高度详解

scrollTop等元素距离

理清window和document的区别以及两者的宽高

4. 实现：

学习并摘自：实现图片懒加载(lazyload)

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>

JavaScript：

<!-- 纯js -->
<script>
    var imgs = document.getElementsByTagName("img");
    var num = imgs.length;
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    lazyload(); //页面载入完毕加载可是区域内的图片

    window.onscroll = lazyload;

    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {
            if (imgs[i].offsetTop < seeHeight + scrollTop) {
                if (imgs[i].getAttribute("src") == "default.jpg") {
                    imgs[i].src = imgs[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
</script>

JQuery：

<script>
    var n = 0,
        imgNum = $("img").length,
        img = $('img');

    lazyload();

    $(window).scroll(lazyload);

    function lazyload(event) {
        for (var i = n; i < imgNum; i++) {
            if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                if (img.eq(i).attr("src") == "default.jpg") {
                    var src = img.eq(i).attr("data-src");
                    img.eq(i).attr("src", src);

                    n = i + 1;
                }
            }
        }
    }
</script>

如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器的性能。

下面实现限制触发频率，来优化性能。

使用节流函数进行性能优化：

// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time  在time时间内必须执行一次
function throttle (fun, delay, time) {
  let timeout

  let startTime = new Date()

  return function () {
    let context = this

    let args = Array.prototype.slice.call(arguments)

    let curTime = new Date()

    clearTimeout(timeout)
    if (curTime - startTime >= time) {
      // 如果达到了规定的触发时间间隔，触发 handler
      fun.apply(context, args)
      startTime = curTime
    } else {
      // 没达到触发间隔，重新设定定时器
      timeout = setTimeout(function () {
        fun.apply(context, args)
      }, delay)
    }
  }
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));

使用防抖函数进行性能优化

防抖相比较节流函数要稍微简单一点，防抖是让函数延迟执行，而节流比防抖多了一个在一定时间内必须要执行一次。

// debounce函数用来包裹我们的事件
function debounce (fn, delay) {
  // 持久化一个定时器 timer
  let timer = null
  // 闭包函数可以访问 timer
  return function () {
    // 通过 'this' 和 'arguments'
    // 获得函数的作用域和参数
    let context = this
    let args = Array.prototype.slice.call(arguments)
    // 如果事件被触发，清除 timer 并重新开始计时
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了去抖函数
window.addEventListener('scroll',debounce(lazyload,500));

防抖、节流和预加载、懒加载

目录

1. 防抖节流

2. 预加载

3. 懒加载

（一）防抖节流

1. 防抖

2. 节流

（二）预加载

1. 什么是预加载？

2. 为什么使用预加载？

3. 实现预加载的方法

（三）懒加载

1. 什么是懒加载？

2. 为什么使用懒加载?

3. 懒加载原理

4. 实现：

druid数据源 xml配置

Vue：生命週期詳解

算法 - 回溯算法

數據庫：區分笛卡兒積、自然連接、內連接、等值連接、外連接

Vue項目實戰：產品站與商品詳情頁面實現

Vue：模板編譯與 Virtual DOM

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

防抖、节流 和 预加载、懒加载

目录

（一）防抖 节流

1. 防抖

2. 节流

（二）预加载

1. 什么是预加载？

2. 为什么使用预加载？

3. 实现预加载的方法

（三）懒加载

1. 什么是懒加载？

2. 为什么使用懒加载?

3. 懒加载原理

4. 实现：

防抖、节流和预加载、懒加载

（一）防抖节流