koca / vue-prism-editor

A dead simple code editor with syntax highlighting and line numbers. 3kb/gz
https://prism-editor.netlify.com
MIT License
751 stars 84 forks source link

Is there any way to improve the performance problem? #116

Closed YuMao233 closed 1 year ago

YuMao233 commented 3 years ago

I followed the tutorial to write a simple editor (https://codesandbox.io/s/vue-3-support-for-vue-prism-editor-fm7v5?file=/src/App.vue),

When browsing more than 300 lines of Javascript code, there will be obvious performance problems and slow typing.

I try to use the throttle design, there is a significant improvement. But will affect the user experience.

 highlighter(code) {
      clearTimeout(this.highlighterThrottle);
      this.highlighterThrottle = setTimeout(() => (this.highlighterThrottleb = false), 100);
      if (!this.highlighterThrottleb) {
        this.highlighterThrottleb = true;
        return highlight(code, languages.js);
      } else {
        return code;
      }
    }

Is there any way to improve this problem?