TimePicker组件实战经验分享 避坑指南与优化技巧全解析

优化前：卡得不行

最近在搞一个项目，里面用到了一个TimePicker组件。这个组件本来是挺好的，但是不知道为啥，一到实际项目里就变得特别卡。用户点一下时间选择器，半天才出来，有时候甚至要等上好几秒，用户体验简直糟透了。

找到瓶颈了！

我一开始以为是网络问题或者服务器响应慢，但查了一圈发现并不是。然后我就开始怀疑是不是代码的问题。于是，我用了Chrome的DevTools来定位问题。一看性能面板，发现CPU占用率特别高，特别是渲染和脚本执行这两块。

进一步分析后发现，原来是因为我在TimePicker组件里用了大量的DOM操作，比如动态生成时间选项、实时更新时间范围等等。这些操作导致了大量的重绘和回流，使得整个组件变得非常卡顿。

试了几种方案

为了优化这个问题，我试了好几种方案。首先是减少不必要的DOM操作。之前我是每秒都重新生成一次时间选项，后来改成了只在用户点击的时候生成。这确实有改善，但还不够。

接着，我尝试使用虚拟列表（Virtual List）来优化时间选项的渲染。虚拟列表可以只渲染当前可见的部分，而不是一次性渲染所有选项。这样可以大大减少DOM节点的数量，从而提升性能。

核心代码就这几行

这是优化前的代码：

// 优化前的代码
function renderTimeOptions() {
  const options = [];
  for (let i = 0; i < 1440; i++) { // 24小时 * 60分钟
    const hour = Math.floor(i / 60);
    const minute = i % 60;
    options.push(&lt;option value=&quot;${i}&quot;&gt;${hour}:${minute &lt; 10 ? &#039;0&#039; + minute : minute}&lt;/option&gt;);
  }
  document.getElementById('time-select').innerHTML = options.join('');
}

setInterval(renderTimeOptions, 1000); // 每秒重新生成一次

这是优化后的代码：

// 优化后的代码
const timeSelect = document.getElementById('time-select');

function renderTimeOption(index) {
  const hour = Math.floor(index / 60);
  const minute = index % 60;
  return <option value="${index}">${hour}:${minute < 10 ? '0' + minute : minute}</option>;
}

function renderVisibleTimeOptions(startIndex, endIndex) {
  let options = '';
  for (let i = startIndex; i <= endIndex; i++) {
    options += renderTimeOption(i);
  }
  timeSelect.innerHTML = options;
}

function handleScroll(event) {
  const scrollTop = event.target.scrollTop;
  const itemHeight = 30; // 假设每个选项的高度为30px
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = startIndex + 5; // 只显示6个选项
  renderVisibleTimeOptions(startIndex, endIndex);
}

timeSelect.addEventListener('scroll', handleScroll);
renderVisibleTimeOptions(0, 5); // 初始渲染前6个选项

性能数据对比

通过这次优化，加载时间从原来的5秒降到了800毫秒左右。而且在滚动时，性能也有了显著提升，用户反馈说体验好多了。

当然，优化后还是有一些小问题，比如在某些极端情况下会出现短暂的卡顿，但总体来说已经很不错了。

以上是我的优化经验

这次优化让我深刻体会到，前端性能优化真的是一门艺术。有时候一个小改动就能带来巨大的提升。希望我的经验对你有所帮助，如果有更好的方案欢迎交流。