提升性能的代码重构：让显示更流畅的实用技巧

刷网页时卡顿、动画掉帧，有时候不是硬件不行，而是代码写得不够利索。特别是在前端显示调校中，看似不起眼的几行代码，可能就是拖慢渲染速度的元凶。通过合理的代码重构，能显著提升页面响应速度和视觉流畅度。

减少重排与重绘

每次修改元素的几何属性，比如宽度、高度或位置，浏览器都会触发重排（reflow），接着是重绘（repaint）。频繁操作会直接导致卡顿。例如，在循环中动态设置样式：

for (let i = 0; i < items.length; i++) {
  item.style.width = '100px';
  item.style.height = '50px';
}

这会让浏览器反复计算布局。更好的方式是将样式集中到一个类中，通过切换类名来控制：

.item-active {
  width: 100px;
  height: 50px;
}

// 重构后
item.classList.add('item-active');

利用 CSS Transform 提升动画性能

传统用 top/left 控制位移会触发重排，而使用 transform: translate() 则由合成线程处理，不干扰主线程。比如做一个滑入动画：

.slide-in {
  transition: transform 0.3s ease;
}

.slide-in.active {
  transform: translateX(100%);
}

这种写法把位移交给 GPU 处理，动画更顺滑，尤其在移动端效果明显。

避免重复查询 DOM

每次调用 document.getElementById 或 querySelector 都有开销。如果在多个地方反复查找同一个元素，不如一次性缓存起来：

const $menu = document.querySelector('.nav-menu');
const $btn = document.querySelector('.menu-toggle');

$btn.addEventListener('click', () => {
  $menu.classList.toggle('open');
});

这样不仅提升执行效率，也让代码更清晰。

懒加载非关键资源

图片、字体等资源如果一开始就全加载，页面启动就会变慢。尤其是高清显示设备，资源体积更大。采用懒加载策略，只在进入视口时才加载：

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy">

<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });

  document.querySelectorAll('.lazy').forEach(img => observer.observe(img));
</script>

这种方式让首屏渲染更快，用户感知更流畅。

精简 JavaScript 逻辑

复杂的条件判断或嵌套循环容易造成卡顿。比如遍历大量节点做匹配：

for (let i = 0; i < nodes.length; i++) {
  if (nodes[i].className === 'target') {
    // 处理逻辑
  }
}

可以改用 querySelectorAll 直接筛选：

document.querySelectorAll('.target').forEach(node => {
  // 处理逻辑
});

语义更清楚，性能也更高。

代码重构不是重写整个项目，而是针对瓶颈点做精准优化。尤其是在高分辨率屏幕上，细微的性能差异会被放大。从一次简单的类名切换开始，也许就能换来更顺滑的视觉体验。