前端懒加载

前端懒加载分为资源懒加载和dom懒加载

资源懒加载

资源懒加载的方式有很多，以图片为例，最简单的方式就是在标签中添加loading="lazy"属性

<img src="" loading="lazy" />

dom懒加载

在dom渲染中，是没有懒加载的概念，他一定是一次性渲染完成后然后让用户显示，如果页面复杂，div中各种嵌套div循环div等等情况，则会出现较长时间的白屏。

解决思路：我们虽然不能解决浏览器对应dom的渲染速度，但是能优化dom的出现时机，这里以vue3为例：

创建一个hooks文件

// useDefer.ts
import { ref } from 'vue'

export function useDefer(maxCount: number) {
  const count = ref(0)
  function updateFrame() {
    count.value++
    if (count.value >= maxCount) return
    requestAnimationFrame(updateFrame)
  }
  updateFrame()
  return function (n: number) {
    return count.value >= n
  }
}

使用：

<template>
  <div>
    <div v-for="(item, index) in taskList" :key="index">
      <Card v-if="defer(index)" :data="item" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
impirt { getTaskBoardId } from '@/api'
import Card from './components/Card.vue'
import { useDefer } from '@/hooks/useDefer'

let defer: any = null
const taskList=ref([])

// 获取数据
const getTableData = async () => {
  const { data } = await getTaskBoardId()
  defer = useDefer(data.length)
  taskList.value = data
}

getTableData()
</script>