为什么只要加载第1页之后的数据，在数据回来 和 渲染之间总有几百毫秒的卡顿

<!--  
 * @Descripttion:   
 * @version: 1.0  
 * @Author: 付肖  
 * @Date: 2024-04-01 15:50:47  
 * @LastEditors: 付肖  
 * @LastEditTime: 2024-04-03 17:30:59  
-->  
<template>  
  <app-hoc ref="main" id="view" bgColor="#fff" color="grey-5" title="列表demo">  
    <z-paging ref="paging" :paging-style="{'background-color':'#f6f6f6'}" v-model="data.dataList" @query="queryList" safe-area-inset-bottom>  
      <view style="padding: 0 16px;">  
        <clueItems  
          :item-list="data.dataList"  
          :is-allocation="data.isAllocation"  
        ></clueItems>  
      </view>  

      <!-- z-page会自动覆盖全屏，如果需要固定显示的布局，必须使用slot嵌入-->  
      <template #top>  
        <u-tabs  
          :list="data.tabs"  
          line-color="#23272b"  
          line-width="40rpx"  
          line-height="7"  
          :current="data.tabCurrent"  
          @change="changeTab"  
          :scrollable="false"  
        ></u-tabs>  
      </template>  

      <!-- z-page会自动覆盖全屏，如果需要固定显示的布局，必须使用slot嵌入-->  
      <template #bottom>  
        <view style="display: flex; justify-content: space-between;">  
          <u-button type="primary" size="normal" shape="circle" text="批量分配" :custom-style='{width:"40%"}'></u-button>  
          <u-button type="primary" size="normal" shape="circle" text="取消" :custom-style='{width:"40%"}'></u-button>  
        </view>  
      </template>  
    </z-paging>  
  </app-hoc>  
</template>  

<script setup>  
import { ref,reactive } from 'vue';  
import clueItems from '@/components/clue/clueItems';  

const paging = ref(null)  
const data = reactive({  
  tabs:[  
    { name: '全部', count: '0' },  
    { name: '待付款', count: '0' },  
    { name: '待发货', count: '0' },  
    { name: '待收货', count: '0' },  
    { name: '已完成', count: '0' }  
  ],  
  tabCurrent: 0,  
  dataList: [],  
  // dataListCopy:[],  
})  

const changeTab = (index) => {  
  // 切换tab时，需要重置分页数据  
  paging.value.reload();  
}  

function randomID() {  
  return Number(Math.random().toString().substr(2,0) + Date.now()).toString(36);  
}  

const queryList = (pageNo, pageSize) => {  
    // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可  
    // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging  
    new Promise((resolve, reject) => {  
      setTimeout(() => {  
        resolve({  
          data: {  
            list: Array.from({ length: 10 }).map((item, index) => ({  
              title: `标题${index + 1}`,  
              label: `标签${index + 1}`,  
              id: randomID()  
            }))  
          }  
        })  
      }, 0)  
    }).then(res => {  
      // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了  
      // paging.value.complete([]);  
      // data.dataListCopy = data.dataListCopy.concat(...res.data.list)  
      paging.value.complete(res.data.list);  
    }).catch(res => {  
      // 如果请求失败写paging.value.complete(false)，会自动展示错误页面  
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理  
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可  
      paging.value.complete(false);  
    })  

}  

</script>  

<style lang="scss" scoped></style>

clueItems 是一个组件，结构类似这样<view><view v-for=(item,index) in items></view></view>