难度级别：中高级及以上 提问概率：65%
在真实工作中，如果遇到服务端一次性返回给前端1万条数据的场景，是非常不应该的。如果服务端可以给前端一次性返回1万条数据的话，那说不准哪次的接口请求数据就会更多。海量的响应数据无疑会使接口响应速度变慢，用户处于长时间的等待中，甚至还会造成接口响应超时。而且大多数需求场景下，前端也很少有一次性要展示上万条数据的情况，所以如果前端遇到这种情况的话，应该尽量与服务端做接口协调，改为分页请求的方式。
如果排除接口响应失败的情况，只是就这道题而言，这属于特殊场景解决型面试题，那么从前端开发的角度来看，应该做出哪些应对方案呢？
首先这种大批量的数据获取，很可能并不是实时产生的，而是服务端采用定时任务的方式，每隔一段时间采集一次响应给前端显示。这样前端就可以在第一次获取数据过程中添加loading等待提示效果，等请求到响应数据后隐藏loading等待提示，将数据存储到localstorage中，并且通过与服务端协商为localstorage存储设置过期时间。通过这种方式，前端只是第一次请求的时候等待时间会长一些，后续都是从localstorage直接获取。每当检测到快要到过期时间的时候，提前请求下一次的数据，并将localstorage中的数据替换。通过这种方式，基本保证了用于只需要等待第一次数据请求的过程，在后续的数据获取过程中用户都是无感知的。
虽然数据已经全部都请求到了，但前端如果同一时间展示大批量数据的话，也是比较消耗时间的。如果数据中包含有大量的图片，因为图片并发请求数量过大的话也会造成请求阻塞，同样会使用户处于长时间的等待中。这个时候前端就需要根据需求自己对数据做出分页处理。例如每10条数据做为一页，或者根据当前屏幕高度可容纳的数据条数做出分页处理，原则就是当前只显示一小部分数据，减轻浏览器渲染的压力。
如果需求明确要求不能做分页处理，不希望用户点击分页按钮，那么可以将数组划分为数组数据，数组的每个元素用来存放一定量的数据。当用户滑动屏幕，检测到距离屏幕底部还有一定距离的时候开始追加渲染下一部分，其实这也相当于分页处理的另外一种形势，只不过把分页的时机改变为用户滑动屏幕。还可以将数据做为一个任务队列，不需要用户点击下一页或者滑动屏幕，每当检测到第一个队列加载完毕后，紧接着程序自动追加下一队列的数据，使数据追加显示自动化。这样不仅减小的浏览器渲染的压力，还可以做到使用户对整个加载渲染过程无感知。
以上这些加载方式，虽然都做了数据的分块处理，但前端处理页面毕竟加载的是各种各样的DOM元素，而非生硬的数据，这也就避免不了大量DOM创建与插入的操作，这些操作对于浏览器渲染而言是非常昂贵的。所以我们需要在加载过程中，提前对下一批数据做DOM片段转换的工作，等需要加载这一批数据的时候直接将转换好的DOM片段追加进来就可以，尽量减少对DOM元素的操作。
刷题思考
这道题属于解决特殊场景下的问题，看似场景不太合理，但这恰恰有可能是面试官工作中遇到的问题，所以回答这类问题会比普通知识类考点容易加分。
回到本题中，求职者被问到问题时，一定按获取数据、前端缓存、数据分块、虚拟列表渲染的过程来回答，如果不按顺序就容易出现少回答或者乱回答的情况。如果求职者有服务端相关经验，还可以多从服务端相关优化项说起，毕竟一个完美的项目需要前后端协作才能完成的更出色。
类似考点
如果你已经掌握了这一节的知识点，那么面试官很可能会穿插着提出以下这些问题，例如请你说一说在Vue项目中如何处理长列表？例如你知道如何给axios请求设置超时时间吗？例如你知道前端如果需要展示一个分页组件的话，服务端需要返回哪些关键数据吗？
扫一扫
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
