体验顺畅：浅谈Draggable排序性能优化技巧

2023-10-09 17:29:56

使用 Draggable 进行列表排序：优化性能的指南

在当今快节奏的数字时代，网站和应用程序交互的流畅性比以往任何时候都更加重要。而Draggable 作为一款强大的 JavaScript 库，可以让用户轻松拖拽元素，从而实现交互式排序功能。然而，在使用 Draggable 进行列表排序时，我们有时会遇到性能问题。

为何性能会下降？

当使用 Draggable 对列表中的元素进行拖拽排序时，会频繁地修改 DOM，这会导致性能下降。DOM（文档对象模型）是浏览器用来表示网页结构的一个树形结构。对 DOM 的每次修改都会触发浏览器的重新渲染，这是一个耗时的过程。

优化策略

为了解决性能问题，我们可以通过以下策略对 Draggable 排序进行优化：

1. 最小化 DOM 操作

在排序过程中，尽可能减少对 DOM 的直接修改。例如，我们可以使用 CSS 过渡来平滑元素的位置，而不是直接修改它们的style 属性。

2. 采用 translate 平滑过渡

在拖拽元素时，我们可以通过translate 对元素的位置进行修改。translate 是一种 CSS 变换，它可以平滑地移动元素，而不会触发浏览器的重新渲染。

3. 最后再进行 DOM 操作

在完成排序后，我们可以再对 DOM 进行一次操作，将元素的位置最终确定。这样做可以避免在排序过程中多次对 DOM 进行修改，从而提高性能。

实例应用

以下代码演示了如何应用优化策略，使用 Draggable 对列表进行排序：

const list = document.getElementById('list');
Sortable.create(list, {
  animation: 150,
  onStart: (evt) => {
    evt.item.style.transition = 'none';
  },
  onMove: (evt) => {
    const target = evt.related;
    const nextSibling = target.nextSibling;
    if (nextSibling) {
      nextSibling.style.transform = `translateX(${evt.clientX - evt.relatedRect.left}px)`;
    }
  },
  onEnd: (evt) => {
    const target = evt.item;
    const nextSibling = target.nextSibling;
    if (nextSibling) {
      nextSibling.style.removeProperty('transform');
    }
    target.style.removeProperty('transition');
  }
});