34、如何实现上拉加载，下拉刷新？

这是前端面试里很常见的实战题。它考察的不只是 API 会不会用更重要的是你是否理解滚动原理触底判断移动端触摸事件请求节流与状态控制用户体验优化分页 / 数据管理性能和边界处理如果你能按这些点来回答面试官会觉得你不只是“会写”而是真的做过。一、先说概念1上拉加载上拉加载本质上是当用户滚动到底部附近时自动请求下一页数据并追加到列表末尾。常用于商品列表文章列表评论区消息流瀑布流2下拉刷新下拉刷新本质上是当用户在列表顶部继续向下拖动时触发数据重新加载一般是重新请求第一页数据并替换当前列表。常用于新闻流社交 Feed聊天列表移动端 App WebView 页面二、面试中推荐先说实现思路你可以先总述一句上拉加载核心是“触底检测 分页请求 列表追加 防重复请求”下拉刷新核心是“顶部检测 下拉距离判断 刷新请求 列表重置”。这一句非常适合开头面试官会觉得你有结构。三、上拉加载怎么实现上拉加载通常有两种主流实现方式scroll 事件监听IntersectionObserver 监听底部哨兵元素方案一基于 scroll 事件实现这是最传统、最常见的方式。核心原理监听页面滚动当满足“滚动到底部附近”时触发加载下一页。常见判断条件scrollTop clientHeight scrollHeight - threshold含义scrollTop当前滚动距离clientHeight可视区域高度scrollHeight内容总高度threshold提前量比如 50px、100px示例代码let page 1 let loading false let finished false async function loadMore() { if (loading || finished) return loading true const res await fetch(/api/list?page${page}) const data await res.json() if (data.list.length 0) { finished true } else { renderList(data.list) page } loading false } window.addEventListener(scroll, () { const scrollTop document.documentElement.scrollTop || document.body.scrollTop const clientHeight document.documentElement.clientHeight const scrollHeight document.documentElement.scrollHeight if (scrollTop clientHeight scrollHeight - 100) { loadMore() } })面试加分点一定要主动提这几个状态loading防止重复请求finished避免没有更多数据后继续请求page分页控制threshold提前触发优化体验方案二基于 IntersectionObserver 实现这是更现代、更推荐的方式。思路在列表底部放一个“哨兵元素”sentinel当这个元素进入视口时就说明用户快滚动到底部了然后触发加载更多。示例ul idlist/ul div idloadMoreTrigger/divconst trigger document.getElementById(loadMoreTrigger) const observer new IntersectionObserver((entries) { if (entries[0].isIntersecting) { loadMore() } }, { root: null, threshold: 0.1 }) observer.observe(trigger)优点不需要频繁监听 scroll性能更好代码更简洁更适合懒加载、无限滚动面试加分说法如果浏览器环境允许我会优先考虑IntersectionObserver因为它比手动监听 scroll 更优雅也更利于性能优化。这句话很加分。四、下拉刷新怎么实现下拉刷新更常见于移动端。它通常依赖当前滚动位置是否在顶部触摸开始位置触摸移动距离是否超过触发阈值松手时执行刷新核心流程用户触摸开始记录起始位置如果当前页面滚动已经在顶部再向下拉计算下拉距离超过阈值后显示“松开刷新”触摸结束时执行刷新逻辑请求第一页数据并重置列表简化示例let startY 0 let distance 0 let isRefreshing false const container document.getElementById(container) container.addEventListener(touchstart, (e) { if (document.documentElement.scrollTop 0) { startY e.touches[0].clientY } }) container.addEventListener(touchmove, (e) { const currentY e.touches[0].clientY distance currentY - startY if (distance 0 document.documentElement.scrollTop 0) { // 更新下拉提示 UI console.log(下拉距离, distance) } }) container.addEventListener(touchend, async () { if (distance 80 !isRefreshing) { isRefreshing true await refreshList() isRefreshing false } distance 0 })刷新逻辑下拉刷新通常不是“追加数据”而是“重置数据”async function refreshList() { const res await fetch(/api/list?page1) const data await res.json() resetList(data.list) page 2 finished false }五、如果是 PC 端下拉刷新怎么理解严格来说原生“下拉刷新”更偏移动端交互。在 PC 端通常不会真的做“手势下拉”而是用点击刷新按钮顶部刷新提示条滚动回顶部自动刷新定时刷新如果面试官问的是通用 Web 页面你可以回答下拉刷新更多是移动端场景PC 端通常不会完全模拟触摸下拉而是用其他交互形式替代。这个回答会显得你有产品和场景意识。六、实际项目中要注意哪些问题这一部分是“精彩回答”的关键。1防止重复请求上拉加载和下拉刷新都要有状态位控制if (loading) return否则快速滚动、快速拖动会触发多次请求。2处理“没有更多数据”后端通常会返回总条数total是否还有下一页hasMore当前页page前端要根据这些信息决定是否继续加载。3节流 / 防抖如果是scroll监听实现上拉加载需要做节流function throttle(fn, delay) { let timer null return function (...args) { if (timer) return timer setTimeout(() { fn.apply(this, args) timer null }, delay) } }window.addEventListener(scroll, throttle(checkLoadMore, 200))为什么因为 scroll 事件触发非常频繁不节流会影响性能。4避免请求竞态问题如果用户触发多次刷新或切换很快可能导致后返回的旧请求覆盖新数据。解决方式请求取消AbortController请求序号比对只认最新请求结果这个点说出来会很加分。5用户体验优化比如正在加载时显示 loading没有更多数据显示“到底了”下拉中显示“下拉刷新 / 松开刷新”刷新完成后显示“刷新成功”这些细节体现工程和产品意识。6回弹效果与阻止默认行为移动端下拉刷新 often 需要处理页面原生回弹浏览器默认下拉刷新行为touchmove 时是否preventDefault这个点在 H5 中尤其常见。不过要注意某些浏览器原生下拉刷新不容易完全禁用需要结合具体容器和 CSS如overflow设计7列表过长时做虚拟列表如果上拉加载导致列表越来越长DOM 节点过多会造成卡顿。这时候可以结合虚拟滚动分片渲染图片懒加载这个点是高级加分项。七、面试中怎么回答更精彩你可以这样组织语言标准版回答上拉加载和下拉刷新本质上都是列表场景中的数据增量更新方案。上拉加载的核心是监听滚动位置在接近底部时触发下一页请求把新数据追加到列表末尾下拉刷新的核心是在列表顶部时监听用户向下拖动的手势超过一定阈值后触发刷新请求第一页数据并重置列表。上拉加载实现上传统做法是监听scroll事件通过scrollTop clientHeight scrollHeight - threshold来判断是否触底更现代的方案是用IntersectionObserver监听底部哨兵元素进入视口这样性能更好。下拉刷新一般更多用于移动端通常结合touchstart、touchmove、touchend来计算下拉距离在顶部下拉超过阈值后触发刷新。实际开发中我会特别关注几个问题第一增加loading状态防止重复请求第二根据hasMore或总页数控制是否继续加载第三scroll监听要做节流第四要处理请求竞态、加载提示和空状态如果列表很长还会考虑虚拟列表来避免 DOM 过多导致卡顿。这已经是比较完整、成熟的回答了。八、如果想回答得更高级可以补这一段在实际项目中如果是普通 Web 列表我会优先使用IntersectionObserver实现上拉加载因为它比频繁监听scroll更优雅、性能也更好如果是移动端 H5 下拉刷新我会结合顶部容器和 touch 事件做自定义手势处理同时注意和浏览器原生回弹行为的兼容。此外请求层我一般会增加去重、取消、错误重试和分页状态管理避免因为网络抖动造成重复加载或数据错乱。这段非常有项目味道。九、常见面试追问1上拉加载为什么要节流因为scroll事件触发频率很高如果每次都执行复杂逻辑或发请求会带来性能问题。2如何判断是否到底部常见公式scrollTop clientHeight scrollHeight - threshold3为什么IntersectionObserver更好减少手动监听 scroll浏览器底层优化更好代码更简洁适合懒加载和无限滚动4下拉刷新为什么主要用于移动端因为它依赖手势交互移动端触摸下拉更自然PC 端通常不会用这种交互方式。5如果连续触发加载怎么办通过loading状态锁、防抖/节流、请求取消等方式避免重复请求。6如果请求回来顺序乱了怎么办可以给请求加唯一标识只处理最后一次请求使用AbortController取消旧请求十、精简版面试回答如果面试时间不多你可以这样说上拉加载的核心是触底检测当用户滚动到底部附近时请求下一页数据并追加到列表中下拉刷新的核心是在列表顶部监听用户向下拖动超过阈值后重新请求第一页数据并重置列表。上拉加载通常可以通过scroll事件判断scrollTop clientHeight scrollHeight - threshold来实现也可以用IntersectionObserver监听底部哨兵元素这种方式性能更好。下拉刷新更多用于移动端通常结合touchstart、touchmove、touchend来实现。实际开发中我会重点处理loading防重复请求、hasMore控制是否还有下一页、scroll 节流、请求竞态、以及 loading / empty / finished 等状态展示。十一、一句话总结面试官真正想听的是你是否理解上拉加载和下拉刷新的核心原理你是否知道scroll 方案和 IntersectionObserver 方案你是否知道移动端 touch 事件实现下拉刷新你是否具备分页、状态控制、性能优化、异常处理这些工程意识