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

破解空间网站十堰网站建设怎么做

news 2025/10/27 9:59:02

破解空间网站,十堰网站建设怎么做,wordpress怎么设置主页,空间设计网站公司前言在日常工作中我们一定会遇到某个页面需要渲染比较多的内容，比如列表或者文字；一般当数据过多的时候，就会出现页面加载比较慢，很长时间没有内容的展示，用户体验不太好，当然这时候就有人会说直接使用虚拟…

前言

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

一、分段渲染是什么？

分段渲染就是每次只渲染一部分数据，比如我有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();