有关vuedraggable拖拽插件问题

Question

有关vuedraggable拖拽插件，本地调试拖拽是没问题的，但是发布上线后，拖拽会很卡顿甚至整个页面卡死的问题

求可以解决问题的代码，详细方法

Answer 1

引自免费微信小程序：皆我百晓生

针对vuedraggable拖拽插件在本地调试正常而上线后出现卡顿甚至页面卡死的问题，可能存在以下几种情况：

1. 性能优化问题：

   • 渲染效率：线上环境可能由于数据量较大或者渲染组件复杂度过高导致性能瓶颈。检查一下在拖拽过程中是否有不必要的重渲染，尝试使用v-if、v-show或vue的动态组件来控制渲染范围。
   • 事件监听：确保在拖拽结束后及时移除不必要的事件监听器，避免内存泄漏。

2. 资源加载：

   • 图片或第三方资源：如果被拖拽的元素包含大量图片或其他异步加载资源，在网络环境不稳定时可能会造成阻塞。确认是否对这些资源进行了懒加载或预加载处理。

3. 浏览器兼容性：

   • 确保线上环境与本地环境使用的浏览器版本一致，某些老旧浏览器可能对HTML5 Drag and Drop API支持不佳，或者对Vue.js有兼容性问题。

4. 服务器响应时间： 如果拖拽操作伴随了向服务器发送请求的操作（比如实时保存排序结果），检查线上服务器响应速度是否足够快，慢响应也可能导致前端卡顿。

5. 代码调整建议：

   • 对于大数据量列表，考虑使用虚拟滚动(virtual scroll)技术。
   • 在vuedraggable的配置中开启“optimization”，减少DOM操作，例如：

     <draggable v-model="list" :options="{ group: 'people', optimization: { enabled: true } }">
       <!-- your list items -->
     </draggable>
     

6. 资源限制： 检查线上环境是否存在CPU、内存等系统资源的限制，必要时可考虑升级服务器资源配置。

7. 异常日志排查： 查看线上环境JavaScript console中的错误信息和警告，以便定位具体的技术问题。

综上所述，请根据实际情况排查上述可能性，并针对性地进行优化。如果问题依然存在，可以尝试通过Chrome DevTools Performance面板分析性能瓶颈，进一步定位问题所在。