小程序白屏&渲染异常问题优化
收藏我的收藏
收藏问题描述
白屏
用户在离开页面或者退出小程序的时候，如果小程序 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 进程 Kill 掉，从而导致页面白屏。
控制台信息示例
- •内存使用率过高，使用率超过了 xx%。
- •WebView 进程被 iOS 系统终止。
优化建议
- •检查时候存在内存泄露以及页面持有大量未使用的组件和 js 对象的情况。
- •及时解绑事件监听。事件监听结束后，应及时解绑监听器。
- •及时清理定时器。开发者在开发如「秒杀倒计时」等功能时，可能会使用 setInterval 设置定时器，页面或组件销毁前，需要调用 clearInterval 方法取消定时器。
- •控制 ttml 节点的数量和层级。建议一个页面 TTML 节点数量应少于 1000 个，节点树深度少于 30 层，子节点数不大于 60 个。
CPU 问题
在运行的过程中，出现死循环、过量的计算可能会导致 CPU 突增，因此出现阻塞后续渲染，从而导致页面黑白屏。
控制台信息示例
- •CPU 使用率过高，CPU 使用率为：xxx%。
优化建议
- •排查页面的主要渲染流程中，是否有大量计算或者死循环的问题，如 Canvas 绘制等能力调用频繁的场景。
性能问题
为了避免用户在短暂打开小程序后立即退出，从而被检测到白屏 & 渲染异常，需要满足一定时间的停留条件（当前是 4s）。这也代表着如果开发者的小程序启动性能较差，页面长时间无法完成重要内容渲染导致用户退出，也可能会引发白屏 & 渲染异常问题。
控制台信息示例
可以在启动性能 Tab 栏查看小程序的启动耗时，如果小程序启动耗时较长则有一定的风险引起白屏 & 渲染异常问题。
一般来说，页面首帧完成时间较长，出现白屏问题的风险更大。页面最大元素渲染完成时间较长，出现渲染异常的风 险更大。开发者可结合自己的页面绘制流程进行更深入的分析。
