小程序白屏&渲染异常问题优化
收藏我的收藏
收藏问题描述
白屏
用户在离开页面或者退出小程序的时候，如果小程序 Webview 页面为不含任何页面元素的状态（表现为纯色，常见的为黑白屏），则该页面的此次访问被检测为白屏状态。
渲染异常
用户在离开页面或者退出小程序的时候，如果小程序页面无法正常渲染，包括页面图片资源加载失败、「网络请求或资源请求错误」、「无法打开页面」、核销组件核销码异常等，系统将该页面判定为渲染异常。
常见问题和优化方案
针对白屏以及渲染异常问题，在控制台->性能报告->质量检测的白屏原因分析和元素渲染异常原因分析中可以查看相关异常信息的分布。
注意
使用该工具需指定页面，某类异常信息占比越高，说明其与白屏或渲染异常的相关性越大。
网络异常
如果页面依赖于网络请求的数据来进行渲染，在网络请求失败或者超时的时候，可能导致页面黑白屏。
控制台信息示例
- •网络请求未完成，接口为
https://xxx.xxx.com/path。该信息表示当出现白屏或渲染异常问题时，该网络请求未返回有效数据。- •网络请求失败，接口为 https://xxx.xxx.com/path，错误原因为 xxx。
优化建议
- •提升该核心业务接口的性能&稳定性，在开发者平台配置网络请求的报警，针对重要的网络报警及时修复与优化。
- •根据不同的网络接口的数据，分批请求，减少依赖多个接口的数据而导致的性能及稳定性问题。
- •优化页面逻辑并增加数据缓存机制，在数据请求失败时，系统应展示本地缓存内容，避免出现空白页。
- •针对白屏问题，可以接入通用的骨架屏来避免 loading 过程中界面白屏，提升用户体验。
JS/组件/API 异常
在页面渲染的过程中，出现一些阻塞后续流程的 JS、组件/API 能力异常，可能会导致白屏或渲染异常。
控制台信息示例
- •逻辑侧发生 JS 异常，异常消息为 xxx。
- •API 错误，API 为 tt.xxxx。错误信息为 xxx。
- •组件出错，组件为 xxx。错误信息为 xxx。
优化建议
- •在开发者控制台，根据控制台捕获的异常信息进行排查与修复，提高代码的健壮性。
- •需重点关注同步的 JS/API 异常，此类异常易阻塞后续逻辑执行，导致异常行为。
- •针对 JS 异常，可以在开发日志页面中，查看异常堆栈等更丰富的信息。
内存问题
如果小程序运行过程中发生内存泄漏，且页面持有大量组件或 JS 对象导致内存突增，当超过系统阈值时，系统会终止 WebView 进程，从而导致白屏。
控制台信息示例
- •内存使用率过高，使用率超过了 xx%。
- •WebView 进程被 iOS 系统终止。
优化建议
- •检查是否存在内存泄漏及页面持有大量未使用组件和 JS 对象的情况。
- •事件监听结束后需解绑监听器，避免资源占用。
- •及时清理定时器。使用 setInterval 的页面或组件销毁前，需调用 clearInterval 清除定时器。
- •控制 TTML 节点的数量和层级。建议单个页面 TTML 节点数量少于 1000 个，节点树深度小于 30 层，子节点数不超过 60 个。
CPU 问题
在运行的过程中，出现死循环、过量的计算可能会导致 CPU 突增，从而阻塞后续渲染，导致页面黑白屏。
控制台信息示例
CPU 使用率过高，使用率为：xxx%。
优化建议
排查页面的主要渲染流程中，是否有大量计算或者死循环的问题，如 Canvas 绘制等能力调用频繁的场景。
性能问题
为了避免用户在短暂打开小程序后立即退出，从而被检测到白屏 & 渲染异常，需满足停留时长阈值（当前阈值为 4 秒）。若小程序启动性能差导致页面无法及时渲染核心内容，可能因用户提前退出而引发白屏和渲染异常问题。
控制台信息示例
可以在启动性能 Tab 栏查看小程序的启动耗时，如果小程序启动耗时较长则有一定的风险引起白屏 & 渲染异常问题。
一般来说，页面首帧完成时间较长，出现白屏问题的风险更大。页面最大元素渲染完成时间较长，出现渲染异常的风险更大。开发者可结合自己的页面绘制流程进行更深入的分析。
