当在项目中对el-dialog通过自定义指令封装了手动拖拽的效果后,发现频繁的触发会有卡顿的现象不利于用户体验,经过尝试下面方法可以使拖拽效果更加丝滑:
1.修改transform不要修改position top left (具体和浏览器的渲染逻辑有关 )
2.需要给拖拽的元素增加will-change:transform
如果拖拽的div内部嵌套内容过多 需要增加transform:translateZ(0)将内部元素单独放在新的GPU层
3.在mousedown 绑定mousemove事件mouseup时 要进行解绑在mousedowne.stopPreventDefault e.stopPropagation阻止其他的冒泡事件 造成性能阻塞
4.mousemove事件里 改变transform时 通过requestAnimationFrame包裹处理 匹配浏览器刷新试图的频率 将动画更加平滑