前端性能优化之Lazyload

huaixiaoz 发布于2019-08-02 10:58 / 1723人阅读

摘要：前端性能优化之前端冬晨技术分享懒加载简介前端工作中，界面和效果正在变得越来越狂拽炫酷，与此同时性能也是不得不提的问题。这样相对于直接性能得到更进一步提升，在功能上也没有什么问题。结语历史潮流浩浩荡荡，前端技术的发展也是日新月异。

前端性能优化之Lazyload

@(Mob前端-冬晨)[JavaScript|技术分享|懒加载]

[TOC]

Lazyload 简介

前端工作中，界面和效果正在变得越来越狂拽炫酷，与此同时性能也是不得不提的问题。有些项目，页面长，图片多，内容丰富。像商城页面。如果同步加载时一次性加载完毕，那肯定是要等到花都谢了，loading转的人都崩溃~。今天分享的是Lazyload技术 是一种延迟加载技术。让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验。

一、实现思路

页面较长，屏幕的可视区域有限。
不设置页面中img标签的src属性值或者将其指向同一个占位图。
图片的实际地址存在img标签自定义的一个属性中，如：“data-url”。
监听scroll，滚动到某个位置时，动态的将url替换成实际的“data-url”。

二、上代码

html部分(简单示意下结构)



  
    
    <span class="css"><span class="hljs-selector-tag">Lazyload</span></span>
    
  
  
    
      
        ShareSDK轻松实现社会化功能

      
      
        短信验证码SDK

      
      
        MobLink实现Web与App的无缝链接

简要流程

st=>start: Start
e=>end
op=>operation: 监听滚动事件
cond=>condition: 距顶部高度inputoutput: 将url替换成data-url
st->op->cond
cond(yes)->io->e
cond(no)->op

js部分

var aImg = [
  {"src":"http://mob.com/public/images/index/sharesdk-logo.jpg","txt":"ShareSDK轻松实现社会化功能"},
  {"src":"http://mob.com/public/images/index/sms-logo.jpg","txt":"短信验证码SDK"},
  {"src":"http://mob.com/public/images/index/rec-logo.jpg","txt":"MobLink实现Web与App的无缝链接"}
];
var sLi = "";
document.getElementsByClassName("mob-wrap")[0].innerHTML="";
for(let i = 0;i<10;i++){
  sLi = document.createElement("li");
  sLi.innerHTML = `${aImg[i%3].txt}
`;
  document.getElementsByClassName("mob-wrap")[0].appendChild(sLi);
};

window.onscroll = function () {
  var bodyScrollHeight =  document.documentElement.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName("tamp-img");
  for (var i =0; i < imgs.length; i++) {
    var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度 
    if (imgHeight  < windowHeight  + bodyScrollHeight - 340) {
       imgs[i].src = imgs[i].getAttribute("data-src");
       imgs[i].className = imgs[i].className.replace("tamp-img","");
    }
  }
};

.
.
.
谢谢观看，搞定收工0.0~~~这样草草了事总是不好的

三、再优化

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

常规的节流在这里就不多说了，下面介绍的是一种每隔least时间内至少执行一次的节流函数。

//节流函数
_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);
    }
    }
}

使用节流函数

function compare () {
  var bodyScrollHeight =  document.documentElement.scrollTop;// body滚动高度
  console.log(bodyScrollHeight+"替换src方法")
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName("tamp-img");
  for (var i =0; i < imgs.length; i++) {
    var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度 
    if (imgHeight < windowHeight + bodyScrollHeight - 340) {
       imgs[i].src = imgs[i].getAttribute("data-src");
       imgs[i].className = imgs[i].className.replace("tamp-img","");
    }
  }
}
window.onscroll = _throttle(compare, 350,600);

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

结语：历史潮流浩浩荡荡，前端技术的发展也是日新月异。
 不断通过一个个小的技术点深入探究，以加深自己对js这门语言的理解。
 温故知新，回顾旧的内容，学习新的内容和特性，更好的适应工作中的需求。

云服务器 GPU云服务器前端性能优化前端开发性能优化性能优化前端优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52679.html

前端性能优化之Lazyload

摘要：前端性能优化之前端冬晨技术分享懒加载简介前端工作中，界面和效果正在变得越来越狂拽炫酷，与此同时性能也是不得不提的问题。这样相对于直接性能得到更进一步提升，在功能上也没有什么问题。结语历史潮流浩浩荡荡，前端技术的发展也是日新月异。前端性能优化之Lazyload @(Mob前端-冬晨)[JavaScript|技术分享|懒加载] [TOC] Lazyload 简介前端工作中，界面和效果...

charles_paul 2019-08-29 16:06 评论0 收藏0
前端性能优化--懒加载和预加载

摘要：集合中有等属性文档各种高度视口的大小文档的大小文档的大小预加载标签懒加载代码实现 html Document css .image-item ...

loostudy 2019-08-23 15:27 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

Winer 2019-08-20 11:04 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

philadelphia 2019-08-01 15:44 评论0 收藏0
web前端性能优化总结

摘要：但是还是会阻塞事件，所以会可能在触发前或后执行，但是一定会在事件前触发。当监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到属性中，达到懒加载的效果。当代码执行，线程被冻结。所以的性能让变慢。概括涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类型选择浏览器渲染机制懒加载预加载浏览器存储缓存机制...

evin2016 2019-08-23 15:26 评论0 收藏0