微信小程序 === 长列表性能优化

目录

怎么做到的？

环境准备

使用开发者工具调试

开始迁移

在真机上预览效果

配置 We 分析 AB 实验

快捷切换入口

如何识别当前页面是否使用 Skyline

滚动容器及其应用场景

长列表

ScrollView 的三种模式

列表模式

自定义模式

嵌套模式

可拖拽容器

---

 

对于长列表出现的白屏、卡顿、界面跳动等问题，小程序提供了新 scroll-view 来解决这一系列问题。

怎么做到的？

大家肯定好奇为什么新 scroll-view 可以解决这个头疼的问题呢？

我们来对比一下新旧 scroll-view 有什么区别就可以知道答案啦～

旧 scroll-view

• 逻辑层与渲染层的通信需要通过 JSBridge 进行转换，需要一定的时间开销
• 渲染采用异步分块光栅化，当渲染赶不上滚动的速度，来不及渲染则会出现白屏
• 渲染大量节点内存占用高，需要开发者自行优化只渲染在屏节点，开发成本高

新 scroll-view

• 逻辑层与渲染层的通信无需通过 JSBridge 进行转换，减少了大量通信时间开销
• 渲染采用同步光栅化，滚动与渲染在同一线程，不会出现白屏
• 针对长列表进行优化，只渲染在屏节点，内存占用低，减少了一些渲染耗时，且开发接入成本低

除此之外，新 scroll-view 后续将提供 type="custom" 支持 sticky 吸顶效果、网格布局、瀑布流布局等能力便于开发者接入使用～

环境准备

Skyline 具体支持版本如下：

• 微信安卓客户端 8.0.33 或以上版本（对应基础库为 2.30.4 或以上版本）
• 微信 iOS 客户端 8.0.34 或以上版本（对应基础库为 2.31.1 或以上版本）
• 开发者工具 Stable 1.06.2307260 或以上版本（建议使用 Nightly 最新版）

使用开发者工具调试

开发者工具提供了对齐移动端的 Skyline 渲染引擎，支持 WXML 调试、 WXSS 样式错误提示、新增的特性等

按以下步骤切换到 Skyline 模式：

1. 在 app.json 或 page.json 中配上 renderer: skyline，并按下一节添加好配置项，或者按开发者工具的提示逐个加上配置项
2. 确保右上角 > 详情 > 本地设置里的 开启 Skyline 渲染调试 选项被勾选上
3. 使用 worklet 动画特性时，确保右上角 > 详情 > 本地设置里的 编译 worklet 代码 选项被勾选上 (代码包体积会少量增加)
4. 调试基础库切到 3.0.0 或以上版本

开始迁移

迁移到 Skyline，无需大动干弋，我们保持了上层框架的语法、接口基本不变，只需要做局部的调整，主要是加强了 WXSS 样式、内置组件及部分特性的约束，基本流程如下：

1. Skyline 依赖 按需注入 特性，需在 app.json 配上 "lazyCodeLoading": "requiredComponents"
2. 在全局或页面配置中声明为 Skyline 渲染，即 app.json 或 page.json 配上 "renderer": "skyline"
3. 在全局或页面配置中声明使用新版 glass-easel 组件框架，即 { "componentFramework": "glass-easel" }
4. Skyline 不支持页面全局滚动，需在页面配置加上 "disableScroll": true（使之与 WebView 保持兼容），在需要滚动的区域使用 scroll-view 实现
5. Skyline 不支持原生导航栏，需在页面配置加上 "navigationStyle": "custom"（使之与 WebView 保持兼容），并自行实现自定义导航栏
6. 在全局配置中声明默认 block 布局，即 app.json 配上 "rendererOptions": { "skyline": { "defaultDisplayBlock": true } }，详见开启默认 Block 布局
7. 在全局配置中声明默认 content-box 布局，即 app.json 配上 "rendererOptions": { "skyline": { "defaultContentBox": true } }，详见