需求:

网页一次要请求 500或1000 条数据的时候但是每一条数据有十几个数值,导致表格渲染时特别卡,用户体验极差.

因为我们还要显示图表,所以请求的数据不能减少,那么改怎么办?

解决思路

利用虚拟列表

我们一次拿到所有数据但是只渲染20条数据或者更少,只要把页面填满就行.等用户拉动滚动条到达底部时我们就填加渲染数据10条.然后图表因为渲染比较快所以我们就用所有数据一次性渲染.

代码实现

// el - table 上设置ref属性  // ref = "table"

// 因为操作dom所以用到生命周期钩子mounted
mounted() {
    // 获取需要绑定的table
    this.dom = this.$refs.table.bodyWrapper
    this.dom.addEventListener('scroll', () => {
        // 表格滚动条滚动的距离
        let scrollTop = this.dom.scrollTop
        // 变量windowHeight是可视区的⾼度
        let windowHeight = this.dom.clientHeight
        // 变量scrollHeight是滚动条的总⾼度
        let scrollHeight = this.dom.scrollHeight
        if (scrollTop + windowHeight === scrollHeight) {   // 这里就是滚动条滚动到底部的时候
            // 获取到的不是全部数据当滚动到底部继续获取新的数据

            // 这里记住我们要把表格渲染的数据和获取到的全部数据分开, 等滑动到底部时我们在取10或者20条添加到渲染数据上
            if (this.全部数据.length <= this.渲染数据.length) return  // 因为我们默认都是渲染20条数据,如果总数据没那么多就直接return出去
            this.loading = true  // 开启loading效果防止渲染速度慢用户乱点,导致页面崩溃

            if (this.渲染数据.length + 10 > this.全部数据.length) {
               // 如果全部数据和渲染数据选差没有十条那么就全部渲染上去
                dom.scrollTop = dom.scrollTop - 30   // 30 50 都行
                this.渲染数据 = (...this.全部数据)
            } else {
                dom.scrollTop = dom.scrollTop - 30
                let id = this.渲染数据.length
                // 这里取10条,渲染上去 拿多少数据循环多少次就行
                for (let index = id - 1; index <= id + 9; index++) {  // 没有用forEach 因为场景不同这里用 forEach 效率会低 
                    this.渲染数据.push(this.全部数据[index])
                }
            }

            setTimeout(() => {
                this.loading = false
            }, 500)

        }
    })
}

大致思路是这样只演示了部分代码片段,如果不需要图表的话,每次滑动到底部再请求数据渲染也是一样的

这样渲染速度会大大提升.你还知道项目有哪些优化思路吗?