最近在开发 uni-app 过程中,发现页面布局会闪烁:页面先是显示错乱,然后又恢复正常。

刚开始以为是页面过于复杂,导致性能降低,渲染速度变慢,但由于时间关系,没有来得及详细研究。今天偶然间发现了导致页面布局闪烁的元凶:image 组件。

我新建了一个很简单的页面,只有一个简单列表,每个列表项包含一个标题和一个子列表。其中标题包含两个 image 组件,用来显示图标,子列表高度设置为0,用来实现高度动画。

在调试过程中,发现每次刷新页面,布局都会先错乱,一闪而过后变得正常。实际上这个问题严重影响用户体验,所以我打算研究一下是什么导致了这个现象。

打开 Chrome 浏览器的性能工具,录制页面刷新过程,出现了布局偏移(Layout Shift)一栏,鼠标移动到代表布局便宜的紫色条上,发现页面上的标题部分会高亮。

布局偏移(Layout Shift)指的是元素突然改变位置,会严重影响体验。

标题的结构如下:

<view class="title">
    <image mode="heightFix" src="xxx.svg"></image>
    <text>Title</text>
    <image mode="heightFix" src="xxx.svg"></image>
</view>

其中有两个 SVG 图片,只给它们设置了高度,其宽度自适应:

.title {
    image {
        height: 20px;
    }
}

显示结果是符合预期的,但正是这两个 image 导致了布局偏移!

因为水平有限,具体原因还没有详细研究,不过可以猜测:image 在应用我们自己的 CSS 之前,应该经历了 uni-app 的处理,导致其位置和样式变化。如果有大神了解其中原理,请不吝赐教。

解决办法就是,为 image 设置明确的宽高:

.title {
    image {
        height: 20px;
        width: 20px;
    }
}

End

标签: uni-app

评论已关闭