前端性能优化之Lazyload-飞
发布时间: 2023-07-06
Lazyload 简介
前端工作中，界面和效果正在变得越来越狂拽炫酷，与此同时性能也是不得不提的问题。有些项目，页面长，图片多，内容丰富。像商城页面。如果同步加载时一次性加载完毕，那肯定是要等到花都谢了，loading转的人都崩溃~。今天分享的是Lazyload技术 是一种延迟加载技术。让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验。
页面较长，屏幕的可视区域有限。 不设置页面中img标签的src属性值或者将其指向同一个占位图。 图片的实际地址存在img标签自定义的一个属性中，如：“data-url”。 监听scroll，滚动到某个位置时，动态的将url替换成实际的“data-url”。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Lazyload</title> <style > .mob-wrap li{list-style: none;width: 100%;height: 345px;} </style> </head> <body> <ul > <li"> <img data-src="http://mob.com/public/images/index/sharesdk-logo.jpg"> <p>ShareSDK轻松实现社会化功能</p> </li> <li"> <img data-src="http://mob.com/public/images/index/sms-logo.jpg"> <p>短信验证码SDK</p> </li> <li"> <img data-src="http://mob.com/public/images/index/rec-logo.jpg"> <p>MobLink实现Web与App的无缝链接</p> </li> </ul> </body></html>简要流程
st=>start: Starte=>endop=>operation: 监听滚动事件cond=>condition: 距顶部高度<scrollTop么？io=>inputoutput: 将url替换成data-urlst->op->condcond(yes)->io->econd(no)->opvar 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 = `<img src="./zwt.gif" data-src="$${aImg[i%3].src}"><p>$${aImg[i%3].txt}</p>`; 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',''); } }};不做任何处理直接监听scroll必然导致在滚动鼠标滚轮的时候，过于频繁的触发处理函数。 如果刚巧在处理函数中有大量的操作dom等消耗性能的行为，引发大量操作，导致页面变卡变慢， 甚至浏览器崩溃无响应。 处理这种问题的思路是节流和防抖。 节流函数的概念有一个很形象的比喻：在接咖啡的时候，按了一次按钮会出咖啡， 紧跟着再按几次按钮接到的还是那一杯咖啡，相当于后面几次按的没有起作用。
常规的节流在这里就不多说了，下面介绍的是一种每隔least时间内至少执行一次的节流函数。
//节流函数_throttle = (fn, delay, least) => { var ti(户籍所在地怎么填写？户籍所在地是指我国居民户口簿登记所在地，一般是指出生时其父母户口登记地方。按照户口登记管理条例，公民填写户籍所在地，应该填写到户籍管理机关所在地，即城市户口的应该填**省**市(县)**区;农村户口的应该填**省**县**乡。一般在填写户籍所在地时，只填写到县就可以了。)meout = 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执行。
