滚动懒加载

项目背景

长报表页面，页面内有多个ECahrts图表和表格

项目技术栈：Vue2 + TypeScript

需求目标

当组件进入浏览器视窗时才发送HTTP请求从后端获取数据，以减轻服务器并发压力

技术实现

基本原理

利用IntersectionObserver监听DOM元素是否进入浏览器viewport

IntersectionObserver文档

给每个组件实例设置监听器，当组件实例进入视窗时，执行回调发送HTTP请求

核心代码

//监听器类
class LazyOprationInToView {
  //观察者实例
  private observer: null | IntersectionObserver = null
  //是否已处于观察状态
  private isObservered = false
  //重新观察
  public reobserve() {
    //处于未观察状态时才执行
    if (!this.isObservered && this.observer) {
      this.observer.observe(this.element)
      this.isObservered = true
    }
  }
  //销毁观察者实例
  public dispose() {
    if (this.observer) {
      this.observer.disconnect()
      this.observer = null
      this.isObservered = false
    }
  }

  /**
   * @param callback 执行的回调函数
   * @param element 监测的DOM元素
   */
  constructor(private callback: (...args: any) => void, private element: HTMLElement) {
    //创建观察者实例
    this.observer = new IntersectionObserver((changes) => {
      //元素处于可见区域才执行
      if (changes[0].intersectionRatio > 0) {
        this.callback()
        if (this.observer) {
          //取消对DOM元素的观察
          this.observer.unobserve(this.element)
          //已处于未观察状态
          this.isObservered = false
        }
      }
    }, {
      //当DOM元素与视窗产生重叠时立即触发
      threshold: 0
    })
    //检测DOM元素
    this.observer.observe(this.element)
    //已处于观察状态
    this.isObservered = true
  }
}

export {
  LazyOprationInToView
}

LazyOprationInToView类的使用

为了在组件各个option中访问LazyOprationInToView类的实例，在.vue组件顶层作用域内声明lazyOprationInToViewInstances作为指针

<script lang="ts">
const lazyOprationInToViewInstances: Record<string, LazyOprationInToView> = {}
</script>

组件的mounted生命周期钩子内（此时组件实例已挂载，可通过this.$el获得组件DOM）创建监听器实例

mounted() {
  lazyOprationInToViewInstances[this.timeStamp.toString()] = new LazyOprationInToView(this.refreshChartInstances, this.$el as HTMLElement)
}

相对应的，在beforeDestroy生命周期钩子内销毁实例

beforeDestroy() {
  lazyOprationInToViewInstances[this.timeStamp.toString()].dispose()
}

当某些状态值变更时，组件旧有的数据失效，需要重新发HTTP请求

watch: {
  select() {
    lazyOprationInToViewInstances[this.timeStamp.toString()].reobserve()
  }
}

演示地址

滚动懒加载