大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。 背景 事情是这样的，最近团队为了优化用户体验，做了很多针对性的措施，但是有一个小问题，一直卡着。那就是我们

前言 大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~ 背景 最近我们公司有一个页面，这个页面其实结构很简单，就是三个列表同时出现在某个项目的首页里，大概页

`vue3-infinite-list`是一个针对vue3的短小精悍的无限滚动组件，它体积非常小、零依赖gzip只有 3kb。

Vue 将 <slot>元素作为承载分发内容的出口。插槽内可以包含任何模板代码，包括 HTML或其它组件。 显然，利用插槽可以制作可复用组件。例如可以实现一个通用的列表组件，列表的行为是公共的、可复用的，列表中显示的内容使用组件时再指定。 基本实现思路是：将列表数据（items…

本篇文章致力于小白也能懂的虚拟滚动实现原理，一步一步深入比较以及优化实现方案，内容浅显易懂，但篇幅可能较长。 如果你只想了解实现思路，那么可以直接看图或者跳到文章最后。 话不多说，直接开始好吧。 想像一下，当你有10万数据需要展示的时候，咋办呢？我们来试一下将它全部加载出来。 …

当页面数据量较大，例如有几千条数据渲染的时候，dom过多产生滚动卡顿的现象。此时使用该插件可以动态渲染可视区的dom，滚动时实时计算和变更可视区显示的数据。 原理 根据可视区的高度以及it

现如今，我们总是在无止境的刷。刷微博、刷抖音、刷沸点......一次次丝滑下拉体验的背后却是前端攻城狮的用心。 本篇讨论基于 Vue.js 的列表无限下拉实践。 我们的目标就是：让列表下拉纵享丝滑，而不是像以往的下拉就 loading 等待的体验。 咱还是用 Vue CLI 来…

以前听到“虚拟列表”感觉非常的高大上，直到我弄清楚它的原理，发现它是如此的简单！虚拟列表是指对列表的“可视区域”进行渲染，对“非可见区域”不渲染或部分渲染，从而极大提高渲染性能的一种技术。

1. 问题总汇 后端一次性返回数据太多直接渲染造成性能卡顿 稍微差点的电脑对大量数据dom渲染容易卡屏死机 函数节流和防抖的优化基本不起作用的情况下该如何对列表进行优化 2. 虚拟滚动图示 其实就是监