前端图片渲染性能优化与实践

前言

对于图片量比较大的点上首页APP等，在打开商品展示页面的时候需要再加大量图片，在这种场景下如果直接全量加载，必然会造成页面性能消耗过大，白屏或者卡顿，用户体验非常糟糕，用户真的需要我们显示所有图片一起展示吗？其实并不是，用户看到的只是浏览器可视区域的内容。所以从这个情况我们可以做一些优化，只显示用户可视区域内的图片，当用户触发滚动的瞬间再去请求显示给用户

图片懒加载的实现：

给所有需要展示的 img 标签添加自定义属性： data-src ，同时不要设置 src 属性，data-src的值为图片url。
当页面加载完后，我们需要获取所有需要懒加载的图片的元素集合，判断是否在可视区域，如果是在可视区域的话，再重新设置元素的src属性值为真正图片的地址。
可视化区域的判断：是通过获取元素的getBoundingClientRect属性的top值和页面的clientHeight进行对比，如果top值小于clientHeight，则说明元素出现在可视区域之内。
当用户滚动窗口的时候，此时应该通过每个元素的BoundingClientRect属性来判断元素是否出现在可视区域内，如果在可视区域内，就渲染图片展示在可是区域内。

懒加载的实现：

<!-- 只在可视化区域内加载图片 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body> <img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG"alt=""> <img style="width: 250px;height: 250px;background-color: grey; display: block;"data-src="./img/test01.PNG" alt=""> <imgstyle="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt="">
</body>
<script>var viewHeight = document.documentElement.clientHeight; // 可视化区域的高度    var viewWidth = document.documentElement.clientWidth; // 可视化区域的宽度    function lazyload() { //获取所有要进行懒加载的图片        let eles = document.querySelectorAll('img[data-src]'); // 获取属性名中有data-src的        console.log('获取所有的信息', eles)Array.prototype.forEach.call(eles, function (item, index) {let rect;if (item.dataset.src === '') {return;}rect = item.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置            console.log('返回元素的大小及其相对于视口的位置', rect) //图片一进入可视区，动态加载            if (rect.bottom >= 0 && rect.top < viewHeight) {! function () {let img = new Image();img.src = item.dataset.src;img.onload = function () {item.src = img.src;}item.removeAttribute('data-src');}();}})}lazyload();
</script></html>

上述代码中，我们已经初步完成图片懒加载，但是我们大家都知道，scroll这个事件，用户滚动鼠标就会触发很多次，这也会导致我们的性能急剧下降，所以这就引出了我们的混合体防抖函数优化我们的性能：

function debounce(fn, gapTime) {let timer = null;return function () {if (timer) {clearTimeout(timer);timer = null;}timer = setTimeout(function () {fn();}, gapTime)}}

最后贴出完整代码：

<!-- 只在可视化区域内加载图片 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="img" style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt=""><img style="width: 250px;height: 250px;background-color: grey; display: block;" data-src="./img/test01.PNG" alt="">
</body>
<script>var viewHeight = document.documentElement.clientHeight;  // 可视化区域的高度var viewWidth = document.documentElement.clientWidth; // 可视化区域的宽度console.log('可视化区域的高度', viewHeight)console.log('可视化区域的宽度', viewWidth)let imgDom = document.getElementById('img');console.log(window.getComputedStyle(imgDom, null).color);        // 用来取所有的function lazyload () {//获取所有要进行懒加载的图片let eles = document.querySelectorAll('img[data-src]'); // 获取属性名中有data-src的console.log('获取所有的信息', eles)Array.prototype.forEach.call(eles, function(item, index) {let rect;if(item.dataset.src === '') {return;}rect = item.getBoundingClientRect();  // 返回元素的大小及其相对于视口的位置console.log('返回元素的大小及其相对于视口的位置', rect)//图片一进入可视区，动态加载if(rect.bottom >= 0 && rect.top < viewHeight) {!function () {let img = new Image();img.src = item.dataset.src;img.onload = function () {item.src = img.src;}item.removeAttribute('data-src');}();}})}lazyload();// 添加滚动事件触发图片加载document.addEventListener('scroll', debounce(lazyload, 500), false);// 通过函数防抖来持续优化：function debounce(fn, gapTime) {let timer = null;return function() {if(timer) {clearTimeout(timer);timer = null;}timer = setTimeout(function() {fn();}, gapTime)}}</script>
</html>

掘金链接：

https://juejin.cn/post/6977945074885722126

前端图片渲染性能优化与实践 — 图片懒加载相关推荐

前端性能优化：使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
前端性能优化（一）提升加载速度
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章! 前端性能优化----(一)提升加载速度由于现在大部分是做的单页面应用了,那么会导致页面的首次加载时间非常的长.常见 ...
关于前端性能优化问题，认识网页加载过程和防抖节流
前端性能优化-网页加载过程.性能优化方法.防抖和节流一.网页加载过程 1.加载资源的形式 2.加载资源的过程 3.渲染页面的过程 4.关于window.onload 和 DOMContentLoad ...
前端性能优化：如何提高页面加载速度和用户体验
第一章:介绍当今互联网时代,网站的性能对于用户体验至关重要.一个快速加载的网页不仅能提高用户的满意度,还能增加页面的转化率.而在前端开发中,性能优化是一个永恒的话题.本篇博客将为大家分享一些关于前端 ...
接手同事vue项目两个月的血和泪，关于vue项目性能优化，缩短首屏加载时间
最近接手了别人做的vue项目,项目跑起来后,有些页面很卡,首屏加载也慢,打包速度也慢.于是,研究了很久vue的项目性能优化,下面我将从两个部分来详解vue项目的性能优化: 代码优化 webpack打包 ...
前端女娲补天 HTML（二）什么是懒加载，什么是预加载
什么是懒加载懒加载可以将页面上的图片src设置为空,真实路径放在data-original属性中,在图片进入可视区域后再将src设置为data-original的值. 具体实现在DOM中获取所有懒 ...
自适应,响应式以及图片的性能优化(响应式图片)
自适应:最常见的就是淘宝无限适配[移动端]+rem单位 index.js · 2.0 · mirrors / amfe / lib-flexible · GitCode 可以将这个淘宝无限适配的ind ...
前端性能优化之jQuery按需加载轮播图
引言关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图 ...
前端性能优化:dns-prefetch和preload预加载资源
前端页面加载的时候我们有时会用到一些非模块化的库都是用cdn引入的,如果体积很大的话会阻塞页面的加载,并且这个库可能只在特定页面调用,这样体验很不好这里可以用dns-prefetch按需加载解决. ...

前端图片渲染性能优化与实践 — 图片懒加载

前言

图片懒加载的实现：

懒加载的实现：

前端图片渲染性能优化与实践 — 图片懒加载相关推荐

最新文章

热门文章