记一次关于vue性能问题

当时开发项目的时候,涉及到一个操作列表(不是单纯展示的列表,里面包含很多操作功能)的功能。把列表的每个小item写成一个子组件,当时写子组件没有考虑到数据量的问题。所以在写子组件,并没有做什么优化,而且里面还加了form表单校验,里面还有很多事件处理,样式处理等等复杂的逻辑。

注意:

  1. 首先需要从设计上面来说简化功能(弱化这种列表的功能,省去没有必要的功能,比如说表单校验。这样可以在提交的时候,循环数据判断,虽然这种方式也存在弊端)

  2. 然后,看下哪些部分可以在稍后渲染,或者直接先不渲染,在需要的时候再渲染。展示必要信息,不需要的信息可以稍后渲染。

  3. 数据量很大的时候:

    • 简单的查看,不需要操作。使用滚动事件,注意一个问题:如果完全渲染完成了,需要把事件移除。避免消耗性能

        // 鼠标滚动的时候,可以默认加载
        // 这种方式对于数据量超大的,比如说1000条+,可能会生成超多的标签,如果需要操作的时候,页面会超级卡顿
        // 很多操作都没法进行,但是查看功能还是可以进行的
        const scrollTop = document.documentElement.scrollTop
        let clientHeight = document.documentElement.clientHeight
        const bodyHeight = document.body.scrollHeight // body的总高度
        if ((bodyHeight - scrollTop) <= 2 * clientHeight) {
          this.rulesList = this.rulesList.concat(this.arrRulesList.slice((this.concatIndex - 1) * this.defaultShowNum, this.defaultShowNum * this.concatIndex++))
        }
        window.addEventListener('scroll', this.windowScroll)
        window.removeEventListener('scroll', this.windowScroll)
      
    • 使用定时器,同样渲染完成了,清除定时器。可能一次渲染多个,页面会存在卡顿的效果,可以使用先渲染一部分,后面的部分一次渲染少一些,这样就不会存在卡顿效果,无法操作其他的内容

  4. 上面这些方法如果对于数据量很大的话,其实都不好用。但是可以考虑腾讯部落使用的方法,一个页面有4000+条数据,如果只是单单渲染也会很消耗性能。他们使用的处理方式是,页面总共只有40个li元素,上滑下滑,都是相应的使用上面和下面的li元素定位的,并且把内容修改掉。

(如果下次遇到这种列表的问题,需要考虑到)

你可能感兴趣的:(记一次关于vue性能问题)