《虚拟列表》分享提问 - 在线考试测评模板

《虚拟列表》分享提问

感谢您能抽出几分钟时间来参加本次答题，现在我们就马上开始吧！

Q1:答题者

填空1

Q2:前端的业务开发中会遇到一些数据量较大且无法使用分页方式来加载的列表，我们一般把这种列表叫做长列表。完整渲染的长列表基本上很难达到业务上的要求的，非完整渲染的长列表一般有两种方式，懒渲染和可视区域渲染，虚拟列表是采用的那种渲染方式（）。

A.懒渲染：这个就是常见的无线滚动的，每次只渲染一部分（比如10条），等剩余部分滚到可见区域，就再渲染一部分。

B.可视区域渲染：只渲染可见部分，不可见部分不渲染。

C.都不是。

Q3:.getElementById(button).addEventListener(click,function(){ // 记录任务开始时间 let now = Date.now(); // 插入一万条数据 const total = 10000; // 获取容器 let ul = .getElementById(container); // 将数据插入容器中 for (let i = 0; i total; i++) { let li = .createElement(li); li.innerText = ~~(Math.random() * total) ul.appendChild(li); } console.log(JS运行时间：,Date.now() - now); setTimeout(()={ console.log(总运行时间：,Date.now() - now); },0) // print JS运行时间： 38 // print 总运行时间： 957 })；上述代码会同时向页面中加入一万条记录，通过控制台的输出，我们可以粗略的统计到，JS的运行时间为38ms,但渲染完成后的总时间为957ms。关于两次console.log的结果时间差异巨大下面说法正确的是（）。

A.在 JS 的Event Loop中，当JS引擎所管理的执行栈中的事件以及所有微任务事件全部执行完后，才会触发渲染线程对页面进行渲染。

B.第一个console.log的触发时间是在页面进行渲染之前，此时得到的间隔时间为JS运行所需要的时间。

C.第二个console.log是放到 setTimeout 中的，它的触发时间是在渲染完成，在下一次Event Loop中执行的。

D.都正确。

Q4:下面关于虚拟列表的实现说法正确的是（）。

A.虚拟列表的实现，实际上就是在首屏加载的时候，只加载可视区域内需要的列表项，当滚动发生时，动态通过计算获得可视区域内的列表项，并将非可视区域内存在的列表项删除。

B.首次渲染时，只展示相对于父元素可视区内的子列表元素，在滚动时，根据父元素的滚动的offset重新计算应该在可视区内的子列表元素。这样保证了无论如何滚动，真实渲染出的dom节点只有可视区内的列表元素。

C.都正确。