current position:Home>[Front-end performance optimization] Front-end lazy loading

[Front-end performance optimization] Front-end lazy loading

2022-09-23 02:10:22The front-end code farmer wang

一、什么是懒加载?什么预加载?

懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式. 有的网站图片很多,而如果一上来就加载所有的图片,会导致网页加载很慢

图片懒加载:等图片正式进入到可视区中时,才加载对应的图片,否则不请求图片

预加载指的是将所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源.通过预加载能够减少用户的等待时间,提高用户的体验.我了解的预加载的最常用的方式是使用 js 中的 image 对象,通过为 image 对象来设置 scr 属性,来实现图片的预加载.

二、图片懒加载的基本实现

图片的加载是由src引起的,当对src赋值时,浏览器就会请求图片资源.根据这个原理,我们使用HTML5data-xxx属性来储存图片的路径,在需要加载图片的时候,将data-xxx中图片的路径赋值给src,这样就实现了图片的按需加载,即懒加载.

注意:data-xxx 中的xxx可以自定义,这里我们使用data-src来定义.

懒加载的实现重点在于确定用户需要加载哪张图片,在浏览器中,可视区域内的资源就是用户需要的资源.所以当图片出现在可视区域时,获取图片的真实地址并赋值给图片即可.

<div class="container"> <img src="loading.gif"data-src="pic.png"> <img src="loading.gif"data-src="pic.png"> <img src="loading.gif"data-src="pic.png"> <img src="loading.gif"data-src="pic.png"> <img src="loading.gif"data-src="pic.png"> <img src="loading.gif"data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		var winHeight= window.innerHeight;
		for(var i=0;i < imgs.length;i++){
			if(imgs[i].offsetTop < scrollTop + winHeight ){
				imgs[i].src = imgs[i].getAttribute('data-src');
			}
		}
	}window.onscroll = lozyLoad();
</script> 

三、Intersection Observer实现图片懒加载

Intersection Observer是HTML5新增的API,可以用来实现图片懒加载.MDN中对Intersection Observer的解释

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法.祖先元素与视窗(viewport)被称为根(root).

当一个IntersectionObserver对象被创建时,其被配置为监听根中一段给定比例的可见区域.一旦IntersectionObserver被创建,则无法更改其配置,所以一个给定的观察者对象只能用来监听可见区域的特定变化值;然而,你可以在同一个观察者对象中配置监听多个目标元素.

这里封装一个组件并且自定义一个v-lazy属性,然后替换到src上,实现懒加载.

import { useIntersectionObserver } from "@vueuse/core";
import defaultImg from '@/assets/images/200.png'
import { App } from 'vue';

export default {install(app: App) {// 全局指令app.directive('lazy', {// mounted 是 v3 中自定义指令的生命周期,他会被自动调用// 它表示的含义和组件的mounted是一样的// el是 dom 元素, bindingmounted(el, binding) {el.src = defaultImgconsole.log('lazy', el, binding.value);//实时鉴定el是否可见, 如果可见 给它的src设置binding.valueconst { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {if (isIntersecting) {el.src = binding.valuestop()el.onerror = function () {el.src = defaultImg}}})}})}
} 
 <imgv-lazy="item.picture" alt=""/> 

四. 延迟加载视频

图片和视频这类静态资源资源占比都最大.与图片一样,视频同样可以延迟加载,来达到优化性能的目的.正常情况下加载视频,使用的是 video 标签,那么对于一些需要由用户自己播放的视频,最好指定video标签的preload属性为none,这样浏览器就不会预加载任何视频数据.为了占用空间,使用poster属性为video占位.如下:

<video controls preload="none" poster="replace.jpg"><source src="main.webm" type="video/webm"><source src="main.mp4" type="video/mp4">
</video> 

五. 使用第三方延迟加载库

除了上面介绍的一些延迟加载方法之外,还可以借助一些已经封装好的第三方库,下面是一些成熟的第三方库:

lozad.js 是超轻量级且只使用 Intersection Observer 的库, 因此它的性能极佳,但如果要在旧版本浏览器上使用,则需要配置polyfill.

lazysizes 是功能全面的延迟加载库,其使用的模式与本文所示的代码示例非常相似,会自动与

如果使用React,可以使用 react-lazyload来进行图片懒加载操作,这个库是React图片懒加载的主流解决方案.

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》.内容比较详实,对各个知识点的讲解也十分到位.



有需要的小伙伴,可以点击下方卡片领取,无偿分享

copyright notice
author[The front-end code farmer wang],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/266/202209230204380579.html

Random recommended