美文网首页
marked + highlight.js 引发的卡顿2-防抖方

marked + highlight.js 引发的卡顿2-防抖方

作者: Asuler | 来源:发表于2021-04-25 17:23 被阅读0次

上一篇文章中通过指定语法类型,来避免大量查询

highlight: function (code) {
        return hljs.highlight('javascript', code).value;
 }

但其实存在很多限制
1.不清楚后续会出现什么语法,每次一出现又要添加语法

  1. 希望还是可以自动识别语法,一劳永逸

所以想了个防抖方案
过程

  1. 尝试把hljs.highlightAuto防抖了,但是失败了,因为这个是同步的函数,防抖无法得到返回值
  2. 在marked.setOptions的时候把 highlight给防抖了,尝试后发现参数没有更新,永远都少一步,得到的输入值永远都是上一步的值

3.对MdEditor的renderHTML传入的函数进行防抖,也失败了,因为react视图需要实时更新,也需要一个返回值

4.改造MdEditor的renderHTML方法,使之支持防抖,
代码地址
https://github.com/HarryChen0506/react-markdown-editor-lite/blob/master/src/editor/index.tsx

image.png
从代码中可以得知,他自己的renderHTML是同步调用的,而外界传入的renderHTML,要么是同步的,要么是个promise,也没有便捷的防抖参数

另外写一个类去继承,然后改造renderHTML方法,让其自动防抖

import MdEditor from 'react-markdown-editor-lite';
export default class extends MdEditor {
    renderHTML = debounce(super.renderHTML, 300);
}

然后用组件直接用这个即可

相关文章

  • marked + highlight.js 引发的卡顿2-防抖方

    上一篇文章中通过指定语法类型,来避免大量查询 但其实存在很多限制1.不清楚后续会出现什么语法,每次一出现又要添加语...

  • marked + highlight.js 引发的卡顿

    按照文档上的这样子配置后发现,在文档比较长的情况下,会出现卡顿问题,后逐一排查,是这个highlight导致的,使...

  • highlight.js 为博客增加代码着色

    利用:marked 把 markdown 文本转换成 HTML。利用:highlight.js 为代码添加相应 c...

  • Markdown

    markdown 特点: 并没有使用v-model,防抖节流 引入marked , lodash 样式直接用100...

  • [iOS] 卡顿优化

    目录: UI相关问题 [NSThread callStackSymbols]引发的卡顿 cell的view懒加载 ...

  • 防抖 & 节流

    防止用户短时间内多次触发事件,导致没必要的性能消耗,以致网页卡顿,甚至浏览器崩溃 >>防抖&节流 防抖 应用:实时...

  • JavaScript防抖和节流

    防抖和节流 相同:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减.避免大量计算导致的页面卡顿.不同:防抖...

  • 索尼机身防抖和镜头防抖

    索尼微单系统拥有带防抖功能的机身和带防抖功能的镜头。无论防抖组件位于哪里,它们都属于光学防抖。 机身防抖 机身防抖...

  • 写作的卡顿

    说了那么怕奶, 然后那时候我就不怕, 我也怕, 然后如何改变? 其实这种意思解读思路端的你对整个。 每个人都是一个...

  • js 防抖 节流

    节流 防抖1 防抖2

网友评论

      本文标题:marked + highlight.js 引发的卡顿2-防抖方

      本文链接:https://www.haomeiwen.com/subject/joadrltx.html