前端性能优化之Lazyload

迈不过友情╰ 2022-04-25 09:48 250阅读 0赞

一、Lazyload的理解分析

1.  Lazyload技术是一种延迟加载技术，让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验
2.  实现思路  
    1）页面较长，屏幕的可视区域有限  
    2）不设置页面中img标签的src属性值或者将其指向同一个占位图  
    3）图片的实际地址存在img标签自定义的一个属性中，如：“data-url”  
    4）监听scroll，滚动到某个位置时，动态的将url替换成实际的“data-url”
3.  流程图分析:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]
4.  代码实现  
    html部分：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Lazyload</title>
        <style type="text/css"> .mob-wrap li{ list-style: none;width: 100%;height: 345px;} </style>
      </head>
      <body>
        <ul class="mob-wrap">
          <li">
            <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sharesdk-logo.jpg"><p>ShareSDK轻松实现社会化功能</p>
          </li>
          <li">
            <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sms-logo.jpg"><p>短信验证码SDK</p>
          </li>
          <li">
            <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/rec-logo.jpg"><p>MobLink实现Web与App的无缝链接</p>
          </li>
        </ul>
      </body>
    </html>

js部分：

二、Lazyload的再优化

1.  不做任何处理直接监听scroll必然导致在滚动鼠标滚轮的时候，过于频繁的触发处理函数。如果刚巧在处理函数中有大量的操作dom等消耗性能的行为，引发大量操作，导致页面变卡变慢，甚至浏览器崩溃无响应，处理这种问题的思路是节流和防抖
2.  节流函数的形象比喻，比如在接咖啡的时候，按了一次按钮会出咖啡，紧跟着再按几次按钮接到的还是那一杯咖啡，相当于后面几次按的没有起作用
3.  每隔least时间内至少执行一次的节流函数  
    1）代码如下：

//节流函数
    _throttle = (fn, delay, least) => { 
        var timeout = null,
      startTime = new Date();
        fn();
        return function() { 
        var curTime = new Date();
        clearTimeout(timeout);
        if(curTime - startTime >= least) { 
            fn();
            startTime = curTime;
        }else { 
            timeout = setTimeout(fn, delay);
        }
        }
    }

2）使用节流函数：  
代码如下：

3）说明：滚动时间least长于600，调用compare，否则延迟350ms执行。这样相对于直接onscroll性能得到更进一步提升，在功能上也没有什么问题，不同的业务场景调整一下delay和least就可以

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: /images/20220125/5b25b6c235b24bbb86e83be470859363.png