Flex布局“死敌”：u-row和u-col，还会造成页面卡顿？这也太坑了！

前端

2023-12-22 23:58:09

uni-app 布局组件：避开 u-row 和 u-col 的性能陷阱

简介

uni-app 中备受青睐的布局组件 u-row 和 u-col 虽然功能强大，却暗藏着性能隐患。本文将深入探讨这些问题，并提供避免它们的方法。

u-row 和 u-col 的性能杀手

大量计算属性： u-row 和 u-col 组件大量使用计算属性，这会拖慢性能。尤其是在大量使用这些组件时，计算这些属性会消耗大量 CPU 资源，导致页面卡顿。
DOM 生成过多： 这些组件会根据 props 动态生成 DOM 元素。如果页面中使用大量 u-row 和 u-col，生成的 DOM 元素也会过多，从而增加浏览器的渲染压力，导致页面卡顿。
交互体验不佳： 点击 u-row 或 u-col 组件时，由于重新计算布局，会出现明显延迟。这种延迟虽短，但会严重影响用户体验，让他们觉得页面卡顿。

告别 u-row 和 u-col，拥抱 Flex 布局

为了避免这些性能问题，强烈建议 避开 u-row 和 u-col 布局组件 。

uni-app 提供了一种替代方案——Flex 布局组件 ，它具有以下优势：

更少的计算属性，更好的性能。
更少的 DOM 元素，更小的渲染压力。
更流畅的交互体验，更高的用户满意度。

在需要进行布局时，推荐使用 Flex 布局组件。

代码示例

使用 Flex 布局组件：

<template>
  <view class="container" flex>
    <view class="item" flex="1">Item 1</view>
    <view class="item" flex="2">Item 2</view>
    <view class="item" flex="3">Item 3</view>
  </view>
</template>

<style>
.container {
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.item {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
}
</style>