Verwenden Sie IntersectionObserver, um die Leistung auf dem ersten Bildschirm zu verbessern

Szenen

Auf der Startseite werden viele Inhalte angezeigt. Manchmal werden einige Elemente zunächst nicht im Ansichtsfenster angezeigt.
Die Komponenten dieser Elemente führen jedoch möglicherweise intern einige leistungsintensive Animationen aus. Zu diesem Zeitpunkt können wir IntersectionObserver verwenden, um einen Listener zu instanziieren, der eine Gruppe von Elementen überwacht und bestimmt, ob sie im Ansichtsfenster angezeigt werden. Zu diesem Zeitpunkt können wir bestimmte Vorgänge implementieren. Es kann auch verwendet werden, um ein verzögertes Laden von Bildern zu erreichen.

Obiger Code:

<template>
  <section class="contain" ref="myScroll">
    <div class="contain-item" v-for="item in list" :key="item.id">
      <div class="headImg" />
      <div class="comment">{
    
    {
    
     getContent(item) }}</div>
    </div>
  </section>
</template>

<script>
import {
    
     comment } from "@/comment/data.js";

export default {
    
    
  data() {
    
    
    return {
    
    
      list: comment,
      scrollTemp: null,
      isShow: false, //是否在视窗内
      dom: null,
      io: null,
    };
  },
  methods: {
    
    
    getContent(val) {
    
    
      let obj = JSON.parse(val.content);
      return obj.contentText || "暂无";
    },
    start() {
    
    
      //只有当滚动条未到底部并且元素进入了视口内 才进行滚动
      if (this.getScrollBottom() > 0 && this.isShow) {
    
    
        this.dom.scrollTop = this.dom.scrollTop + 1;
      }
      window.requestAnimationFrame(this.start);
    },
    getScrollBottom() {
    
    
      //获取滚动条到底部的距离
      let scrollTop = this.dom.scrollTop;
      let scrollHeight = this.dom.scrollHeight;
      let clientHeight = this.dom.clientHeight;
      let scrollBottom = scrollHeight - scrollTop - clientHeight;
      return scrollBottom;
    },
  },
  computed: {
    
    },
  mounted() {
    
    
    this.dom = this.$refs.myScroll;
    this.io = new IntersectionObserver((entries) => {
    
    
      entries.forEach((item) => {
    
    
        if (item.target === this.dom) {
    
    
          if (item.isIntersecting) {
    
    
            //进入可视区
            this.isShow = true;
          } else {
    
    
            //不在可视区
            this.isShow = false;
          }
        }
      });
    });
    //对指定元素进行监听
    this.io.observe(this.dom);
    this.start();
  },
  beforeDestroy() {
    
    
    //销毁时解绑监听事件
    this.io && this.io.disconnect();
  },
};
</script>

<style scoped lang="scss">
p {
    
    
  margin: 0;
  padding: 0;
}
.contain {
    
    
  width: 100%;
  height: 300px;
  overflow-y: auto;
  font-size: 14px;
  background: #efefef;
  .contain-item {
    
    
    width: 100%;
    overflow: hidden;
    .headImg {
    
    
      margin-top: 10px;
      float: left;
      left: 0;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background-image: url("@/assets/logo.png");
      background-size: cover;
      margin-left: 30px;
    }
    .comment {
    
    
      float: right;
      text-align: left;
      padding: 4px;
      margin: 10px 30px 10px 0;
      border-radius: 4px;
      right: 12px;
      background: #fff;
      line-height: 25px;
      width: 70%;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
      -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
      -webkit-line-clamp: 2; /** 显示的行数 **/
      overflow: hidden; /** 隐藏超出的内容 **/
    }
  }
}
</style>

veranschaulichen

1.在mounted后 创建IntersectionObserver 实例对象，对指定的元素进行监听
2.在beforeDestroy钩子中记得解绑监听事件