防抖，节流，懒加载

最新推荐文章于 2024-03-06 13:27:14 发布

linaGao

最新推荐文章于 2024-03-06 13:27:14 发布

阅读量606

点赞数

文章标签：懒加载防抖节流

本文链接：https://blog.csdn.net/weixin_38292678/article/details/82843151

版权

在前端开发中，有一部分用户行为会频繁的触发事件，而对于DOM操作，资源加载等耗费性能的处理，很可能会导致卡顿，甚至浏览器的崩溃。防抖和节流就是为了解决这一类的问题。

防抖：

理解：在车站上车，人员上满了车才发走重点是人员上满触发一次。
场景：实时搜索，拖拽。
实现： //每一次都要清空定时器，重新设置上计时器值，使得计时器每一次都重新开始，直到最后满足条件并且等待delay时间后，才开始执行handler函数。

function debunce（handler，delay）{ 
  //handler是要传入的进行防抖的函数，delay是等待时间。   
   var timer = null;
   return function（）{   
        var _self = this，
        args = arguments;  
        clearTimeout（timer）;        //每次都要清除这个定时器       
        timer = setTimeout（function（）{    //重新开启定时器                        
                         handler.apply（_self，args）;    
                     }，delay）;     }

节流：

理解：大于等于10分钟发一次车，重点是一定间隔时间就会触发一次。（即预定一个函数只有在大于等于执行周期时才会执行，周期内不执行）。
场景：窗口调整（调整大小），页面滚动（滚动），抢购时疯狂点击（鼠标按下）
实现： //处理程序是要传入的进行节流的函数，wait是上述的间隔时间。 //使用时间戳进行时间的计算。

   function throttle（handler，wait）{
     //handler是要进行节流的函数，wait是等待时间        
         var lastTime = 0;  
         return function(){     
                  var nowTime = new Date（).getTime（）;    //获取当前时间              
                  if（nowTime - lastTime> wait）{      
                           handler.apply（this，arguments）;      
                           lastTime = nowTime;      //更新最后时间            
                   }           
            }
  }

懒加载

前言：在我们闲暇无事的时候，总是看看这个、那个的网站，比如京东、天猫、淘宝什么的，当我们再看的时候会出现照片闪了一下的情况，这是正常的，因为图片刚刚加载出来，这个也就是懒加载，如果你在打开网页的时候，一下把图片都请求出来，你可能没看几秒就退出了，一是浪费了你的流量，二是用户体验差，一进入这个网站会浪费很多流量，所以会造成遗失大量的用户。

原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LazyLoad</title>
    <style type="text/css">
        img {
            display: block;
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
  <img src='./1.png'></img>
  <img src='./2.png'></img>
  <img src='./3.png'></img>
  <img src='./4.png'></img>
  <img src='./5.png'></img>
    <script type="text/javascript">
        var aImg = document.querySelectorAll('img');
        var len = aImg.length;
        var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历
        window.onscroll = function() {
            var seeHeight = document.documentElement.clientHeight;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            for (var i = n; i < len; i++) {
                if (aImg[i].offsetTop < seeHeight + scrollTop) {
                    if (aImg[i].getAttribute('src') == '') {
                        aImg[i].src = aImg[i].getAttribute('guoyu-src');
                    }
                    n = i + 1;
                    console.log('n = ' + n);
                }
            }
        };
    </script>
</body>
</html>

linaGao

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
防抖，节流，懒加载

在前端开发中，有一部分用户行为会频繁的触发事件，而对于DOM操作，资源加载等耗费性能的处理，很可能会导致卡顿，甚至浏览器的崩溃。防抖和节流就是为了解决这一类的问题。防抖：理解：在车站上车，人员上满了车才发走重点是人员上满触发一次。场景：实时搜索，拖拽。实现： //每一次都要清空定时器，重新设置上计时器值，使得计时器每一次都重新开始，直到最后满足条件并且等待delay时间后，才...
复制链接

扫一扫