图说浏览器从0加载——懒加载函数深度详解

前端

2023-02-20 02:27:15

图片加载优化：提升网页性能和用户体验

如何加速网页加载速度？

当我们访问一个网页时，背后会发生许多事情。浏览器首先从服务器获取HTML代码，然后根据HTML代码加载所需的资源，例如CSS样式表、JavaScript脚本和图片。图片是网页上常见的元素，但处理不当会严重影响网页加载速度。

为了提高服务器效率和网页加载速度，我们可以采取多种措施：

压缩图片 ：使用图像压缩工具可以减小图片大小，加快加载速度。
优化图片格式 ：不同的图片格式具有不同的压缩率和加载速度。JPEG格式的压缩率最高，加载速度最快，但质量较差。PNG格式的压缩率较低，加载速度较慢，但质量较好。在选择图片格式时，需要权衡图片质量和加载速度。
利用CDN加速 ：CDN（内容分发网络）将图片缓存到离用户最近的服务器上，从而加快加载速度。

如何提升用户体验？

优化客户端体验、提升用户满意度的方法也很多：

懒加载 ：懒加载是一种图片加载技术，可以延迟加载不在当前视口中的图片，减少网页初始加载时间。当用户滚动到图片区域时，图片才会被加载。
防抖加载 ：防抖加载可以防止用户在快速滚动页面时出现图片加载闪烁的问题。它会将用户的滚动事件延迟一段时间，然后再加载图片。

懒加载：思路与执行

懒加载的执行思路很简单：

在HTML代码中，为需要懒加载的图片添加一个特殊的属性，例如data-src属性。
使用JavaScript脚本监听用户的滚动事件。
当用户滚动到需要懒加载的图片所在位置时，将图片的src属性设置为data-src属性的值，从而加载图片。

<img data-src="image.jpg">

window.addEventListener("scroll", function() {
  var images = document.querySelectorAll("img[data-src]");

  for (var i = 0; i < images.length; i++) {
    var image = images[i];

    if (image.getBoundingClientRect().top < window.innerHeight) {
      image.src = image.getAttribute("data-src");
    }
  }
});

防抖加载：实现思路

防抖加载的实现也比较简单：

在HTML代码中，为需要防抖加载的图片添加一个特殊的属性，例如data-src属性。
使用JavaScript脚本监听用户的滚动事件。
当用户滚动页面时，将用户的滚动事件延迟一段时间。
当延迟时间结束后，将图片的src属性设置为data-src属性的值，从而加载图片。

<img data-src="image.jpg">

var throttleDelay = 250;
var lastScrollTime = 0;

window.addEventListener("scroll", function() {
  var now = new Date().getTime();

  if (now - lastScrollTime < throttleDelay) {
    return;
  }

  lastScrollTime = now;

  var images = document.querySelectorAll("img[data-src]");

  for (var i = 0; i < images.length; i++) {
    var image = images[i];

    if (image.getBoundingClientRect().top < window.innerHeight) {
      image.src = image.getAttribute("data-src");
    }
  }
});