前端性能优化之Lazyload 1

一、Lazyload的理解分析

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

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 = `<img class="tamp-img" alt="loading" 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','');}}
};

二、Lazyload的再优化

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

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);

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

前端性能优化之Lazyload 1相关推荐

前端性能优化之Lazyload
前端性能优化之Lazyload @(Mob前端-冬晨)[JavaScript|技术分享|懒加载] [TOC] Lazyload 简介前端工作中,界面和效果正在变得越来越狂拽炫酷,与此同时性能也是不得 ...
深度讲解：web前端性能优化
一.课程简介: 1.课程大纲涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类型选择浏览器渲染机制懒加载预加载浏览器存储缓存机 ...
前端性能优化——从 10 多秒到 1.05 秒
https://lishaoy.net 关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军 ...
移动H5前端性能优化指南[转]
移动H5前端性能优化指南米随随2015.01.23 移动H5前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
WEB前端性能优化小结
1. 请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
前端性能优化 -- 从 10 多秒到 1.05 秒
关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军规,本文会结合雅虎军规融入自己的了解 ...
前端性能优化的重要方案：图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的 ...
移动HTML5前端性能优化指南
http://www.cocoachina.com/webapp/20150126/11020.html (点击看大图) 移动H5前端性能优化指南[托尼托尼研究所] 概述 1. PC优化手段在M ...
WEB前端性能优化基本套路
前言前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识. 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响 ...

前端性能优化之Lazyload 1

前端性能优化之Lazyload 1相关推荐

最新文章

热门文章