前端开发攻略---在页面上渲染大量元素，使用defer减少白屏等待时间，优化页面响应速度

1、优化前

2、优化后

 3、优化思路

1、在元素数量不变的情况下，进行一步一步的渲染，先渲染一些重要的元素或者需要用户第一时间看到的元素。

2、使用Hooks封装优化函数

4、优化代码

拥有大量元素的组件（Item）：文件位置：components > Item > index.vue

<template>
  <div class="content">
    <span v-for="item in 5000">{
   
   { item }},</span>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
</script>

<style scoped lang="scss">
.content {
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
}
</style>

这里在App.vue组件中使