面试题懒加载原理和预加载

917号先生
781 阅读3分钟

一、懒加载

1、懒加载的概念 懒加载也叫做延迟加载，按需加载，指的是在长网页中延迟加载图片数据，是一种比较好的网页性能优化的方式，在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，那这样就浪费了性能

如果使用图片的懒加载就可以解决以上问题，在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载，这样可以让网页的加载速度更快，减少服务器的负载，；懒加载适用于图片较多，页面列表较长比如在电商的情景

2、懒加载的特点

  • 提升用户体验：如果同时加载较多的图片，可能需要等待的时间较长，这样影响用户的体验，而使用懒加载就能提高用户的体验，其次可以提高页面的首屏渲染速度
  • 减少无用的资源加载：使用懒加载减少了服务器的压力和浏览，同时也减少了浏览器的负担
  • 防止加载过道图片而影响其他资源的文件加载：会影响网站应用的正常使用

3、懒加载的实现原理（敲重点） 图片的加载是因为src属性，当src赋值时，浏览器会请求图片的资源，根据这个原理我们可以使用html5的data-xxx属性来存储图片的路径，在需要加载图片的时候，将data-xxx图片的路径赋值为src，这样就完成了图片的按需加载，即懒加载。 对于data-xxx我暂时用data-src来定义 懒加载的实现重点在于，确定什么时候加载哪些图片，在浏览器中，可视区域内的资源就是用户需要的资源，所以当图片出现在可是区域时，获取图片的真实地址data-src并赋值给图片就可以了 理清：

（1） window.innerHeight 是浏览器可视区的高度

（2）document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动过的距离

（3）imgs.offsetTop是元素顶部距离文档顶部的距离（包括滚动条的距离）

（4）图片加载条件:img.offsetTop < window.innerHeight + document.body.scrollTop

image.png

代码实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .scrolltop {
        position: fixed;
        top: 0;
        left: 0px;
        background-color: red;
        font-size: 30px;
      }
      .winHeight {
        position: fixed;
        top: 50px;
        left: 0px;
        background-color: red;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="scrolltop"></div>
    <div class="winHeight"></div>
    <div class="container">
      <img src="./1.png" data-src="./2.png" alt="" />
      <img src="./1.png" data-src="./2.png" alt="" />
      <img src="./1.png" data-src="./2.png" alt="" />
      <img src="./1.png" data-src="./2.png" alt="" />
      <img src="./1.png" data-src="./2.png" alt="" />
      <img src="./1.png" data-src="./2.png" alt="" />
      <img src="./1.png" data-src="./2.png" alt="" />
      <img src="./1.png" data-src="./2.png" alt="" />
    </div>
    <script>
      let imgs = document.querySelectorAll("img");
      let scrolltopInnerhtml = document.querySelector(".scrolltop");
      let winHeighthtml = document.querySelector(".winHeight");
      function lazyload() {
        let scrollTop =
          document.body.scrollTop || document.documentElement.scrollTop;
        let winHeight = window.innerHeight;

        scrolltopInnerhtml.innerHTML = "scrollTop:" + scrollTop + "px";
        winHeighthtml.innerHTML = "winHeight:" + winHeight + "px";

        for (let i = 0; i < imgs.length; i++) {
          console.log(
            `[Log] imgs[${i}].offsetTop-->`,
            imgs[i].offsetTop,
            winHeight,
            scrollTop
          );
          if (imgs[i].offsetTop < winHeight + scrollTop) {
            imgs[i].src = imgs[i].getAttribute("data-src");
            // console.log("[Log] imgs[i]-->", i);
          }
        }
      }
      window.addEventListener("scroll", lazyload);
    </script>
  </body>
</html>

演示效果

懒加载.gif

赖加载与预加载的区别

这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

  • 懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的src属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的src属性，以此来实现图片的延迟加载。
  • 预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用js中的image对象，通过为image对象来设置scr属性，来实现图片的预加载。

代码放在：github.com/deedhei/web…

本人菜鸡，欢迎大佬指正，希望giegie们给我点个star

avatar
文章
阅读
粉丝