【优化】该组件在视口变化时或该组件自己尺寸变化时会出现卡顿情况

[spacepch]

Feature or optimization description
我的项目中使用该组件时是处于全屏状态，当侧边栏收起和展开时有过渡效果所以展开收起侧边栏的时候屏幕或视口尺寸变化是一个耗时操作不是瞬间完成，中间可能会触发该终端组件的频繁重绘导致页面会有卡顿，我想到on-resize的事件中给一个回调函数，该函数调用时才会重绘，这样组件重绘操作交给用户，这样用户可以做防抖措施，或者作者有什么更好的方法也可以。
Applicable scene

[spacepch]

这个卡顿电脑配置好不会特别明显，但是在手机端会很卡

[tzfun]

组件重绘操作是可以由外部调用者控制的，你这个应该会动画播放和组件渲染时间到一起了导致性能受影响，你可以将两个性能消耗较大的事情错开执行，我的应用场景里面也有这种切换页面的，性能看起来是接受的

[spacepch]

组件重绘操作是可以由外部调用者控制的，你这个应该会动画播放和组件渲染时间到一起了导致性能受影响，你可以将两个性能消耗较大的事情错开执行，我的应用场景里面也有这种切换页面的，性能看起来是接受的

我不是切换页面，是这个侧边栏再展开和收起的时候，会将terminal组件的尺寸挤变形，变形就会重绘，导致卡顿，就像ECharts统计图他提供了一个resize()方法，调用就会重绘，我原来就是使用ResizeObserver监视视口大小变化来调用ECharts的resize方法，就会出现卡顿情况，于是我给检测器加了一个防抖功能，就不会卡顿了，如果单单是元素变形应该不会造成卡顿，所以我猜测是terminal组件内部会resize，不像ECharts是将resize方法交给外部使用

[spacepch]

我看了terminal组件的on-resize事件，但是他似乎只是在组件尺寸变化时候触发这个事件，但并没有把重绘的操作提交出来，如果提供一个重绘的回调让外部手动重绘：onResize(elementInfo, name,resize){ resize() }这样就能做防抖功能了，外部决定何时重绘

[tzfun]

我明白你所说的重绘是什么意思了，你的重绘是指类似于echarts这种使用canvas绘制出来的效果吧，terminal不是基于canvas的，它就是一个纯Dom拼接的结果，并没有重绘的过程，只有在初始化创建Dom的时候会触发渲染，你所指的resize是由浏览器控制的，terminal的绘制也由浏览器控制。terminal在创建Dom的那一瞬间就已经渲染好了，后续不会再主动触发渲染。

其实你的场景里面的挤压和我前面说的页面切换其实是类似的，挤压的过程就是动画导致Dom样式变化的过程，它的开销是不小的，你并不一定需要真正将它resize，可以通过定位、遮罩等方式避免Terminal Dom大小的变化。

[spacepch]

好的，眼下只有这些办法了，感谢回复

[tzfun]

不客气，感谢对组件开源的支持 😊