vue.js - elementUI el-drawer 关闭卡顿，如何解决？

Question

elementUI el-drawer 点击右上角 关闭按钮会卡顿，添加动画这之后 edge浏览器可以了，谷歌上还是卡。这个怎么解决

Answer 1

在解决这个问题之前，我们首先需要理解卡顿现象可能的原因。卡顿通常是由于浏览器渲染性能不足或者 JavaScript 执行性能不足导致的。

针对你的问题，有以下几种可能的解决方案：

1. 优化渲染性能：这可能涉及到你的 ElementUI el-drawer 组件本身或者它所依赖的 CSS。某些 CSS 属性和值的组合可能会导致浏览器在渲染时出现性能问题。你可以尝试使用浏览器的开发者工具（例如 Chrome 的开发者工具或者 Edge 的开发者工具）来检查渲染性能。这些工具通常会提供关于哪些 CSS 属性或者值可能导致性能问题的信息。此外，对于一些复杂的 CSS 动画，使用 requestAnimationFrame 可以帮助浏览器在动画帧之间更好地分配资源。
2. 优化 JavaScript 执行性能：如果卡顿是由于 JavaScript 执行性能不足导致的，那么你可能需要优化你的 JavaScript 代码。这可能涉及到使用更高效的算法，减少不必要的计算，或者避免在短时间内执行大量的 JavaScript 代码。此外，如果你在使用 Vue.js 或者类似的框架，那么使用 Vue 的异步更新机制（例如 Vue.nextTick 或者 Vue.observable）可以帮助提高 JavaScript 的执行性能。
3. 使用更高效的浏览器：虽然这个建议可能不是最理想的解决方案，但是如果你已经尝试过上述两种方法并且问题仍然存在，那么你可能需要考虑使用一个更高效的浏览器，比如 Google Chrome 或者 Firefox。不同的浏览器在处理 JavaScript 和 CSS 渲染时的性能可能会有所不同。

对于你提到的添加动画之后 Edge 浏览器可以了，谷歌上还是卡，这可能是因为不同浏览器的动画 API 或实现方式略有不同，如果在某些浏览器中动画执行效率较低，我们可能需要寻求其他动画库（如 anime.js,GSAP 等）的帮助，它们提供了更为强大且跨浏览器的动画支持。

这些只是可能的解决方案，具体的解决方案可能需要你根据你的具体情况进行尝试和调整。如果你可以提供更多的信息，比如你的代码或者具体的卡顿现象，那么我可能可以提供更具体的建议。