前端长列表高频面试题（含详细接地气答案）.docxVIP

前端长列表高频面试题（含详细接地气答案）

1.简单说下什么是长列表？长列表会出现哪些性能问题？

答案：

长列表就是页面需要渲染大量列表数据的场景，一般几百条、上千条甚至上万条数据，都可以算作长列表。常见场景：订单列表、聊天记录、商品列表、资讯流等。

原生直接渲染全部数据，会出现几个核心问题：

1.DOM节点过多：一次性生成上千个DOM节点，浏览器解析、渲染、布局都会耗时，页面首次加载卡顿、白屏、加载慢。

2.内存占用高：大量DOM节点常驻内存，页面切换、滚动时垃圾回收压力大，长期运行容易页面卡顿、掉帧。

3.滚动卡顿、丢帧：滚动过程中浏览器需要不断重排重绘，DOM越多，渲染开销越大，手感卡顿、不跟手。

4.事件绑定开销大：如果每条列表都单独绑定点击、滑动事件，上千个事件监听会占用大量资源。

5.首屏加载慢：接口返回数据后，JS渲染DOM耗时过长，阻塞主线程，导致页面可交互时间变长。

2.解决长列表卡顿的常用方案有哪些？各自优缺点？

答案：

行业主流三种方案：分页加载、懒加载（滚动加载）、虚拟列表（虚拟滚动）

一、分页加载

每次只请求、渲染一页数据，翻页刷新内容。

优点：实现最简单，几乎无性能问题，适配所有设备。

缺点：用户体验差，需要手动点击翻页，无法实现顺滑的无限滚动浏览。

二、滚动懒加载（无限滚动）

监听滚动到底部，动态请求下一页数据，追加到列表末尾。DOM节点