why—— 为什么有懒加载和预加载呢?
为什么需要懒加载和预加载呢?其实无论懒加载还是预加载,都是为了让用户有更好的使用体验,对程序员来说,那就是性能优化
,我查了很多资料好像都是关于图片的懒加载和预加载,所有就拿图片来说吧!!!(所以下文中的懒加载和预加载都是针对图片来说的)
what—— 来深入了解一下它吧!
一.懒加载
一般用于网页中延迟加载图像,用户滚动到它们之前,可视区域外的图像不会被加载 看看它的具体实现步骤吧!
1>知识点
IntersectionObserver:
是游览器提供的构造函数,其字面意思是交叉观察
const observer=new IntersectionObserver(callback)//这个callback函数在看见和看不见的时候被触发
observer.observe(DOM节点)
observer.unobserve(DOM节点)
window.innerHeight()
可以获取窗口大小 元素的getBoundingClientRect().top
可以获取图片到视窗上边的距离
2>测试demo
//css
.top{
height: 1200px;
width: 100%;
background-color: pink;
}
.end{
height: 800px;
width: 100%;
background-color: blue;
}
//html5模块
<div class="top"></div>
<div class="center">
<img data-img="./images/pic1.png">
<img data-img="./images/pic2.png">
<img data-img="./images/pic3.png">
</div>
<div class="end"></div>
//js模块
const images=document.querySelectorAll('img')
const callback=entries=>{
//entry是数组 这是三张图片的信息的数组 所以通过遍历可以获取到img entry也就是一个img
entries.forEach(entry=>{
//isIntersecting是一个布尔值 只有当图片在视图区域才为true 图片是否在可视区域 通过这个就可以知道是否已经观察到图片 或者说图片是否已经被加载
if(entry.isIntersecting){
const image=entry.target
const dataStr=image.getAttribute('data-img')
image.setAttribute('src',dataStr)
observer.unobserve(image) //取消交叉观察 让img元素的observer.observe(image)失效
console.log('触发了IntersectionObserver事件');
}
})
}
const observer=new IntersectionObserver(callback)
//让每个img元素都被观察
images.forEach(image=>{
observer.observe(image)
})
这个测试就可以完全的实现图片的懒加载,当图片在视图区域的时候才会去加载,且不会多于的触发页面滚动事件
二.预加载
预加载:
提前加载图片,当用户需要查看时可直接从本地缓存中渲染
实现预加载的方法(具体代码就不展示了)
- 用CSS和JavaScript实现预加载
- 仅使用JavaScript实现预加载
- 使用Ajax实现预加载
三.两种区别
两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。
how——懒加载和预加载的意义
懒加载 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。 预加载 预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。