我使用的这个wavesurfer.js 波形控件是 Canvas绘制的。每次重新加载都很慢，怎样提高用户体验呢？

Question

我使用的这个wavesurfer.js 波形控件是 Canvas绘制的。
每次重新加载都很慢，都是加载完之后。突然闪现出来。非常突兀。
怎样提高用户体验呢？

我的写法有问题吗？
` this.$nextTick(() => {

  // console.log('加载WaveSurfer')
  // console.log(WaveSurfer)
  this.wavesurfer = WaveSurfer.create({
    // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
    container: this.$refs.waveform,
    // 光标的填充颜色，指示播放头的位置。
    cursorColor: 'red',
    // 更改波形容器的背景颜色。
    backgroundColor: 'white',
    // 光标后的波形填充颜色。
    waveColor: '#0066CC',
    // 光标后面的波形部分的填充色。当progressColor和waveColor相同时，完全不渲染进度波
    progressColor: '#99CCFF',
    backend: 'MediaElement',
    // 音频播放时间轴
    mediaControls: false,
    // 播放音频的速度
    audioRate: '1',
    // 插件：此教程配置了光标插件和时间轴插件
    plugins: [
      // 光标插件
      CursorPlugin.create({
        showTime: true,
        opacity: 1,
        customShowTimeStyle: {
          'background-color': '#000',
          color: '#fff',
          padding: '2px',
          'font-size': '10px'
        }
      }),
      // 时间轴插件
      Timeline.create({
        container: '#wave-timeline'
      })
    ]
  })
  this.wavesurfer.on('error', function(e) {
    console.warn(e)
  })
  //加载音频url
  this.wavesurfer.load(this.voiceSrc)
  this.volumeValue = this.wavesurfer.getVolume() * 100
})


let erd = elementResizeDetectorMaker()
let that = this
erd.listenTo(document.getElementById('mixin-components-container'), (element) => {
  that.$nextTick(() => {
    that.wavesurfer.load(this.voiceSrc)
  })
})`

Answer 1

从你给出的例图来说，信息量太大，需要绘制的点过多（数据获取和处理都会慢）才是绘制慢的根本原因，
其实你可以考虑一下如何降低绘制量，比如不同显示比例下降低绘制精度，如在全图下隔10个数据才真正绘制一个，显示局部时调整间隔，最大显示时每个都绘制（但只处理可能看到的部分）
这样数量级的数据减少会加快很多。
其实想一下，在全面显示时细节信息绘制上有点偏差其实是看不出来的。