最近在开发 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