一些在前端开发中常见的算法-性能优化算法-（防抖；节流；虚拟化；懒加载）

最新推荐文章于 2024-09-14 22:25:23 发布

跳房子的前端

最新推荐文章于 2024-09-14 22:25:23 发布

阅读量806

点赞数 26

分类专栏：前端面试前端算法文章标签：算法 javascript vue.js

本文链接：https://blog.csdn.net/shenfangda520/article/details/142236702

版权

前端面试同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端算法

4 篇文章 0 订阅

订阅专栏

性能优化是前端开发中至关重要的一部分，尤其是在处理大规模数据、复杂交互或高频率的事件时。以下是一些常见的性能优化算法和技术，包括防抖、节流、虚拟化以及懒加载，我将一步一步地讲解它们的实现方式。

1. 防抖（Debounce）

防抖是一种优化技术，用于减少函数执行的频率。它特别适用于处理频繁触发的事件，如窗口调整大小、输入框输入等。

步骤：

定义防抖函数：创建一个函数，该函数在每次事件触发时都重新设置定时器。
等待时间：只有在等待时间结束后，函数才会被执行。
清除定时器：每次事件触发时，清除之前的定时器，重置等待时间。

代码实现：

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

// 示例
const handleResize = debounce(() => {
  console.log('Window resized');
}, 500);

window.addEventListener('resize', handleResize);

解释：

debounce 函数接受两个参数：要执行的函数 func 和等待时间 wait。
每次事件触发时，清除之前的定时器并设置新的定时器。
在等待时间 wait 结束后执行函数 func。

2. 节流（Throttle）

节流是另一种优化技术，用于限制函数的执行频率。它适用于处理那些需要限制执行频率的事件，如滚动事件、频繁的按钮点击等。

步骤：

定义节流函数：创建一个函数，该函数只在一定时间间隔内执行一次。
记录时间：使用时间戳来记录上次函数执行的时间。
限制执行：检查当前时间与上次执行时间的间隔，如果超过设定的时间间隔，则执行函数。

代码实现：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    const context = this;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 示例
const handleScroll = throttle(() => {
  console.log('Scroll event');
}, 1000);

window.addEventListener('scroll', handleScroll);

解释：

throttle 函数接受两个参数：要执行的函数 func 和限制时间 limit。
记录上次执行时间 lastRan 和下次执行时间 lastFunc。
如果当前时间与上次执行时间的间隔超过 limit，则执行函数。

3. 虚拟化（Virtualization）

虚拟化 是一种优化技术，主要用于处理大量数据的显示，例如长列表或大表格。通过只渲染可视区域的部分内容来提高性能。

步骤：

计算可视区域：计算当前视口中可见的部分。
渲染可见区域：只渲染可视区域内的内容，其它部分不渲染。
滚动事件：监听滚动事件，根据滚动位置动态更新渲染内容。

代码实现（简化版）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Virtualized List</title>
  <style>
    #container {
      height: 400px;
      overflow-y: scroll;
      border: 1px solid #ccc;
    }
    .item {
      height: 30px;
      border-bottom: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    const container = document.getElementById('container');
    const totalItems = 1000;
    const itemHeight = 30;
    const visibleCount = Math.ceil(container.clientHeight / itemHeight);
    const buffer = 5;
    
    function render(start) {
      container.innerHTML = '';
      for (let i = start; i < start + visibleCount + buffer; i++) {
        if (i < totalItems) {
          const item = document.createElement('div');
          item.className = 'item';
          item.textContent = `Item ${i}`;
          container.appendChild(item);
        }
      }
    }

    function onScroll() {
      const scrollTop = container.scrollTop;
      const start = Math.floor(scrollTop / itemHeight);
      render(start);
    }

    container.addEventListener('scroll', onScroll);
    render(0); // 初始渲染
  </script>
</body>
</html>

解释：

计算可视区域和缓冲区，渲染当前可见区域及其附近的内容。
监听滚动事件，根据滚动位置动态渲染新的内容。

4. 懒加载（Lazy Loading）

懒加载 是一种优化技术，用于延迟加载那些不立即需要的资源（如图片、组件等），以减少初始加载时间。

步骤：

标记懒加载元素：将要懒加载的资源标记为 data-src 或 loading="lazy"。
监听滚动事件：检查这些资源是否进入视口。
加载资源：当资源进入视口时，更新其 src 属性以开始加载。

代码实现（图片懒加载）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy Load</title>
</head>
<body>
  <img data-src="image1.jpg" class="lazy" alt="Image 1">
  <img data-src="image2.jpg" class="lazy" alt="Image 2">
  <img data-src="image3.jpg" class="lazy" alt="Image 3">

  <script>
    function lazyLoad() {
      const lazyImages = document.querySelectorAll('img.lazy');
      const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
      };

      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            observer.unobserve(img);
          }
        });
      }, options);

      lazyImages.forEach(img => {
        observer.observe(img);
      });
    }

    document.addEventListener('DOMContentLoaded', lazyLoad);
  </script>
</body>
</html>