当前位置：首页 > news >正文

分段渲染加载页面

news 2025/8/23 6:02:36

前言

在日常工作中我们一定会遇到某个页面需要渲染比较多的内容，比如列表或者文字；一般当数据过多的时候，就会出现页面加载比较慢，很长时间没有内容的展示，用户体验不太好，当然这时候就有人会说直接使用虚拟滚动嘛，只展示其中一部分数据。这种确实是一个非常好的办法，但是如果页面可能不能使用虚拟滚动实现呢（虽然少，但是有可能），此时我们就需要实现分段渲染

一、分段渲染是什么？

分段渲染就是每次只渲染一部分数据，比如我有1w条数据，我每次只渲染其中10条或者20条数据。

二、实现

1.不使用分段渲染

首先我们先看一下不使用分段渲染，直接渲染全部数据是什么样子的，我们先降低浏览器的CPU，模拟低配置的运行方式
在这里插入图片描述
这里我们使用推荐的

<template><div><ul><li v-for="item in total" :key="item.id" style="margin-top: 10px"><div>显示其他内容</div>{{ item.name }}</li></ul></div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const observer = new PerformanceObserver((list) => {console.log(list);const entries = list.getEntriesByName("first-paint");if (entries.length > 0) {const fcpTime = entries[0].startTime;console.log("First Contentful Paint:", fcpTime, "ms");observer.disconnect(); // 获取到数据后断开观察器}
});observer.observe({ type: "paint", buffered: true });
const total = ref([]);
// 造1000条数据
const startTime = performance.now();
for (let i = 0; i < 10000; i++) {total.value.push({id: i,name: `name${i}`,age: 18 + i,});
}
const endTime = performance.now();
console.log(`数据生成，耗时：${endTime - startTime}ms`);

在这里插入图片描述

我们能看到，FCP的时间高达1000+ms，每次刷新有偏差，但是基本都是1000+的

2 使用分段渲染

<template><div><ul><li v-for="item in list" :key="item.id" style="margin-top: 10px"><div>显示其他内容</div>{{ item.name }}</li></ul></div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const observer = new PerformanceObserver((list) => {const entries = list.getEntriesByName("first-paint");if (entries.length > 0) {const fcpTime = entries[0].startTime;console.log("First Contentful Paint:", fcpTime, "ms");observer.disconnect(); // 获取到数据后断开观察器}
});observer.observe({ type: "paint", buffered: true });
const total = ref([]);
// 造1000条数据
const startTime = performance.now();
for (let i = 0; i < 10000; i++) {total.value.push({id: i,name: `name${i}`,age: 18 + i,});
}
const endTime = performance.now();
console.log(`数据生成，耗时：${endTime - startTime}ms`);
const list = ref([]);
// 使用requestAnimationFrame分批次渲染
const renderBatch = () => {const batchSize = 100;const totalItems = total.value.length;let startIndex = 0;const renderNextBatch = () => {const endIndex = startIndex + batchSize;const batchItems = total.value.slice(startIndex, endIndex);list.value.push(...batchItems);startIndex = endIndex;if (startIndex < totalItems) {requestAnimationFrame(renderNextBatch);}};renderNextBatch();
};
renderBatch();