Espresso自动化测试实战：从入门到项目落地的完整指南

优化前：卡得不行

上个月接手一个用 Espresso 写的移动端列表页，一打开就卡得我直皱眉。不是那种轻微掉帧，是真·卡——滑动时白屏半秒，点击按钮要等 1 秒才有反应，用户反馈“像在用诺基亚”。我本地跑起来更离谱，加载 50 条数据居然花了 5 秒多，连 Chrome DevTools 都卡到打不开 Performance 面板。

一开始我以为是后端接口慢，但抓包一看，API 响应才 200ms。问题肯定出在前端渲染逻辑上。Espresso 本身轻量，但项目里塞了太多不必要的重绘和事件监听，尤其是列表项用了大量动态绑定和嵌套组件，每次更新都触发整页 reflow。

找到瓶颈了！

折腾了半天，我决定用 Chrome 的 Performance 工具录个快照。结果一跑，火焰图里全是红色的 Recalculate Style 和 Layout，集中在几个自定义组件里。再看 Main Thread，大量时间花在 updateListItems 这个函数上——它居然在每次滚动时都重新生成所有 DOM 节点，而不是复用或局部更新。

另外，还发现一个隐藏雷点：每个列表项都绑定了 touchmove 事件用于手势操作，但没做节流。手指一滑，瞬间触发上百次回调，主线程直接堵死。

工具方面，除了 Chrome DevTools，我还用了 console.time() 手动埋点，确认了数据处理耗时（1.2s）远大于 DOM 操作（0.8s），说明问题核心在 JS 逻辑而非渲染本身。

核心代码就这几行

定位清楚后，我主要改了三块：虚拟滚动、事件节流、数据预处理。其他小修小补就不提了，效果微乎其微。

先说虚拟滚动。原来整个列表一次性渲染 50+ 项，现在只渲染可视区域 + 缓冲区。核心思路是监听 scroll 事件，动态计算当前应显示的索引范围，然后只更新这部分 DOM。关键代码如下：

// 优化前：全量渲染
function renderList(items) {
  const container = document.getElementById('list');
  container.innerHTML = '';
  items.forEach(item => {
    container.appendChild(createItemElement(item));
  });
}

// 优化后：虚拟滚动
let visibleStart = 0;
let visibleEnd = 0;

function renderVisibleItems(items, startIndex, endIndex) {
  const container = document.getElementById('list');
  // 只更新变化的部分
  for (let i = visibleStart; i < visibleEnd; i++) {
    if (i < startIndex || i >= endIndex) {
      container.children[i]?.remove();
    }
  }
  for (let i = startIndex; i < endIndex; i++) {
    if (!container.children[i]) {
      container.appendChild(createItemElement(items[i]));
    }
  }
  visibleStart = startIndex;
  visibleEnd = endIndex;
}

// 滚动监听（带防抖）
let scrollTimer = null;
window.addEventListener('scroll', () => {
  if (scrollTimer) clearTimeout(scrollTimer);
  scrollTimer = setTimeout(() => {
    const scrollTop = window.scrollY;
    const itemHeight = 100; // 假设每项高度固定
    const viewportHeight = window.innerHeight;
    const startIndex = Math.floor(scrollTop / itemHeight);
    const endIndex = Math.min(startIndex + Math.ceil(viewportHeight / itemHeight) + 2, items.length);
    renderVisibleItems(items, startIndex, endIndex);
  }, 16); // ~60fps
});

这里注意我踩过好几次坑：一开始没缓存 visibleStart/End，导致每次 scroll 都全量 diff，反而更卡；后来改成只移除超出范围的节点，新增缺失的，性能才稳住。

第二招是事件节流。把 touchmove 改成 requestAnimationFrame 控制频率：

// 优化前：无节流
item.addEventListener('touchmove', handleGesture);

// 优化后：raf 节流
let isRafPending = false;
function throttledHandleGesture(e) {
  if (!isRafPending) {
    isRafPending = true;
    requestAnimationFrame(() => {
      handleGesture(e);
      isRafPending = false;
    });
  }
}
item.addEventListener('touchmove', throttledHandleGesture);

别小看这改动，实测事件触发频率从 200+/秒降到 60/秒，主线程压力骤减。

最后是数据预处理。原来每次渲染都现场计算格式化字段（比如时间戳转日期），现在在数据加载完就一次性处理好：

// 优化前：渲染时计算
function createItemElement(item) {
  const el = document.createElement('div');
  el.textContent = formatDate(item.timestamp); // 每次都调用
  return el;
}

// 优化后：预处理
const processedItems = rawItems.map(item => ({
  ...item,
  formattedDate: formatDate(item.timestamp) // 一次搞定
}));
// 渲染时直接用 processedItems[i].formattedDate

踩坑提醒：这三点一定注意

• 别盲目用第三方虚拟滚动库：我试过两个流行库，要么 bundle 太大（加了 30KB），要么和现有样式冲突。手写 50 行核心逻辑反而更可控。
• 固定高度很重要：如果列表项高度不固定，虚拟滚动计算会复杂十倍。我们项目里强制统一高度，实在不行就用 MutationObserver 监听变化，但性能开销大，慎用。
• scroll 事件别忘 passive：加上 { passive: true } 能避免阻塞滚动，虽然对性能提升不大，但能消除控制台警告，何乐不为？

性能数据对比

改完后本地测试数据很直观：

• 首屏加载时间：5.2s → 800ms（下降 85%）
• 滚动帧率：平均 18fps → 58fps（接近满帧）
• 内存占用：从 120MB 降到 45MB（减少 62%）

线上灰度发布后，用户反馈“终于不卡了”，崩溃率也降了 30%（之前卡死会触发页面 reload）。虽然还有两个小问题：快速滚动时偶尔白屏（缓冲区不够大）、低端机上 raf 有延迟，但无伤大雅，后续再优化。

这个方案不是最优的——比如用 Web Worker 处理数据能进一步解耦，但考虑到项目周期和收益比，手写虚拟滚动 + 节流已经够用。毕竟，能跑起来的代码才是好代码，对吧？

以上是我的优化经验，有更好的方案欢迎交流

这次优化让我深刻体会到：Espresso 本身没性能问题，问题出在怎么用。很多开发者（包括我以前）总想着“功能先跑起来”，结果后期填坑成本更高。如果你也在用 Espresso 做复杂列表，不妨试试上述方法。核心就一点：**别让主线程干太多活**。

这个技巧的拓展用法还有很多，比如结合 Intersection Observer 做懒加载，或者用 CSS contain 属性隔离重绘区域，后续会继续分享这类博客。以上是我踩坑后的总结，希望对你有帮助。有更优的实现方式？评论区聊聊！