热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端性能优化之Lazyload

Lazyload简介前端工作中,界面和效果正在变得越来越狂拽炫酷,与此同时性能也是不得不提的问题。有些项目,页面长,图片多,内容丰富。像商城页

Lazyload 简介

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

一、实现思路

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

二、上代码

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


  
    


      .mob-wrap li{list-style: none;width: 100%;height: 345px;}
    
  • loading

    ShareSDK轻松实现社会化功能

  • loading

    短信验证码SDK

  • loading

    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":"https://img.php1.cn/3cd4a/1eebe/cd5/a5d7215df572c386.webp","txt":"ShareSDK轻松实现社会化功能"},
  {"src":"https://img.php1.cn/3cd4a/1eebe/cd5/43a754c811e7ec5c.webp","txt":"短信验证码SDK"},
  {"src":"https://img.php1.cn/3cd4a/1eebe/cd5/72fd2c126203a875.webp","txt":"MobLink实现Web与App的无缝链接"}
];
var sLi = '';
document.getElementsByClassName("mob-wrap")[0].innerHTML="";
for(let i = 0;i

${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

三、再优化

不做任何处理直接监听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 

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


推荐阅读
  • POJ 2482 星空中的星星:利用线段树与扫描线算法解决
    在《POJ 2482 星空中的星星》问题中,通过运用线段树和扫描线算法,可以高效地解决星星在窗口内的计数问题。该方法不仅能够快速处理大规模数据,还能确保时间复杂度的最优性,适用于各种复杂的星空模拟场景。 ... [详细]
  • 本文探讨了如何利用Java代码获取当前本地操作系统中正在运行的进程列表及其详细信息。通过引入必要的包和类,开发者可以轻松地实现这一功能,为系统监控和管理提供有力支持。示例代码展示了具体实现方法,适用于需要了解系统进程状态的开发人员。 ... [详细]
  • 数字图书馆近期展出了一批精选的Linux经典著作,这些书籍虽然部分较为陈旧,但依然具有重要的参考价值。如需转载相关内容,请务必注明来源:小文论坛(http://www.xiaowenbbs.com)。 ... [详细]
  • ClassList对象学习心得与表单事件非空校验技巧
    ClassList对象学习心得与表单事件非空校验技巧 ... [详细]
  • Unity3D 中 AsyncOperation 实现异步场景加载及进度显示优化技巧
    在Unity3D中,通过使用`AsyncOperation`可以实现高效的异步场景加载,并结合进度条显示来提升用户体验。本文详细介绍了如何利用`AsyncOperation`进行异步加载,并提供了优化技巧,包括进度条的动态更新和加载过程中的性能优化方法。此外,还探讨了如何处理加载过程中可能出现的异常情况,确保加载过程的稳定性和可靠性。 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言,从a.html页面跳转至b.html时,如何携带参数并使b.html替代当前页面显示,而非新开窗口。文中详细介绍了实现这一功能的代码及注释,帮助开发者更好地理解和应用该技术。 ... [详细]
  • 使用Maven JAR插件将单个或多个文件及其依赖项合并为一个可引用的JAR包
    本文介绍了如何利用Maven中的maven-assembly-plugin插件将单个或多个Java文件及其依赖项打包成一个可引用的JAR文件。首先,需要创建一个新的Maven项目,并将待打包的Java文件复制到该项目中。通过配置maven-assembly-plugin,可以实现将所有文件及其依赖项合并为一个独立的JAR包,方便在其他项目中引用和使用。此外,该方法还支持自定义装配描述符,以满足不同场景下的需求。 ... [详细]
  • 本文将继续探讨 JavaScript 函数式编程的高级技巧及其实际应用。通过一个具体的寻路算法示例,我们将深入分析如何利用函数式编程的思想解决复杂问题。示例中,节点之间的连线代表路径,连线上的数字表示两点间的距离。我们将详细讲解如何通过递归和高阶函数等技术实现高效的寻路算法。 ... [详细]
  • 本文详细探讨了使用纯JavaScript开发经典贪吃蛇游戏的技术细节和实现方法。通过具体的代码示例,深入解析了游戏逻辑、动画效果及用户交互的实现过程,为开发者提供了宝贵的参考和实践经验。 ... [详细]
  • 在Android平台上,视频监控系统的优化与应用具有重要意义。尽管已有相关示例(如http:www.open-open.comlibviewopen1346400423609.html)展示了基本的监控功能实现,但若要提升系统的稳定性和性能,仍需进行深入研究和优化。本文探讨了如何通过改进算法、优化网络传输和增强用户界面来提高Android视频监控系统的整体效能,以满足更复杂的应用需求。 ... [详细]
  • Java能否直接通过HTTP将字节流绕过HEAP写入SD卡? ... [详细]
  • 本文深入探讨了C#中的反射与特性功能。首先,介绍了反射的基本概念,即通过元数据(包括类的方法、属性和字段等)在运行时动态获取和操作程序信息的能力。此外,还详细解析了特性的使用方法及其在代码注解和元数据扩展中的重要作用,为开发者提供了丰富的编程技巧和实践指导。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 本文总结了JavaScript的核心知识点和实用技巧,涵盖了变量声明、DOM操作、事件处理等重要方面。例如,通过`event.srcElement`获取触发事件的元素,并使用`alert`显示其HTML结构;利用`innerText`和`innerHTML`属性分别设置和获取文本内容及HTML内容。此外,还介绍了如何在表单中动态生成和操作``元素,以便更好地处理用户输入。这些技巧对于提升前端开发效率和代码质量具有重要意义。 ... [详细]
author-avatar
curlt_357
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有