luminousNcc
V2EX  ›  Vue.js

如何优化 Element UI 2.0 的 input 组件在巨量文本下拖动和输入的卡顿问题?

  •  
  •   luminousNcc · Apr 10, 2024 · 2656 views
    This topic created in 947 days ago, the information mentioned may be changed or developed.

    各位大佬,小弟最近接手了一个项目,是一个 TXT 文档的在线编辑器,使用基于 Vue2 的 Element UI 2.0.

    编辑器的部分直接用了一个el-input,具体如下所示:

    <el-input
      v-model="book.content"
      type="textarea"
      :autosize="{ minRows: 10, maxRows: 30 }"/>
    

    现在的问题是当这个 TXT 文档的内容量过大(字数超过 100000 后):

    1. 拖动右侧的滚动条,文本渲染卡顿,拖动一次到内容呈现需要 2-3 秒。
    2. 输入文字时卡顿,从键盘敲击到文字出现需要 5 秒。
    3. 点击插入光标时卡顿,从点击到光标响应出现需要 2-3 秒。

    想请问各位大佬有什么优化这种卡顿问题的方法吗?

    5 replies  •  2024-04-13 06:51:30 +08:00
    asiasky
    asiasky
    Apr 11, 2024❤️1
    1
    用元素的 contnetEditable 属性做输入,https://caniuse.com/?search=contentEditable
    ZGame
    ZGame
    Apr 11, 2024
    2
    换成 vscode ide 的编辑器内核
    realJamespond
    realJamespond
    Apr 11, 2024
    3
    换第三方的 editor 试试,ckeditor
    Kmmoonlight
    Kmmoonlight
    Apr 11, 2024
    4
    https://prosemirror.net/examples/ ProseMirror 我们内网项目写脚本用这个
    luminousNcc
    luminousNcc
    OP
    Apr 13, 2024
    5
    @Kmmoonlight 感谢大佬,帮大忙了!这个性能确实快
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1912 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 11:44 · PVG 19:44 · LAX 03:44 · JFK 06:44
    ♥ Do have faith in what you're doing.