1. 首先用chrome的性能工具分析耗时

    image.png

    1. 发现比较耗时的就是上图的两段js的执行
    2. 发现这两段是一模一样的,找到第二段定时器执行的时间
    3. 发现定时器执行是引用的一个’thonrt-debounce’库,没有禁用trailing,导致防抖结束之后还执行了一次渲染,导致js和页面渲染时间都是双倍的

    解决方案:

    1. 查看’thonrt-debounce’
    2. 讲组件里面的trailing设置成false

    再次用性能工具分析
    发现渲染页面调用了两次,查找代码,发现为了添加cursor,给全局body调用了document.body.style.cursor=’resize’导致引起了多次重绘