页面注入 50 万个 li 怎么做提升性能？

Question

题目描述

页面注入 50 万个 li 怎么做提升性能？

思路

50 万个 li 是基本不可能同时在页面上展现的。 这个时候我们需要具体地限定一下问题范围。

我们不妨假设一个li的宽度为 100%， 高度为 20px; 屏幕高度为 1000px，那么也就说理论上，一个屏幕所能 容纳的最大 li 个数为为 1000 / 20 = 50 个。

因此一个简单且直观的想法是，在必要的时候我们再去 DOM 中插入。 我们可以利用“视口检测”技术判断当前是否应该去插入li。但是这里有个问题， 就是如果用户滚动太快怎么办？ 不在视口的 DOM 需不需要回收？ 如果需要回收，我们应该怎么回收？ 这些都需要大家去思考。大家可以查一下相关的资料。

由于插入50个li，如果一个一个插入肯定会不断重排，性能会很差。 我们可以考虑使用createDocumentFragment 来减少重排的次数。

我们创建50个li的过程是否会涉及到后端请求，如果涉及到了，我们一次请求多少比较合适？ 我们需不需要进行预先请求。 如果本地网络IO很差的话，如何尽可能提高用户体验？

其实性能是一个相当主观的东西， 比如React使用了fiber架构，它的总运行时间 甚至比以前还要长，但是给用户的感觉是“性能好”。因此性能优化其实还有很多 讨巧的点可以考虑，大家不妨发散一下脑洞。

扩展1

假如创建li的过程非常耗时，我们应该怎么去应对？

扩展： 前端如何知道本机计算性能很差？

这个时候，我们可以考虑使用 webworker，将计算量比较大的任务放到别的线程去执行， 然后利用线程通信，获取返回的结果，从而避免由于JS运算导致主线程阻塞。

扩展2

如果本机计算性能很差，我们怎么应对？

这个时候，我们可以考虑使用类似 RIC(requestIdleCallback) 或者 RAF(requestanimationframe) 这样的API。 保证用户正常交互的同时，完成我们的插入任务。