Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →tencentblueking/长列表虚拟滚动优化方案
处理超过 1000 条数据的大型列表渲染时的性能优化方案，包含定高和不定高两种策略。
Passed 20 of 22 test cases with the skill, and 16 of 22 without it.
and 3 more in the full report
4 fixed16 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
Where can a lightweight, native Vue implementation for fixed-height virtual scrolling be found within the workspace resources for BlueKing virtual list projects?
| Checked | Without skill | With skill |
|---|---|---|
| References skill://virtual-list/assets/VirtualList.vue as the template implementation. | Missed | Passed |
The instructions your model reads when the skill loads.
当列表数据量巨大（如日志列表、审计记录，n > 1000）时，直接渲染会导致 DOM 节点过多，页面卡顿。
只渲染当前可视区域 (Viewport) 内的元素，加上缓冲区 (Buffer) 的元素。随着滚动条滚动，动态替换 DOM 内容。
如果每一行高度固定（例如 40px），推荐使用轻量实现。
使用方式：
<VirtualList :items="logList" :item-height="40" :container-height="400">
<template #default="{ item }">
<div class="log-item">{{ item.message }}</div>
</template>
</VirtualList>
📦 获取完整组件实现：
skill://virtual-list/assets/VirtualList.vue
如果列表项高度不固定（如包含展开/收起、不同长度文本），计算逻辑会变得复杂。
推荐库: vue-virtual-scroller 的 DynamicScroller 组件。
<template>
<DynamicScroller
:items="items"
:min-item-size="54"
class="scroller"
>
<template #default="{ item, index, active }">
<DynamicScrollerItem
:item="item"
:active="active"
:size-dependencies="[
test cases passed, vs 16 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.