前端编程技巧 | H5在线商城项目复盘之后，总结出了若干个场景解决方案

const startIndex = Math.floor(container.scrollTop / itemHeight);
const endIndex = startIndex + Math.ceil(viewportHeight / itemHeight);

function renderBatch(data, batchSize) {
  let index = 0;
  const nextBatch = () => {
    const batch = data.slice(index, index + batchSize);
    appendToDOM(batch); // 使用DocumentFragment批量插入
    index += batchSize;
    if (index < data.length) requestIdleCallback(nextBatch);
  };
  nextBatch();
}

<img src="placeholder.svg" 
     data-srcset="image-300.webp 300w, image-600.webp 600w"
     sizes="(max-width: 600px) 300px, 600px">

<img src="placeholder.webp" 
     data-srcset="image@1x.webp 1x, image@2x.webp 2x"
     loading="lazy">

.scroll-container {
  -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
  overflow-scrolling: touch;
}

/**
 * 使用Puppeteer生成页面骨架屏HTML
 * 该函数通过Puppeteer无头浏览器访问指定URL，将页面中的图片替换为灰色占位块，
 * 最终返回处理后的HTML内容用于生成骨架屏效果
 * 
 */
const puppeteer = require('puppeteer');

(async () => {
  // 启动无头浏览器实例
  const browser = await puppeteer.launch();
  
  // 创建新页面并导航至目标URL，等待网络空闲状态
  const page = await browser.newPage();
  await page.goto('https://your-site.com', { waitUntil: 'networkidle2' });

  /**
   * 页面DOM处理
   */
  await page.evaluate(() => {
    Array.from(document.querySelectorAll('img')).forEach(img => {
      img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
      img.style.backgroundColor = '#EEE';
    });
  });

  // 获取处理后包含灰色占位块的HTML内容
  const skeletonHTML = await page.content();
  
  // 关闭浏览器实例释放资源
  await browser.close();
})();

/**
 * 跟踪滚动速度并根据速度动态调整预加载范围
 * 
 * 该事件监听器通过计算两次滚动事件之间的位置差和时间差来获取滚动速度。
 * 当检测到高速滚动时，会扩大预加载范围以提高用户体验。
 */
let scrollVelocity = 0;
window.addEventListener('scroll', () => {
  // 计算当前滚动位置与上次位置的差值，除以时间差得到滚动速度
  const newPos = window.scrollY;
  scrollVelocity = Math.abs(newPos - lastPos) / (Date.now() - lastTime);
  
  // 更新上次记录的位置和时间
  lastPos = newPos;
  lastTime = Date.now();

  // 当滚动速度超过阈值时，扩大预加载范围为视窗高度的2倍
  if (scrollVelocity > 50) preloadArea = 2 * viewportHeight;
});

<!-- 预加载首屏骨架屏资源 -->
<link rel="preload" href="skeleton.css" as="style">
<link rel="preload" href="skeleton-data.json" as="fetch">

const checkVisibility = throttle(() => {
  const rect = element.getBoundingClientRect();
  if (rect.top < window.innerHeight * 1.5) loadComponent();
}, 200);

/**
 * 使用IntersectionObserver实现的图片懒加载函数
 */
const lazyLoad = () => {
  // 获取所有需要懒加载的图片元素
  const images = document.querySelectorAll('img[data-src]');
  
  // 创建IntersectionObserver实例
  const observer = new IntersectionObserver((entries) => {
    // 处理每个观察到的元素
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;  // 替换真实图片地址
        observer.unobserve(img);    // 图片加载后停止观察
      }
    });
  }, {
    rootMargin: '200px 0px' // 设置观察区域扩展200px，实现提前加载
  });

  // 开始观察所有目标元素
  images.forEach(img => observer.observe(img));
};

/**
 * 懒加载的降级实现方案（用于不支持IntersectionObserver的环境）
 * 功能：通过监听scroll事件实现类似懒加载效果
 * 实现原理：
 * 1. 使用节流函数优化scroll事件处理
 * 2. 检查图片是否进入视口下方300px范围内
 * 3. 满足条件时加载真实图片
 */
function fallbackLazyLoad() {
  // 节流处理scroll事件
  const scrollHandler = throttle(() => {
    const viewportHeight = window.innerHeight;
    images.forEach(img => {
      const rect = img.getBoundingClientRect();
      // 判断图片是否进入预加载区域（视口下方300px）
      if (rect.top < viewportHeight + 300) {
        img.src = img.dataset.src;
      }
    });
  }, 200);
  
  // 绑定scroll事件监听
  window.addEventListener('scroll', scrollHandler);
}

/**
 * 增强型防抖函数，支持更多控制选项
 * @param {Function} fn - 需要防抖处理的函数
 * @param {number} delay - 防抖延迟时间(毫秒)
 * @param {Object} [options={}] - 配置选项
 * @param {number} [options.maxWait] - 最大等待时间(毫秒)，超过该时间强制执行
 * @param {boolean} [options.leading=false] - 是否在延迟开始前立即执行
 * @param {boolean} [options.trailing=true] - 是否在延迟结束后执行
 * @returns {Function} - 返回防抖处理后的函数
 */
function enhancedDebounce(fn, delay, options = {}) {
  let timer = null;
  let lastInvokeTime = 0;
  const { maxWait = null, leading = false, trailing = true } = options;

  return function (...args) {
    const context = this;
    const currentTime = Date.now();

    // 处理leading选项：延迟开始前立即执行
    if (leading && !timer) {
      fn.apply(context, args);
      lastInvokeTime = currentTime;
    }

    // 每次调用都清除之前的定时器
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    // 处理maxWait选项：超过最大等待时间强制执行
    if (maxWait && currentTime - lastInvokeTime >= maxWait) {
      fn.apply(context, args);
      lastInvokeTime = currentTime;
      return;
    }

    // 设置新的定时器处理trailing选项
    timer = setTimeout(() => {
      if (trailing) {
        fn.apply(context, args);
        lastInvokeTime = Date.now();
      }
      timer = null;
    }, delay);
  };
}

/**
 * 搜索输入框应用防抖函数示例
 * 配置说明：
 * - 延迟300ms执行
 * - 不启用leading执行
 * - 启用trailing执行
 * - 设置1000ms最大等待时间
 */
searchInput.addEventListener(
  'input',
  enhancedDebounce(
    async e => {
      const keywords = e.target.value;
      const res = await fetchSuggestions(keywords);
      renderSuggestions(res);
    },
    300,
    { leading: false, trailing: true, maxWait: 1000 },
  ),
);

let isComposing = false;
input.addEventListener('compositionstart', () => isComposing = true);
input.addEventListener('compositionend', (e) => {
  isComposing = false;
  triggerDebouncedFetch(e);  // 手动触发防抖函数
});
input.addEventListener('input', (e) => {
  if (!isComposing) triggerDebouncedFetch(e); // 非组词状态才触发
});

let isCancelled = false;
const fetchSuggestions = (keyword) => {
  isCancelled = true;  // 取消前序请求
  setTimeout(() => {
    if (!isCancelled) {
      // 执行请求...
    }
  }, 300);
};

useEffect(() => {
  const debouncedFetch = debounce(fetchSuggestions, 300);
  inputRef.current.addEventListener('input', debouncedFetch);
  return () => {
    debouncedFetch.cancel();
    inputRef.current.removeEventListener('input', debouncedFetch);
  };
}, []);

<div class="product">
  <img src="product.jpg" alt="商品">
  <button class="add-to-cart">加入购物车</button>
</div>
<div class="cart-icon">
  <span class="cart-count">0</span>
</div>

.fly-img {
  position: fixed; /* 脱离文档流 */
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.5, -0.5, 1, 1); /* 贝塞尔曲线模拟抛物线 */
  pointer-events: none; /* 避免遮挡点击 */
  will-change: transform; /* 预声明优化 */
}

/**
 * 为"加入购物车"按钮添加点击事件处理函数，实现商品图片飞入购物车的动画效果
 * 1. 克隆商品图片并创建动画元素
 * 2. 计算起始位置(商品图片)和目标位置(购物车图标)的坐标差值
 * 3. 使用CSS transform实现位移动画
 * 4. 动画完成后移除临时元素并更新购物车数量
 */
document.querySelector('.add-to-cart').addEventListener('click', e => {
  // 克隆商品图片并设置动画样式
  const productImg = e.target.previousElementSibling;
  const flyImg = productImg.cloneNode(true);
  flyImg.classList.add('fly-img');
  document.body.appendChild(flyImg);

  // 计算动画起始点和终点的坐标差值
  const startRect = productImg.getBoundingClientRect();
  const endRect = document.querySelector('.cart-icon').getBoundingClientRect();
  const deltaX = endRect.left - startRect.left;
  const deltaY = endRect.top - startRect.top;

  // 设置动画初始位置(与商品图片位置重合)
  flyImg.style.transform = `translate(${startRect.left}px, ${startRect.top}px)`;

  // 使用requestAnimationFrame启动位移动画
  // 动画效果包括: 移动到购物车位置、缩小尺寸和透明度变化
  requestAnimationFrame(() => {
    flyImg.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(0.2)`;
    flyImg.style.opacity = '0.5';
  });

  // 动画结束后清理临时元素并更新购物车数量显示
  flyImg.addEventListener('transitionend', () => {
    flyImg.remove();
    updateCartCount();
  });
});

window.addEventListener('resize', () => {
  if (document.activeElement.tagName === 'INPUT') {
    activeElement.scrollIntoView({ behavior: 'smooth' });
  }
})[1](@ref)。

@-moz-keyframes flyToCart { /* Firefox专属前缀 */ }
.fly-img {
  -moz-transition: transform 0.8s ease;
}[8](@ref)