前端性能优化之Lazyload
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
@(Mob前端-冬晨)[JavaScript|技术分享|懒加载]
前端工作中,界面和效果正在变得越来越狂拽炫酷,与此同时性能也是不得不提的问题。有些项目,页面长,图片多,内容丰富。像商城页面。如果同步加载时一次性加载完毕,那肯定是要等到花都谢了,loading转的人都崩溃~。今天分享的是Lazyload技术 是一种延迟加载技术。让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验。
页面较长,屏幕的可视区域有限。
简要流程
.
不做任何处理直接监听scroll必然导致在滚动鼠标滚轮的时候,过于频繁的触发处理函数。
使用节流函数
滚动时间
结语:历史潮流浩浩荡荡,前端技术的发展也是日新月异。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前端性能优化之Lazyload
Lazyload 简介
一、实现思路
不设置页面中img标签
的src属性
值或者将其指向同一个占位图。
图片的实际地址存在img标签
自定义的一个属性中,如:“data-url”。
监听scroll
,滚动到某个位置时,动态的将url替换成实际的“data-url”。
二、上代码
.
.
谢谢观看,搞定收工0.0~~~这样草草了事总是不好的
三、再优化
如果刚巧在处理函数中有大量的操作dom等消耗性能的行为,引发大量操作,导致页面变卡变慢,
甚至浏览器崩溃无响应。
处理这种问题的思路是节流和防抖。
节流函数的概念有一个很形象的比喻:在接咖啡的时候,按了一次按钮会出咖啡,
紧跟着再按几次按钮接到的还是那一杯咖啡,相当于后面几次按的没有起作用。
常规的节流在这里就不多说了,下面介绍的是一种每隔least
时间内至少执行一次的节流函数。
least
长于600,调用compare,否则延迟350ms执行。
这样相对于直接onscroll性能得到更进一步提升,在功能上也没有什么问题。
不同的业务场景调整一下delay和least就可以。
不断通过一个个小的技术点深入探究,以加深自己对js这门语言的理解。
温故知新,回顾旧的内容,学习新的内容和特性,更好的适应工作中的需求。
标签: 前端性能优化之Lazyload
最新碎语
- 未来的个人只有具备以下六种技能后,才能从容应对未来的各种挑战,排名第一的技能就是设计能力。其它的五项技能分别是:讲故事的能力、整合事物的能力、共情的能力、会玩儿的能力,以及在任何事情中找寻意义的能力。
2018-09-29 18:02
- 当你没有任何产品可以拿去卖或者搞促销的时候,你就会在最大程度上提升价值这就是正式推出产品前的几个月(或者几年)是最好时机的原因。你的产品会变得100%真实可信。产品的发展道路将不会出错,人们会乐意加入进来。如果你给他们足够的收益,那么他们就会感激你,未来你也就可以依靠他们了。
2018-08-26 08:23
- 在你的领域成为专家,不断为他们提供高质量的产品,最重要的是关注你的用户,并为他们带去真正的价值。
2018-08-26 08:22
- 我知道我们都希望自己可以快速成长,是的,建立真正的关系式是难以衡量的。但是,如果你关注你的用户,能为他们带去真正的价值,那么你就已经打下了成功的基底了。这关键的一步可能会让你在未来对其他资源有预先衡量的优势。
2018-08-26 08:18
- 何为第一?所有的人都需要你的时候,你能够给他们带来所需要的,你就是第一。任何事情都有它的顺序,讲因缘,时节,果报,要一步一步来,时间未到,你想也没有,时间一到,你不想它也有。德和得分别代表了内在和外在,它也代表了同一种东西的两个状态:能量和质量。
2018-06-28 09:07
链接
blogger
蓝蓝 http://www.lanlanwork.com
存档
- 2019年2月(12)
- 2019年1月(45)
- 2018年12月(41)
- 2018年11月(40)
- 2018年10月(29)
- 2018年9月(40)
- 2018年8月(87)
- 2018年7月(107)
- 2018年6月(86)
- 2018年5月(110)
- 2018年4月(40)
- 2018年3月(35)
- 2017年8月(35)
- 2017年7月(45)
- 2017年6月(7)
- 2017年5月(27)
- 2017年4月(51)
- 2017年3月(70)
- 2017年2月(65)
- 2017年1月(69)
- 2016年12月(55)
- 2016年11月(111)
- 2016年10月(92)
- 2016年9月(53)
- 2016年8月(9)
- 2016年7月(4)
- 2016年6月(9)
- 2016年3月(19)
- 2016年2月(26)
- 2016年1月(30)
- 2015年12月(33)
- 2015年11月(35)
- 2015年10月(46)
- 2015年9月(43)
- 2015年8月(40)
- 2015年7月(33)
- 2015年6月(46)
- 2015年5月(58)
- 2015年4月(70)
- 2015年3月(55)
- 2015年2月(17)
- 2015年1月(33)
- 2014年12月(21)
- 2014年11月(84)
- 2014年10月(94)
- 2014年9月(6)
- 2014年8月(1)
- 2014年7月(13)
- 2014年6月(66)
- 2014年5月(99)
- 2014年4月(88)
- 2014年3月(102)
- 2014年2月(68)
- 2014年1月(83)
- 2013年12月(106)
- 2013年11月(112)
- 2013年10月(61)
- 2013年9月(20)
- 2013年7月(13)
- 2013年6月(27)
- 2013年5月(48)
- 2013年4月(39)
- 2013年3月(8)
- 2013年2月(20)
- 2013年1月(31)
- 2012年12月(33)
- 2012年11月(31)
- 2012年10月(23)
- 2012年9月(8)
- 2012年7月(14)
- 2012年6月(15)
- 2012年5月(31)
- 2012年4月(24)
- 2012年2月(4)
- 2012年1月(8)
- 2011年12月(35)
- 2011年11月(32)
- 2011年10月(13)
- 2011年8月(1)
- 2011年6月(1)