企业官网建设流程全解析

当在项目中对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包裹处理 匹配浏览器刷新试图的频率 将动画更加平滑