在 Skyline 支持了长列表按需渲染之后，还是有很多开发者对于按需渲染表示疑惑：

开发者A：scroll-view 下拉不太流畅

开发者B：list-view 有什么作用呢？

开发者C：关于长列表的按需渲染功能，我们如何能检测到这个功能正确触发了呢？

关于以上几个问题，我们一一来解答：

Q：scroll-view 下拉不太流畅？ 

当发现 scrll-view 下拉不够流畅时，可能是用法不对导致的不流畅。

根据 type 不同，按需渲染的用法也不同，建议按以下方式检查一下

• type="list" : 根据直接子节点是否在屏来按需渲染
• type="custom" : 只渲染在屏节点，对于列表、网格、瀑布流等，子节点必须包裹在 list-view、grid-view 内部才会按需渲染。

Q：list-view 有什么作用呢？

对于 list-view、grid-view 等 *-view 组件，符合规定的写法则会按需渲染。

默认情况下，视口外节点不渲染。也可以根据业务需要，设置 scroll-view 的 cache-extent 指定视口外渲染区域的距离来优化滚动体验和加载速度。

当然 cache-extent 越大也会提高内存占用且影响首屏速度，建议大家按需启用。

Q：关于长列表的按需渲染功能，我们如何能检测到这个功能正确触发了呢？

当使用按需渲染时，例如下面用的 type="list"，其实直接子节点都是一开始就创建的，所以没有办法从开发者工具检查到这个功能正常触发。

不过可以在真机上开启 “开发调试 - Debug Skyline - checkerboardRasterCacheImages” 调试

当滚动 view 离开屏幕回来之后颜色变了，说明节点重新渲染了，以此来确认按需渲染功能正确触发

👇例如下图中第一个节点，一开始是紫色，当离开屏幕重新滚动回屏幕时，变成了黄色，证明按需渲染成功～

注意：不是所有的组件都会形成 RasterCache，需要结构复杂一些才会；

*-builder 组件

除了 *-view 组件，很多开发者应该也注意到了 *-builder 组件

• list-view 对应 list-builder
• grid-view 对应 grid-builder

看文档描述的能力是一样的，但是为什么会分成两个组件呢？

因为目前 *-view 组件是按需渲染，节点还是会不断的创建，当长列表越来越长时，内存占用会越来越多。

于是我们新增了 *-builder 组件来支持 scroll-view 的可回收，可以更大程度降低创建节点的开销。

我们来看下效果，可以从开发者工具的 wxml 看到，当列表滚动时，list-builder 中渲染的 view 节点只有在屏的几个

除了使用 wxml 板块查看之外，*-builder 组件还提供了监听事件，开发者可以监听列表创建和回收

• binditembuild：列表项创建时触发，event.detail = {index}，index 即被创建的列表项序号
• binditemdispose：列表项回收时触发，event.detail = {index}，index 即被回收的列表项序号

使用场景

既然 *-builder 组件拥有回收+创建能力，是不是可以不用 *-view 组件啦？

当然不是啦～～～

回收+创建能力本身就是有开销的，所以也要根据业务场景按需使用哦

• *-builder：对于长列表、无限滚动列表等，或者节点内存占用高的，每个时刻都确保不会有太多节点创建出来，使用 *-builder 可以节省内存
• *-view：对于短列表，或者内存占用不高的列表则比较适合使用 *-view

代码片段：https://developers.weixin.qq.com/s/rp07iKmW7UQS