懒加载和预加载

337 阅读2分钟

why—— 为什么有懒加载和预加载呢?

   为什么需要懒加载和预加载呢?其实无论懒加载还是预加载,都是为了让用户有更好的使用体验,对程序员来说,那就是性能优化,我查了很多资料好像都是关于图片的懒加载和预加载,所有就拿图片来说吧!!!(所以下文中的懒加载和预加载都是针对图片来说的)

what—— 来深入了解一下它吧!

一.懒加载

   一般用于网页中延迟加载图像,用户滚动到它们之前,可视区域外的图像不会被加载 看看它的具体实现步骤吧!

1>知识点
  1. IntersectionObserver:是游览器提供的构造函数,其字面意思是交叉观察
const observer=new IntersectionObserver(callback)//这个callback函数在看见和看不见的时候被触发
observer.observe(DOM节点)
observer.unobserve(DOM节点) 
  1. 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——懒加载和预加载的意义

懒加载 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。 预加载 预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。