Xamarin.Forms iOS端菜单页面布局渲染延迟问题咨询

问题背景 #

项目基于Xamarin.Forms + SkiaSharp开发，同时适配iOS、Android双端。目前Android端所有功能运行正常，仅iOS端存在特殊性能异常：菜单页内Label、Canvas的布局更新存在肉眼可见的延迟，同时伴随Label字体切换滞后的现象。

具体异常表现 #

• 打开新菜单、返回上一级菜单时，存在约50ms的渲染滞后：这段时间内菜单标题的字体、文本仍显示为上一菜单的残留内容
• 异常程度存在场景差异：首次打开菜单、关闭菜单时滞后现象最明显，打开「Delete Saved Game」菜单时表现稍弱
• 布局位置偏移：首个菜单标题使用的GnollHack字体尺寸远大于「Load Saved Game」菜单所用字体，受渲染时序影响，SkiaSharp Canvas绘制的菜单项会出现位置偏高或偏低的偏移
• 复现稳定性：该问题在远程测试环境、iOS真机测试场景下均可稳定复现，可通过720P清晰度的复现视频直观观察到完整异常流程

初步排查进展 #

• 初步判断根因方向：菜单展示逻辑ShowMenuCanvas函数执行完成后，Xamarin布局在初始数毫秒内会分多次触发渲染，而非一次性完成全量UI绘制
• 控件因素排除：当前菜单使用的Label为自定义CustomLabel类，替换为Xamarin.Forms原生Label后问题仍可复现，排除自定义控件的逻辑影响
• 页面结构说明：GamePage.xaml中通过MenuGrid容器承载所有待展示的菜单页内容，相关逻辑代码位于项目GamePage.xaml.cs文件的Game页面模块下
• 平台特征：Android端无任何同类异常，问题属于iOS平台特有，大概率与Xamarin.iOS的布局生命周期机制相关

待解决诉求 #

• 明确该iOS端布局分帧缓慢渲染问题的具体底层成因
• 提供可落地的实现方案，实现菜单切换时所有UI元素一次性同步更新，消除残留帧和位置偏移

内容的提问来源于stack exchange，提问作者janne-hmp