👉 个人博客主页 👈
📝 一个努力学习的程序猿
专栏：
HTML和CSS
JavaScript
jQuery
Vue
Vue3
React
TypeScript
uni-app
Linux
个人经历+面经+学习路线【内含免费下载初级前端面试题】
更多前端面试分享
前端学习+方案分享(VitePress、html2canvas+jspdf、vuedraggable、videojs)
前端踩坑日记（ElementUI）
最近遇到一些case，浅浅记录下。
问题现象：
1、数据量较大 / 使用的组件较多时，每次初始化访问页面都需要等待许久。
2、由于数据量较大，保存时又会对这些数据做JS处理，最后导致在点击保存时，网页出现卡顿/崩溃现象。
综上，本文主要记录解决两大类问题：如何提升页面在数据量较大/组件较多时的渲染效率；如何避免JS在数据量较大时处理不崩溃；
一、页面渲染卡顿问题
在页面渲染卡顿问题中，解决的关键是如何避免让页面一次性渲染太多数据或复杂组件效果（结构）。经过调试，本文方法主要分为以下几种：数据分批次加载、虚拟滚动、浏览器空闲加载、仅渲染浏览器视口内容。
前言-第三方组件
说明下：如果遇到的是第三方组件卡顿问题，有可能不适用本文方法。比如第三方组件只允许使用者传数据进去，渲染逻辑完全由组件自行控制，那么这种情况除了给第三方组件提优化诉求外，只能在网上搜索针对该组件特定的解决方案或寻求可替代组件。
解决方法一：原生实现虚拟滚动（不建议）
先介绍一下虚拟滚动：虚拟滚动是一种优化长列表渲染性能的技术，主要用于处理大量数据的信息。其核心原理是：只渲染可视区域内的元素，随后通过计算滚动位置来动态更新显示的内容，从而实现类似完整列表的滚动效果。如下图所示：
Vue 示例：（写的场景比较简单）
<template><div class="virtual-select"><div ref="viewport" class="viewport"><div class="list" :style="{ height: totalHeight + 'px' }"><divv-for="item in visibleItems":key="item.id":style="{ transform: `translateY(${item.offsetTop}px)` }">{{ item.label }}</div></div></div></div>
</template><script>
export default {name: 'TestIndex',data() {return {items: [], // 所有选项数据visibleItems: [], // 可见区域的选项itemHeight: 30, // 每个选项的高度viewportHeight: 300, // 可视区域高度buffer: 5 // 增加缓冲区，这里假设缓冲区大小为5}},computed: {totalHeight() {return this.items.length * this.itemHeight}},mounted() {this.items = Array.from({ length: 100 }, (_, index) => ({id: index + 1,label: `选项 ${index + 1}`,offsetTop: 0,}))this.updateVisibleItems(0)// 添加滚动事件监听this.$refs.viewport.addEventListener('scroll', this.onScroll)},beforeDestroy() {// 组件销毁前移除事件监听this.$refs.viewport.removeEventListener('scroll', this.onScroll)},methods: {onScroll(e) {// 使用requestAnimationFrame优化滚动性能window.requestAnimationFrame(() => {const scrollTop = e.target.scrollTopthis.updateVisibleItems(scrollTop)})},updateVisibleItems(scrollTop) {const buffer = this.bufferconst startIndex = Math.max(0, Math.floor(scrollTop / this.itemHeight) - buffer)const endIndex = Math.min(this.items.length - 1,Math.floor((scrollTop + this.viewportHeight) / this.itemHeight) + buffer)this.visibleItems = this.items.slice(startIndex, endIndex + 1).map((item, index) => ({...item,offsetTop: (startIndex + index) * this.itemHeight}))}}
}
</script>
<style>
.viewport {height: 300px;overflow-y: auto;
}
</style>
该方法的优缺点：
1、针对大部分场景能写出解决方案（但如同前言说的一样，如果第三方组件无法自定义渲染内容，那大概率是不行的），而且几乎没有浏览器兼容性问题。但是它相对的缺点就是：写起来复杂且麻烦，逻辑需要自己完成，维护成本偏高（相比于下方所有方法），毕竟代码还是从简为好。
2、通过代码可以看出来，该方法想要实现 必须能确定虚拟滚动区域的总高度，等价于能确定或推测每个区域的高度。所以如果某个区域的数据为动态获取，从而无法第一时间确定总高度，那么就无法确定滑动到什么位置时，展示什么数据，虚拟滚动就会无法使用（当然这也是下面要说的第三方虚拟滚动组件的痛点）。所以如果是简单场景，该方法或许是一种可选择方案。
当然上述给出的示例已经做了部分优化，比如考虑用 transform 定位选项，避免重排；使用 requestAnimationFrame 优化渲染性能；预渲染额外选项（buffer），提升滚动体验。因为本文不推荐使用该方案，所以就不再做过多扩展。
解决方法二：虚拟滚动 vue-virtual-scroller
相比于使用上方原生虚拟滚动，使用网上成熟的第三方组件方案来解决就会方便简单很多。这里推荐一个第三方组件，是我自己使用很长时间的：vue-virtual-scroller。
https://github.com/Akryum/vue-virtual-scroller/tree/v1/packages/vue-virtual-scroller
其最常见的两个组件为：RecycleScroller（普通虚拟滚动） 和 DynamicScroller（动态虚拟滚动）。因为 github 上有描述和示例，各位大佬可以直接参考进行尝试使用（下文不会详细介绍官方的示例和提供的参数）。只不过这里有些注意项，需要额外说明。
RecycleScroller 有个限制，它要用于能给定高度的模块（为什么需要高度，可以参考解决方法一）。换句话说，这里每一项高度都必须是确定的（虽然文档里还给了很多建议，不过我确实没试出来，所以目前只当它必须给定高度）。
官方示例：
<template><RecycleScrollerclass="scroller":items="list":item-size="32"key-field="id"v-slot="{ item }"><div class="user">{{ item.name }}</div></RecycleScroller>
</template><script>
export default {props: {list: Array,},
}
</script><style scoped>
.scroller {height: 100%;
}.user {height: 32%;padding: 0 12px;display: flex;align-items: center;
}
</style>
但实际上我的 case 中不能确定具体高度，因为我的数据是接口下发的，第一时间并不能确定高度是多少。而官方也确实给了 DynamicScroller，给的解释是：当事先不知道项目的尺寸时，它会在滚动过程中自动发现项目尺寸。
官方示例：
<template><DynamicScroller:items="items":min-item-size="54"class="scroller"><template v-slot="{ item, index, active }"><DynamicScrollerItem:item="item":active="active":size-dependencies="[item.message,]":data-index="index"><div class="avatar"><img:src="item.avatar":key="item.avatar"alt="avatar"class="image"></div><div class="text">{{ item.message }}</div></DynamicScrollerItem></template></DynamicScroller>
</template><script>
export default {props: {items: Array,},
}
</script><style scoped>
.scroller {height: 100%;
}
</style>
不过我在使用之后发现，DynamicScroller 还是有限制的。换句话说，这两个组件并不能100%涵盖所有情况。简述下我遇到的问题：
1、我的数据结构是对象数组内含子对象数组，它可能会有无穷深的层级：
[{id: 1,name: '1',children: [{ id: 11,name: '1-1',children: [...],}],},
]
而文档中提到要给一个 min-item-size，随后这个模块的判断高度需要根据一个特定字段来判断。我在上面的结构里，尝试绑定了字段，发现并没有什么效果，导致模块的高度只能展示 min-item-size 大小。
但为什么没效果，我并没寻找其根因，但我猜测和我层级有关。size-dependencies 我并没找到能传递子对象数组中字段的方法（或许的确是我没找到用法），而我的高度要根据数组内最后一个子对象数据来判断。但普通的一层对象数组是可行的，大家可以多尝试一下。
2、于我而言放弃的根因是，工程内是 tsx 写法，而 DynamicScroller 需要使用插槽，但是 tsx 目前不能实现这样的操作：
<template v-slot="{ item, index, active }">
而把代码改成 Vue 文件工作量很大，因此没考虑该方案。
综上，方法二并没有完全解决掉我的问题。不过解决了我的 elementUI el-select 下拉数据过大导致卡顿的问题，RecycleScroller 成功示例：
代码说明：因为很多组件要用到 el-select，所以自己简单做了层自己的封装。所以如果各位要参考，可以不用完全 copy 过去，代码加了很多注释，大家可以按需参考。如果想看虚拟滚动前后的对比，只需要将 test.vue 中的 el-select 注释打开即可，效果很明显。
外侧使用组件 test.vue：
<template><div>测试虚拟滚动：<div><!--如果不虚拟滚动的后果！将这里注释打开<el-selectv-model="selectVal2"multipleplaceholder="请选择"><el-optionv-for="item in list":key="item.value":label="item.label":value="item.value"/></el-select>--><VirtualScroller:select-model.sync="selectVal":show-list="list":select-options="{placeholder: '请选择',filterable: true,multiple: true,clearable: true,loading: loading,}":scroll-options="{id: 'configFilter',}":computed-width="true"style="margin-left: 20px;"@change="changeSelect"/></div></div>
</template><script lang="ts">
import { defineComponent, ref, onMounted } from '@vue/composition-api'
import VirtualScroller from './components/virtual-scroller.vue'export default defineComponent({name: 'TestVirtual',components: { VirtualScroller },setup() {const selectVal = ref('')const selectVal2 = ref('')const list = ref([]) as anyconst loading = ref(false)onMounted(() => {loading.value = truefor (let i = 0; i < 100000; i++) {list.value.push({value: i,label: i,})}loading.value = false})const changeSelect = (val) => {console.log('切换选中值', val)}return {list,selectVal,changeSelect,loading,selectVal2,}},
})
</script>
封装el-select的通用组件 virtual-scroller.vue：
<template><el-select:value="internalModel"v-bind="virtualSelectOptions"@change="handleChange"@focus="optionsFocus"@blur="optionsBlur"><!--开启虚拟滚动后，如果展示数据数量为0，则点击后不会展开下拉选，即也不会出现暂无数据的提示框。因此需要单独处理数据数量为0的情况--><el-optionv-if="virtualShowList.length === 0"disabledlabel="暂无数据"value="-1"><span class="option-disabled">{{ selectOptions.noDataText || '暂无数据' }}</span></el-option><!-- 虚拟滚动组件 --><RecycleScrollerv-elsev-bind="recycleScrollerBind":items="virtualShowList":style="{height: scrollerHeight + 'px',minWidth: virtualMaxWidth + defaultWidth + 'px',}"><template #default="{ item }"><el-option:key="scrollOptions.keyField ? item[scrollOptions.keyField] : item.value"class="recycle-option":value="selectOptions.optionValue ? selectOptions.optionValue(item) : item.value":label="selectOptions.optionLabel ? selectOptions.optionLabel(item) : item.label"/></template></RecycleScroller></el-select>
</template><script lang="ts">
import {defineComponent,computed,ref,watch,nextTick,toRefs,
} from '@vue/composition-api'
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { cloneDeep } from 'lodash'
import {commonFilterMethod,DEFAULT_SCROLL_OPTIONS,DEFAULT_WIDTH,DEFAULT_SELECT_OPTIONS,DELETE_PARAMS,
} from '../lib/constant'export default defineComponent({name: 'VirtualScroller',components: { RecycleScroller },props: {// 必传，调整选取数据selectModel: {type: [String, Number, Array],required: true,},/* 非必传，调整下拉选配置，传参说明：* 支持 el-select 所有参数，如需绑定相关事件需要手动扩展。特殊说明如下：* (1) 如果下拉选列表数据不存在"label、value"字段，而必须使用其他字段，可通过以下方式来调整组件默认检测的"label、value"字段：（但不建议这么做，会有性能损耗，最好能提前处理好数据）:select-options="{optionLabel: item => {return `${item.name}(${item.activeCode})`},optionValue: item => {return item.activeId},}"因为options必然需要绑定key值，且通常value肯定是唯一值，所以组件默认绑定value当上述列表数据不存在value字段，则需要通过以下方式，修改默认唯一key值绑定:scroll-options="{keyField: 'activeId',}"* (2) 如需开启下拉选模糊搜索，且只需要根据"label、value"字段做筛选，只需要使用以下方式，仅开启 filterable 即可。目前会默认配置remote和remoteMethod：:select-options="{filterable: true,}"* (3) 当模糊搜索想自定义筛选的字段依据，只需要使用以下方式，传递 remoteMethodKey：:select-options="{filterable: true,remoteMethodKey: ['label', 'value', 'pinyin'],}"* (4) 不建议传递并使用 filterMethod，且目前已禁用。该方法会导致虚拟滚动组件卡顿，且筛选会异常（不满足要求的数据行会直接显示空白，并不会筛掉）如有自定义筛选的需要，可传递 remoteMethod 覆盖组件默认方法，并在自定义 remoteMethod 方法中，将筛选结果同步到 showList 字段上，让组件刷新* */selectOptions: {type: Object,default: () => ({}),},// 必传，展示下拉选可选数据showList: {type: Array,default: () => [],},/** 控制虚拟滚动相关数据展示* @param {number} itemSize - 每个选项数据的展示高度（必传，默认35）* @param {number} maxVisibleItems - 打开下拉选最大可见选项数（必传，默认7，非官方配置）* @param {string} id - 如果一个页面内有多个虚拟滚动组件，需要给每个组件设置id，避免渲染异常（建议传，非官方配置）* @param {string} keyField（动态绑定下拉选value时必传，非官方配置）* 更多配置：https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md#props* */scrollOptions: {type: Object,default: () => ({}),},// 是否需要额外计算下拉选宽度（用于解决开启虚拟滚动后，下拉选宽度不会自动撑开）computedWidth: {type: Boolean,default: false,},// 如果开启额外计算下拉选宽度，此时宽度仍不满足需求，可通过调整改值增大宽度defaultWidth: {type: Number,default: DEFAULT_WIDTH,},},setup(props, { emit }) {// 统一定义相关数据, 避免直接修改props传值const {selectModel: internalModel,} = toRefs(props)// 用于同步组件内展示数据 => 主要用于 remoteMethodconst virtualShowList = ref(cloneDeep(props.showList))/* ============* 在动态获取或第一次拿到时，对虚拟滚动组件传参的处理，便于扩展* */const recycleScrollerBind = computed(() => {const options = ref(props.scrollOptions)// 确保虚拟滚动组件不被外侧props传递相关字段，避免影响组件展示DELETE_PARAMS.SCROLL.forEach(key => {delete options.value[key]})// 以下为虚拟滚动必需参数，如果不存在，则默认配置if (options.value.id === undefined) {options.value.id = DEFAULT_SCROLL_OPTIONS.ID}if (options.value.itemSize === undefined) {options.value.itemSize = DEFAULT_SCROLL_OPTIONS.ITEM_SIZE}if (options.value.maxVisibleItems === undefined) {options.value.maxVisibleItems = DEFAULT_SCROLL_OPTIONS.MAX_VISIBLE_ITEMS}if (options.value.keyField === undefined) {options.value.keyField = DEFAULT_SCROLL_OPTIONS.KEY_FIELD}if (options.value.buffer === undefined) {options.value.buffer = DEFAULT_SCROLL_OPTIONS.BUFFER}if (options.value.prerender === undefined) {options.value.prerender = DEFAULT_SCROLL_OPTIONS.PRERENDER}return options.value})/* ============* 便于el-select使用，在动态获取或第一次拿到时，针对下拉选自带模糊搜索的处理：* 当开启虚拟滚动后，下拉选的高度为根据showList动态计算。* 此时如果下拉选仅开启filterable，当搜索后结果的数据数量小于设定的itemSize，* 此时下拉选不会根据结果数量动态设定高度。* 因此此处对这种情况做处理。* */const virtualSelectOptions = computed(() => {const options = ref(props.selectOptions)// 当传递数据存在想要筛选数据的意图时，判断是否传递了remote和remoteMethodif (options.value.filterable === true || options.value.remote === true) {// 如果没有remote，就注入，保证筛选无异常if (options.value.remote === undefined) {options.value.remote = true}if (options.value.remoteMethod === undefined) {options.value.remoteMethod = remoteMethod}}// 确保el-select组件不被外侧props传递相关字段，避免影响组件展示DELETE_PARAMS.SELECT.forEach(key => {delete options.value[key]})return options.value})// 默认的remoteMethod方法function remoteMethod(query) {query = query && query.trim()// 拿到全量下拉选数据const list = cloneDeep(props.showList)// 拿到需要进行筛选的指定keyconst remoteMethodKey =props.selectOptions.remoteMethodKey || DEFAULT_SELECT_OPTIONS.REMOTE_METHOD_KEY// 进行筛选if (query) {virtualShowList.value = list.filter(item => {const filterValues = [] as anyfor (let i = 0; i < remoteMethodKey.length; i++) {if (item[remoteMethodKey[i]]) {filterValues.push(item[remoteMethodKey[i]])}}return commonFilterMethod(query, filterValues)})} else {virtualShowList.value = list}}// ============ 动态计算下拉选高度const DEFAULT_LIST_LENGTH = 0const scrollerHeight = computed(() => {// 每个选项的高度const itemHeight = props.scrollOptions.itemSize || DEFAULT_SCROLL_OPTIONS.ITEM_SIZE// 最大可见选项数const maxVisibleItems =props.scrollOptions.maxVisibleItems || DEFAULT_SCROLL_OPTIONS.MAX_VISIBLE_ITEMSconst visibleItems = Math.min(virtualShowList.value.length || DEFAULT_LIST_LENGTH,maxVisibleItems,)return visibleItems * itemHeight})// ============ 避免直接修改props传值function handleChange(value) {emit('update:selectModel', value)emit('change', value)}/* ============* 开启虚拟滚动后，下拉选展示数据的宽度将仅能和下拉选本身的宽度保持一致，* 不再会根据内容长度自动撑开宽度。当传递computedWidth时，将进行额外宽度处理。* */// 记录组件存在期间内，最大的宽度，避免渲染区域变化，导致width变小const DEFAULT_MAX_WIDTH = 0const virtualMaxWidth = ref(DEFAULT_MAX_WIDTH)// 记录当前组件是否处于聚焦状态const hasSelectFocus = ref(false)// 聚焦事件const EMPTY_LENGTH = 0function optionsFocus() {hasSelectFocus.value = true// 当页面渲染完成后再计算宽度，否则拿不到标签nextTick(() => {const scroller = document.getElementById(recycleScrollerBind.value.id as string)if (props.computedWidth && virtualShowList.value.length > EMPTY_LENGTH && scroller) {const spanList = scroller.getElementsByTagName('span') || []virtualMaxWidth.value = Array.from(spanList).reduce((maxWidth, span) => {const width = span.getBoundingClientRect().widthreturn width > maxWidth ? width : maxWidth}, virtualMaxWidth.value)}})}// 失焦事件function optionsBlur() {hasSelectFocus.value = false}/* ============* 在虚拟滚动中，由于一次数据展示有限，当要做修改数据时，* 下拉选的数据回显可能会因为选中的数据没有渲染出来，导致展示不出相关信息。* 而通常下拉选数据showList是接口返回，所以只能通过watch方法来监听第一次获取下拉选数据。* 在第一次拿到数据后，后续不触发相关操作。* */const firstGetShowList = ref(true)watch(() => props.showList,newValue => {// 同步数据virtualShowList.value = newValue// 用于解决：当数据未加载出来时，抢先打开下拉选，此时不会再根据初始数据进行自动撑开宽度// 当showList变化时，如果当前处于聚焦状态，则进行一次宽度计算if (hasSelectFocus.value) {optionsFocus()}// 如果首次进入组件，此时存在默认值，则进行数据回显处理if (firstGetShowList.value && props.selectModel) {getAndSubmitSameItem(props.selectModel, newValue)}firstGetShowList.value = false},)// 处理数据回显逻辑：把已选中的数据移动到数组第一位，保证回显正常function getAndSubmitSameItem(selectModel, list) {// 分情况处理：多选框 / 常规数据（number、string）const queries = Array.isArray(selectModel) ? selectModel.map(String) : [String(selectModel)]const selectedItems = list.filter(item => {return queries.some(query => {return (String(item.label).toLowerCase().indexOf(query.toLowerCase()) > -1 ||String(item.value).toLowerCase().indexOf(query.toLowerCase()) > -1)})})const otherItems = list.filter(item => {return queries.every(query => {return (String(item.label).toLowerCase().indexOf(query.toLowerCase()) === -1 &&String(item.value).toLowerCase().indexOf(query.toLowerCase()) === -1)})})emit('update:showList', selectedItems.concat(otherItems))}return {scrollerHeight,internalModel,virtualSelectOptions,virtualShowList,recycleScrollerBind,virtualMaxWidth,handleChange,optionsFocus,optionsBlur,}},
})
</script><style lang="scss">
.recycle-option {white-space: nowrap;
}
.option-disabled {color: #000000;
}
</style>
constant.ts：
// 控制虚拟滚动相关默认参数
export const DEFAULT_SCROLL_OPTIONS = {ID: 'scroller',ITEM_SIZE: 35, // 每个选项数据的展示高度MAX_VISIBLE_ITEMS: 7, // 打开下拉选最大可见选项数BUFFER: 200, // 添加到滚动可见区域边缘以开始渲染更远的项目的像素量PRERENDER: 100, // 为服务器端渲染 (SSR) 渲染固定数量的项目KEY_FIELD: 'value',
}// 如果开启额外计算下拉选宽度，此时宽度仍不满足需求，可通过调整改值增大宽度
// 目前宽度计算方式默认为：文字宽度 + padding32 + 滚滑轮宽度16 @px
export const DEFAULT_WIDTH = 48// 控制mtd-select相关默认参数
export const DEFAULT_SELECT_OPTIONS = {REMOTE_METHOD_KEY: ['label', 'value'],
}// 确保相关组件不被外侧props传递以下key字段，避免影响组件展示
export const DELETE_PARAMS = {SCROLL: ['items', 'style'],SELECT: ['value', 'label', 'optionLabel', 'optionValue', 'remoteMethodKey', 'filterMethod'],
}/*** 通用select组件过滤方法** @export* @param {string} query 查询条件* @param {array[any]} toBeFilteredValues 查询值*/
export function commonFilterMethod(query, toBeFilteredValues) {let result = falsefor (let i = 0; i < toBeFilteredValues.length; i++) {if (String(toBeFilteredValues[i]).toLowerCase().indexOf(String(query).toLowerCase()) > -1) {result = truebreak}}return result
}
vue-virtual-scroller.d.ts：
/** 因虚拟滚动组件 vue-virtual-scroller 没有提供 TypeScript 类型声明文件，* 所以在没有此文件时，引入 vue-virtual-scroller 会存在ts提示错误（但能正常使用）：* Cannot find module 'vue-virtual-scroller'* */
declare module 'vue-virtual-scroller' {import { Component } from 'vue'export const RecycleScroller: Component// 如有需要可补充类型声明
}
解决方法三：分批次加载数据 setTimeout（仅适用Vue）
除了上述虚拟滚动外，这里介绍一种简单粗暴的解法：分批次加载数据。
思路是：使用 setTimeout，将一次性渲染全部数据改成每隔一段时间推入一组数据，直到把所有数据推入完成（期间一直加载即可）。
不过该方法只能在 vue 中使用，纯 JS 不行。因为其借用 vue 响应式和虚拟DOM，只更新每次新增的部分，详细可以参考下我之前的文章：https://blog.csdn.net/qq_45613931/article/details/109470718。纯 JS 这样做的话，依然会重新渲染所有数据，相当于负提升；
除此以外，借用了 setTimeout 的特性。因为它是宏任务，所以在消息队列中会依次执行回调，所以这才是能实现分批次加载的根因。关于JavaScript的运行机制（微任务、宏任务、事件循环）可参考我之前的文章：https://blog.csdn.net/qq_45613931/article/details/109028679。
代码说明：test.vue中使用了一个优化项 getDevicePerformance，动态调整 setTimeout 的等待时长，如有需要各位可按需调整。如果想看设置前后的对比，只需要将 test-each.vue 中的 isSetTimeout 改为 false 即可，效果很明显。loading是随便写的效果，可按需调整。
要使用功能的父组件 test.vue
<template><div><TestEach:all-list="allList":timeout-delay="timeoutDelay"/></div>
</template><script lang="ts">
import { defineComponent, onMounted, ref } from '@vue/composition-api'
import TestEach from './test-each.vue'export default defineComponent({name: 'TestDetail',components: { TestEach },setup() {// 优化项：根据电脑性能设置setTimeout delay时长，也可以给一个固定值const timeoutDelay = ref(500)// 动态获取设备的性能指标function getDevicePerformance() {// 使用 Performance API 获取设备的性能数据：页面加载时间const navigationEntries = performance.getEntriesByType('navigation') as anyconst loadTime =navigationEntries && navigationEntries.length > 0? navigationEntries[0].loadEventEnd - navigationEntries[0].startTime: 0// 根据加载时间来判断设备的性能if (loadTime < 1000) {return 'high'} else if (loadTime < 3000) {return 'medium'} else {return 'low'}}// 根据设备的性能来设置延迟时间function setDynamicDelay() {const devicePerformance = getDevicePerformance()let delayswitch (devicePerformance) {case 'high':delay = 10 // 高性能设备，延迟时间较短breakcase 'medium':delay = 50 // 中等性能设备，延迟时间适中breakcase 'low':delay = 100 // 低性能设备，延迟时间较长breakdefault:delay = 50 // 默认延迟时间}timeoutDelay.value = delay}const allList = ref([]) as any // 全量数据onMounted(() => {setDynamicDelay()// 模拟复杂结构的大量数据：const list = [] as anyfor (let i = 0; i < 1000; i++) {const children1 = [] as anyfor (let j = 0; j < 10; j++) {children1.push({label: `${i}${j}`,value: `${i}${j}`,children: [],})}list.push({label: i,value: i,children: children1,})}allList.value = list})return {allList,timeoutDelay,}},
})
</script>
遍历展示复杂数据 test-each.vue
<template><div class="component-container"><div v-if="dataLoading" class="loading-overlay">加载中...</div><div v-for="(item, index) in showTableList" :key="index"><span style="margin-right: 10px">value：{{ item.value }}</span><span>label：{{ item.label }}</span><TestEach:all-list="item.children":timeout-delay="timeoutDelay"/></div></div>
</template><script lang="ts">
import { defineComponent, onMounted, ref, watch } from '@vue/composition-api'
import TestEach from './test-each.vue'export default defineComponent({name: 'TestEach',components: { TestEach },props: {allList: {type: Array,default: () => ([]),},timeoutDelay: {type: Number,default: 500,},},setup(props) {const showTableList = ref([]) as any // 用于展示的数据const dataLoading = ref(false) // 加载const ADD_STEP = 10 // 每次加载条数 => 可自行调整const nowStepNum = ref(0) // 当前加载到第几个const dataListLength = ref(0) // 全量数据数组的长度const setTime = ref(null) as any // 递归加载定时器// 数据推送const pushData = () => {// 如果数据已全部推送完成，停止加载if (nowStepNum.value >= dataListLength.value) {dataLoading.value = falsereturn}setTime.value = setTimeout(() => {const addNum = nowStepNum.value + ADD_STEP// 更新数据数组showTableList.value = showTableList.value.concat(props.allList.slice(nowStepNum.value, addNum),)nowStepNum.value = addNumpushData() // 递归调用，继续推送数据}, props.timeoutDelay)}// 如果不设置setTimeout的后果！将这里改为falseconst isSetTimeout = ref(true)watch(() => props.allList,value => {if (isSetTimeout.value) {dataListLength.value = value.lengthif (value.length > 0) {handlePushData()}} else {showTableList.value = props.allList}},)onMounted(() => {if (isSetTimeout.value) {dataListLength.value = props.allList.lengthif (props.allList.length > 0) {handlePushData()}} else {showTableList.value = props.allList}})const handlePushData = () => {if (setTime.value) {clearTimeout(setTime.value)}nowStepNum.value = 0showTableList.value = []dataLoading.value = truepushData()}return {showTableList,dataLoading,}},
})
</script><style>
.component-container {position: relative;min-height: 20px; /* 设置一个最小高度，确保小组件也能显示加载效果 */
}.loading-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: rgba(255, 255, 255, 0.7);z-index: 1000;
}
</style>
该方法的优劣很明显：
优点是：代码思路相对简单，几乎适用所有数组 / 对象数组的数据（不过必须是Vue）。即使是层级很深，很复杂的对象数组，你依然只需要递归遍历，每次推入特定数量的子数据即可。
缺点是：
1、针对对象数组层级很深的情况，从代码可以很明显看出来，你首先需要能把它们拆成单独组件，这样才能在 onMounted / watch 中监听数据变化，从而正确进行每一层级的 setTimeout（除非你自己在一个组件内，选择复杂的递归遍历）。
不过也正因为如此，如果你有新增、删除某一行数据的诉求，那么每次监听到数据变化，就从头加载肯定不合理。但代码里写的情况很简单，为了解决这个问题，你可以考虑在第一次加载成功后，就不再调用 setTimeout。当然这个缺点带来的最大副作用，就是代码可能会比较复杂。
2、回显所有数据的加载时间比常规方法长。因为页面卡顿，数据量必然会在万级以上。现在假设数据有 10000 条，此时 setTimeout 即使设置 1ms，也要等待加载 10s。
当然你也可以不设置 loading，但是这就强依赖于数据有较低的交互性，或者用户必然会从上到下浏览，这样一来用户就不会感知到这个过程。否则，假如要新增数据，点击了新增，但 setTimeout 还没结束，这大概率会打乱加载的顺序以及数据所要展示的位置。
所以如果针对缺点提出的问题，在你的场景中不会受到其影响，考虑该方法或许会更加简单高效。
解决方法四：浏览器空闲时段加载 requestIdleCallback
requestIdleCallback 的目的是在浏览器的空闲时段内调用其回调函数。所以，我们要做的就是在空闲时段将要展示的数据展示出来即可，改善效果还是比较明显的。
它的优点是：使用方法极其简单（这会在下面代码部分体现）；
不过它的缺点也比较致命：
1、解决方法三的加载时间会比较长，而该方法在极端情况下可能会永远无法加载对应模块数据。因为它的调度优先级较低。换句话说，如果系统资源紧张，或者电脑配置较低，可能会导致回调函数的执行被延迟，影响到功能的响应速度。
当然，为了解决这个缺陷，在下文的代码中想到了一个解决方法，就是定义一个 setTimeout，我们给定一个最长能被接受的延迟时间。假设在时间内，requestIdleCallback 真的没有触发，那么 setTimeout 的回调函数自动触发，就能避免永远无法加载。
但这样一来，又出现了解决方法三的加载时间较长的问题。不过该方法会比解决方法三有更多优势：一是代码层面更简单；二是只要页面展示了相关数据，你就可以直接操作真实数据，不用等到 setTimeout 结束。
2、该方法对浏览器的兼容性较差：https://caniuse.com/?search=requestIdleCallback
所以无论你是否注意到缺点1，为了兼容浏览器并尽量减少电脑配置对功能影响，你依然还是要选用 setTimeout 或其他方法作为兜底方案，从而保证在 requestIdleCallback 未能执行的情况下，功能会正确运行。这样也就变成了解决方法三的优化版本。同时，为了再进一步提高响应速度，依然可以使用 getDevicePerformance，动态调整 setTimeout 的等待时长，以此来平衡执行效率和用户体验。
具体代码：
父组件 test.vue：
<template><div><TestEach:all-list="allList"/></div>
</template><script lang="ts">
import { defineComponent, onMounted, ref } from '@vue/composition-api'
import TestEach from './test-each.vue'export default defineComponent({name: 'TestDetail',components: { TestEach },setup() {const allList = ref([]) as any // 全量数据onMounted(() => {// 模拟复杂结构的大量数据：const list = [] as anyfor (let i = 0; i < 1000; i++) {const children1 = [] as anyfor (let j = 0; j < 10; j++) {children1.push({label: `${i}${j}`,value: `${i}${j}`,children: [],})}list.push({label: i,value: i,children: children1,})}allList.value = list})return {allList,}},
})
</script>
遍历数据 test-each.vue
<template><div><div v-for="(item, index) in allList" :key="index"><TestItem :item="item" /><TestEach:all-list="item.children"/></div></div>
</template><script lang="ts">
import { defineComponent } from '@vue/composition-api'
import TestEach from './test-each.vue'
import TestItem from './test-item.vue'export default defineComponent({name: 'TestEach',components: { TestEach, TestItem },props: {allList: {type: Array,default: () => ([]),},},
})
</script>
要渲染的效果 test-item.vue
<template><div :id="item.value"><template v-if="!isOpenRequestCallback || (isOpenRequestCallback && isVisible)"><span style="margin-right: 10px">value：{{ item.value }}</span><span>label：{{ item.label }}</span></template></div>
</template><script lang="ts">
import { defineComponent, onMounted, ref } from '@vue/composition-api'export default defineComponent({name: 'TestItem',props: {item: {type: Object,default: () => ({}),}},setup(props) {// 动态获取设备的性能指标function getDevicePerformance() {// 使用 Performance API 获取设备的性能数据：页面加载时间const navigationEntries = performance.getEntriesByType('navigation') as anyconst loadTime =navigationEntries && navigationEntries.length > 0? navigationEntries[0].loadEventEnd - navigationEntries[0].startTime: 0// 根据加载时间来判断设备的性能if (loadTime < 1000) {return 'high'} else if (loadTime < 3000) {return 'medium'} else {return 'low'}}// 根据设备的性能来设置延迟时间function setDynamicDelay(callback: any) {const devicePerformance = getDevicePerformance()let delayswitch (devicePerformance) {case 'high':delay = 10 // 高性能设备，延迟时间较短breakcase 'medium':delay = 50 // 中等性能设备，延迟时间适中breakcase 'low':delay = 100 // 低性能设备，延迟时间较长breakdefault:delay = 50 // 默认延迟时间}setTimeout(() => {callback()}, delay)}// 如果不设置requestIdleCallback的后果！将这里改为falseconst isOpenRequestCallback = ref(true)// 内容可见性const isVisible = ref(false)const isSetVisibleDone = ref(false)onMounted(() => {if (isOpenRequestCallback.value) {if ('requestIdleCallback' in window) {requestIdleCallback(() => {isVisible.value = trueisSetVisibleDone.value = true})// 如果系统资源紧张，requestIdleCallback 2s内没有执行，则用setTimeout兜底，直接展示setTimeout(() => {if (!isSetVisibleDone.value) {isVisible.value = trueisSetVisibleDone.value = true}}, 2000)} else {// 使用setTimeout作为回退方案，同时动态调整延迟时间setDynamicDelay(() => {isVisible.value = true})}}})return {isVisible,isOpenRequestCallback,}},
})
</script>
解决方法五：进入可视区域后加载数据 IntersectionObserver
关于 IntersectionObserver 的使用，可以参考该文章：https://blog.csdn.net/fmk1023/article/details/122475012
其原理就是自动监听元素是否进入了设备的可视区域之内，当进入可视区域，让对应区域显示即可。目前效果明显，打开页面无卡顿现象。
该方法相比前面的所有方法，已经可以说是相对较优的解决方案了，因为它至少规避了前面很多方法的缺陷：
1、代码相对简单；
2、在未进入可视区域的时候，你依然可以操作真实数据；
3、不用依赖环境信息，不用等待系统调度；
4、几乎不用在首屏等待加载（但依然可能需要处理加载的情况，详见下方缺点）；
5、可以针对所有组件；
不过它还是有其他缺点：
1、该方法无法处理第三方组件内部数据加载问题。我们无法修改第三方组件的源码，所以就需要借助其他解决方案；
2、因为你只有进入可视区域的时候，对应模块才会加载，所以这虽然让首屏加载更快，且用户感知不到加载，但当你在移动到下一模块时，如果该模块数据量较大，还是可能会出现页面的长时间空白（当然，这时你可以用加载提示用户）。换句话说，可能会出现，滑动到区域后，刚开始没任何内容，然后突然出现大量内容的效果。
3、一定要注意！在 Vue 中我们知道，像 getElementById、$refs.xx 这种操作DOM的操作，一定要等待页面渲染完成（这也是为什么会用到 nextTick）。所以，如果你的代码中用到了这样的操作，因为不在可视区域的模块是没有渲染的，如果滚动条滑动特别快，则部分模块会渲染不出来，此时可能会操作失败。但我们没办法强行控制使用者的滑动速度，除非你确保你的页面不会出现这个问题，否则该方案似乎很难使用在这样的场景下。
4、对部分浏览器依然有兼容问题：https://caniuse.com/?search=IntersectionObserver
父组件 test.vue
<template><div><TestEach:all-list="allList"/></div>
</template><script lang="ts">
import { defineComponent, onMounted, ref } from '@vue/composition-api'
import TestEach from './test-each.vue'export default defineComponent({name: 'TestDetail',components: { TestEach },setup() {const allList = ref([]) as any // 全量数据onMounted(() => {// 模拟复杂结构的大量数据：const list = [] as anyfor (let i = 0; i < 1000; i++) {const children1 = [] as anyfor (let j = 0; j < 10; j++) {children1.push({label: `${i}${j}`,value: `${i}${j}`,children: [],})}list.push({label: i,value: i,children: children1,})}allList.value = list})return {allList,}},
})
</script>
遍历数据 test-each.vue
<template><div><div v-for="(item, index) in allList" :key="index"><TestItem :item="item" /><TestEach:all-list="item.children"/></div></div>
</template><script lang="ts">
import { defineComponent } from '@vue/composition-api'
import TestEach from './test-each.vue'
import TestItem from './test-item.vue'export default defineComponent({name: 'TestEach',components: { TestEach, TestItem },props: {allList: {type: Array,default: () => ([]),},},
})
</script>
要渲染的效果 test-item
<template><div :id="item.value"><template v-if="!isOpenObserver || (isOpenObserver && isVisible)"><span style="margin-right: 10px">value：{{ item.value }}</span><span>label：{{ item.label }}</span></template></div>
</template><script lang="ts">
import { defineComponent, onMounted, ref, onUnmounted, nextTick } from '@vue/composition-api'export default defineComponent({name: 'TestItem',props: {item: {type: Object,default: () => ({}),}},setup(props) {// 如果不设置IntersectionObserver的后果！将这里改为falseconst isOpenObserver = ref(true)const isVisible = ref(false)const observedElement = ref<HTMLElement | null>(null)// 定义 observer 变量在 setup 函数的顶层，以便在 onUnmounted 钩子中访问let observer: any = nullconst target = ref(null) as anyonMounted(() => {observer = new IntersectionObserver(([entry]) => {if (!isVisible.value) {isVisible.value = entry.isIntersecting}},{root: null,rootMargin: '0px 0px 200px 0px',threshold: 0.1,},)nextTick(() => {// 获取元素target.value = document.getElementById(props.item.value)if (target.value) {// 开始观察observer.observe(target.value)} else {isVisible.value = true}})})onUnmounted(() => {if (observedElement.value) {// 停止观察observer.unobserve(target.value)// 手动清理observer.disconnect(target.value)observer = null}})return {isVisible,isOpenObserver,}},
})
</script>
二、JS代码优化
JS优化没有特别需要说明的，所有方法都写在下方示例中，大家可以直接参考：
1、Web Worker: 允许在后台线程中运行代码，避免阻塞主线程。你可以将大数据量的处理逻辑放在Worker中执行，然后将结果传回主线程（不过我试了下没什么改善效果）。
2、分批处理：和页面优化时的分批次处理概念相同，将大数组分成小块，逐一处理，这样可以避免一次性处理大量数据导致的卡顿。不过加载时间可能会比较长，你可以给一些提示信息。
3、requestAnimationFrame：对于需要连续处理数据并更新UI的情况，可以使用requestAnimationFrame来平滑处理。
4、最后的最后：检查自己的代码，寻找是否存在优化空间。比如，避免在循环中使用高复杂度的操作，减少不必要的计算和内存使用。
各位可以比较这些方法的性能和效果，选择最适合自己应用场景的方法。
public/worker.js
self.onmessage = function(e) {const list = []for (let i = 0; i < e.data; i++) {list.push({label: i,value: i,})}self.postMessage(list)
}
主代码：
<template><div><div v-if="loading">加载中...</div><div class="test-btn" @click="clickOne">原始卡顿问题</div><div class="test-btn" @click="clickTwo">优化1 (Worker)</div><div class="test-btn" @click="clickThree">优化2 (分批)</div><div class="test-btn" @click="clickFour">优化3 (RAF)</div></div>
</template><script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'export default defineComponent({name: 'TestDetail',setup() {const allList = ref([]) as anyconst listLength = 10000000const loading = ref(false)// 原始卡顿问题const clickOne = () => {if (loading.value) {return}loading.value = trueconst list = [] as anyfor (let i = 0; i < 10000000; i++) {list.push({label: i,value: i,})}allList.value = listconsole.log(allList.value)loading.value = false}// 解决方法一 workerconst clickTwo = () => {if (loading.value) {return}loading.value = trueconst worker = new Worker('/worker.js')worker.postMessage(listLength)worker.onmessage = function(e) {console.log(e.data)worker.terminate()loading.value = false}}// 解决方法二 分批处理const clickThree = () => {if (loading.value) {return}loading.value = trueconst totalItems = listLengthconst batchSize = 1000let processedItems = 0const list = [] as anyfunction processBatch() {const end = Math.min(processedItems + batchSize, totalItems)for (let i = processedItems; i < end; i++) {list.push({label: i,value: i,})}processedItems = endif (processedItems < totalItems) {setTimeout(processBatch, 0)} else {console.log(list)loading.value = false}}processBatch()}// 解决方法三 requestAnimationFrameconst clickFour = () => {if (loading.value) {return}loading.value = truelet index = 0const list = [] as anyfunction step() {const end = Math.min(index + 1000, listLength)for (let i = index; i < end; i++) {list.push({label: i,value: i,})}index = endif (index < listLength) {requestAnimationFrame(step)} else {console.log(list)loading.value = false}}requestAnimationFrame(step)}return {allList,loading,clickOne,clickTwo,clickThree,clickFour,}},
})
</script>
<style lang="scss" scoped>
.test-btn {background: #409eff;padding: 5px 8px;cursor: pointer;margin-bottom: 20px;color: white;border-radius: 10px;width: 80px;text-align: center;
}
</style>
